Hi All,

@Leeds-eBooks and I have spoken, we want to start the conversation about a new release. @Leeds-eBooks and I are the most recently added core contributors and we seem to be the only active 2 right now (he more than I). Rivets has had a TON of new activity lately this is great and very healthy! In order to keep everyone interested and willing to help, we we must push things forward even in the absence of the original developer @mikeric.

In the coming days we will revisit all (currently 37) open pull requests. When this is done I will report back to this thread and we can all give our arguments for or against moving forward with the accepted PR's representing the new feature set.

Anyone following rivets with decent opensource experience please chime in. We need your help to ensure we dont mess things up and upset people.

If anyone knows @mikeric can you personally reach out to him and ask him to give some of us access to publish to NPM. (we cannot publish new version to NPM without it.)

It's me again :)

I'm new to data binding but i've been checking out knockout as well.

is it possible to do conditional logic with rivets?

something like this

<div class="post">
    <div data-if="post.type = foo">
        <h2>Foo</h2>
        <span>foo stuff</span>
    </div>
    <div data-if="post.type = bar">
        <h2>Bar</h2>
        <span>bar stuff</span>
    </div>
</div>

Hi

There has been several bad issues detected. Some are fixed with PR.

Issues

• [x] #644
• [x] #650
• [x] #649
• [x] #658

Doc update

