Default "rv-value" should also listen to inputs "change" event

[superware]

I'm using typeahead like this:

<input rv-value="service.name" data-provide="typeahead" />

When selecting an item typeahead sets the input value and triggers a "typeahead:selected" event, can rivets react to that event and update the model?

Thanks.

[Duder-onomy]

Hi Superware,

This is the perfect scenario for a custom binder. Something like rv-typeahead

I don't have the time to shoe-horn a typeahead implementation into jsfiddle. But here is what your binder will look like:

rivets.binders.typeahead = {
    bind : function(el) {
        $(el).typeahead({
            minLength: 3,
            highlight: true
        },
        {
            name: 'my-dataset',
            source: mySource
        })
        .on('typeahead:selected',  function(event, selection) {
             this.observer.setValue(selection); // not sure if you need to get a value from the selection. 
        }.bind(this));
    },
    unbind : function(el) {
        $(el).typeahead('destroy');
    },
    routine : function(el, value) {
        $(el).typeahead('val', val);
    }
}

Let me know if this helps.
If you can make a jsfiddle with a bare minimum typeahead implementation I will implement the binder for you.

If this resolves your problem, please close this issue.

[superware]

Hi Duder,

Please see this jsfiddle, it seems bootstrap-typeahead is triggering a "change" event upon item selection, but rivets default rv-value doesn't respond to "change" events.

If it's not possible to react to "change" events, then one must re-implement rv-value as rv-whatever to get this functionality (registering to key-events, paste/cut etc). Am I right?

Thanks!

[Duder-onomy]

Hi Superware,
You are correct about the rv-value binder. That binder only listens for input events.
You can check here in the definition of the rv-value binder, https://github.com/mikeric/rivets/blob/master/src/binders.coffee#L75 It is listening for the input event. That is in fact, the only reason it will not work with typeahead out of the box.

But hey! It looks like that binder worked for you!

This is why rivets is so damn cool (IMO). You can do it however you think makes the most sense.

Another way to do it would be to write a binder using the on-* built in bindings. Specifically, the rv-on-change

Typeahead fires a change event when the user selects something. You can listen for that and just set the model directly. Here is a working fiddle demonstrating that: https://jsfiddle.net/Vornagreg/yej2scu8/1/

This would look something like:

<input rv-on-change='callMethodOnModelThatSetsValue'/>

var _model = {
    state: "",
  applyValueToModel : function(event, context) {
    this.state = event.target.value;
  }
};

// THis will ensure that methods are called with the _model as scope. 
rivets.configure({
    handler : function(context, ev, binding) {
    // https://github.com/mikeric/rivets/pull/275#issuecomment-36464555
    this.call(binding.observer.target, ev, binding.view.models);
  }
});

rivets.bind($("#container"), _model);

[superware]

You are correct about the rv-value binder. That binder only listens for input events.

But change is an input event, sounds like this is the first event rv-value should listen to... any thoughts?

Thanks again.

[Duder-onomy]

You are correct again.
I believe the original reason for using the 'input' event vs the 'change' event was that 'change' will only fire on blur and 'input' fires as the user types. People were having issues because the bound model would not update until the user blurred the input. pre-supposing that the user would ever actually blur the input. So, it was changed to input so that the model would update as the user typed.

It is also useful to keep it as a 'input' event because you might want to do some kind of input masking and you would like that masking to happen as the user is typing.

In any event, if it makes more sense to you for the rv-value to listen for 'change' you could easily write a binder that uses the build in rv-value binder but listens for change instead.

[superware]

I guess rv-value can listen to both input and change, best of both worlds?

Plus, I've seen/used the pattern $(".input").val(s).trigger("change") on countless occasions (see proof), it might be very useful to support this out of the box.