• [x] Details on computed properties (#658)
• [x] Download link update

@Leeds-eBooks @Duder-onomy Is it time for a 0.9.2?

In this issue, I would like to discuss the auto-execution of functions in Rivets expressions

{ model.myFunction }

If myFunction is a function, Rivets will execute it and send the result in the template.

I think we should turn off this feature. It would allow us to manually call the function with parameters. This would be a powerfull feature for a very small cost. The manual execution would be handled by a formatter like

{ model.myFunction | call model.param1 'param2' }

For backward compatibility reasons we could have a parameter in Rivets configuration

rivets.configure({autoExecuteFunctions: true});

I know it's less user friendly than a JS expression. But it's in the rivets template syntax and would totally benefit of the existing databinding mecanism without any additional work. I like rivets expression syntax, because it's very easy to learn but very powerful.

Hi

I've done the upgrade from 0.6.9 to 0.7.1. Since i noticed some memory leak. The objects seem to be retained after unbind. I made a jsfiddle with a very basic bind/unbind. In the model i put a very big String (~5MB) so we can clearly see the allocations and deallocations.

example with 0.6.9 : http://jsfiddle.net/jccazeaux/v6x47k6k/

In the chrome profiler we can see that the objects are correctly freed:

Same code with 0.7.1 : http://jsfiddle.net/jccazeaux/v6x47k6k/2/

In the chrome profile we see that the objects are retained. The memory is growing.

To test it, just start the "Record heap allocation" profiling type and click alternatively on "bind" and "unbind".

Hi All,

I'd like to pass something to function through rv-on-blur rv-on-blur="item.dd('1')"

But it fails, how to do, anyone can teach me?

Thanks Eric Xin

It's not very hard to implement ability to pass arguments (and watch them) into function in rivets expression. So that, all the methods will have more clear api

<div rv-show="canShow(todo)" rv-each-todo="todos"></div>

<a rv-click="selectTab(tab)">Tab 1</a>

<h1>{ formatDate(todo.createdAt, 'hh:mm') }</h1>

Basically we need to add one more if inside TypeParser which will compile and return function. We can restrict this so the implementation won't be very complicated. For example, it's possible to pass only primitives and keypaths. That means we can't pass function invokation as a result. So this is not valid:

{ formatDate(todo.getDate(), 'hh:mm') }

However I believe even this case can be handled using recursive.

@blikblum, @Leeds-eBooks, @jccazeaux do you think this something useful or overcomplicated?

I'm having a little issue figuring out the best way to hook Rivets up to a jQuery plugin. What I initially tried was making sure that the jQuery plugin announced updates by triggering off an event.

The problem is, I end up with a bit of circular logic, because the plugin announces and update, Rivets updates the model, which then fires off the "routine" binder, which then manually updates the plugins value, which fires off my trigger again.

What I'm running into is if I can set() on the model directly, things work as I expect. However, if I manually use the jQuery plugin to select my value, I end up getting my callback selections to fire off twice.

Any suggestions?

As a follow-up to #92, I think the keypath access notations (. and :) should not be hardcoded into Rivets.js core, it's confusing to beginners what these are for, and "why" you actually need to define an adapter. Instead they should be exposed as interfaces that you can add and overwrite however you like, but not required to start using Rivets.js.

By default, Rivets.js would ship with a single interface for the . notation to observe properties on POJSOs using ES5 natives. This interface will work on all ES5-compliant browsers (IE9+, FF4+, SF5+, CH7+ and OP12+).

If you're targeting non-ES5 browsers, you can overwrite the default interface to work with an evented model library of your choice that has the legacy browser support you need.

You can add as many interfaces as you like and assign whatever separator you want to them. For example, you can keep . for subscribing to plain objects, add : or @ for subscribing to Backbone.js model attributes or even # for subscribing to validation errors if you want.

The API for defining an interface would be similar as for defining the adapter in < 0.6.0.

rivets.interfaces[":"] = {
  observe: function(keypath, callback) {
    this.on("change:" + keypath, callback)
  },
  unobserve: function(keypath, callback) {
    this.off("change:" + keypath, callback)
  }
  get: function(keypath) {
    return this.get(keypath)
  },
  set: function(keypath, value) {
    this.set(keypath, value)
  }
}

There would be no more : notation by default. If you want similar functionality as the adapter bypass, you can just implement an interface for it (leave out the observe and unobserve functions and define a simple get and set).

rivets.interfaces[":"] = {
  get: function(keypath) {
    return this[keypath]
  },
  set: function(keypath, value) {
    this[keypath] = value
  }
}

To sum things up, there would now be 3 main concepts for tuning Rivets.js to your application.

• Interfaces: Defines how Rivets.js observes and interacts with the model / keypath.
• Binders: Defines how Rivets.js affects the DOM and/or model when properties change.
• Formatters: Defines how Rivets.js affects incoming values before it goes through the binder and/or back to the model.

All of which are accessible in the universal syntax for binding declarations:

data-[prefix]-[binder]="[model][interface][keypath] < [dependencies] | [formatters]"

It would be nice if you could specify when you want 'value' to be updated (keyup, keydown, keypress, etc.) to make everything look a bit snappier. Right now you need to lose focus/press enter before it will publish using data-value. I tried to accomplish this with an extension but modifying value within the context of the function has no effect. This might be a different issue but it would be nice to have control over changing the value from within an extension via some convenience functions.

What I want to do (rough example):

rivets.register 'keyup', (el, val) ->
  el.addEventListener 'keyup', (e) -> 
    val += String.fromCharCode e.which

Features for components:

• made "template" method being optional
• added ability to return DOM node/fragment from "template" method
• added tests for component binding

CC: @Leeds-eBooks, @mikeric, @ansman

Hello, not really an issue but more a question/feature request. Is there any way that i can trigger a callback function on a rivets components viewModel anytime the arguments to the component change? I have a plugin that needs some manual setup/configuration within the view. I would like to trigger the functions that do this from within the component every time the arguments change. I was thinking something along the lines of the following:

rivets.components['session-chooser'] = { template: function() { return SessionChooser.prototype.HTML; }, initialize: function(el,attr) { let viewModel = new SessionChooser(el,attr);
this.observers.event.callback <- point this at a function on the viewModel somehow or add another observer to do so.. return viewModel; } }

Hello! In 8/10 cases, when adding the quantity of products, for example, 4 pieces - after going to Cart, there is not 4, but 1 piece. And you have to manually put the right amount in Cart. As if rivets or ajax scripts are not immediately loaded or maybe something else. What could it be? We need your help.

This may just be something I am not seeing, but is there a way of creating different scopes that do not share the same "rivets" object?

I.e. I do not see a way of having 2 separate views with different formatters bound to them, as they are all registered on the same "rivets" object,

E.g. rivets.formatters.gt = (a,b) => a > b; becomes available in all bindings/views, as far as I can tell?

I want isolated views that are not "polluted" with formatters and other options set on other views, as there could be configurations sourced from separate parties on the same page.

E.g. if I could do let scope1 = new rivets(); scoped.formatters.gt = ...

Is this not possible?

Maybe if this was possible to configure on the rivets.bind(el, data, ...local config...) ?

In Handlebars you can do: template({ ..data.. }, { helpers: { gt: (a,b) => a > b })

I have a function that adds stylesheets to the head. After this function is called, all rv- attribute bindings break (such as rv-html, rv-data-*, etc). Regular bindings seem to continue to work ({ data.whatever }). Thoughts? Is there anyway to "reload" these attribute bindings?

The attribute bindings are on a component that's rendered insite an rv-each, which may be the problem.

Consider an example:

<div>
<input type="text" id="number_1"/> x <input type="text" id="number_1"/> = <span id="total"></span>
</div>

When #number_1 textfield is filled in 5 and #number_2 textfield is filled in 2,then #total span will be show 10 automatically. How to do this by rivets (0.9.6),Please display all the code,thanks very much.