Backbone.modelBinder - impossible de lier sur 'keypress'

Question

J'utilise Backbone.ModelBinder à mon application. Je voudrais ajouter l'écouteur d'événement sur keyup sur mon champ de nom. J'ai essayé de cette façon ..

$().ready(function() { 

    dogs = new Backbone.Collection({model:Backbone.Model}); 

    var nameConverter = function(direction, value){ 
     console.log(direction, value); //on keyup nothing consoles. 
     return value; 
    } 



    var phoneConverter = function (direction, value) { 

     if (direction === Backbone.ModelBinder.Constants.ModelToView) { 
      var formattedPhone = ''; 
      if (value) { 
       formattedPhone = value.replace(/[^0-9]/g, ''); 

       if (formattedPhone.length == 7) { 
        formattedPhone = formattedPhone.substring(0, 3) + '-' + formattedPhone.substring(3, 7); 
       } 
       else if (formattedPhone.length == 10) { 
        formattedPhone = '(' + formattedPhone.substring(0, 3) + ') ' + formattedPhone.substring(3, 6) + '-' + formattedPhone.substring(6, 10); 
       } 
       else if (formattedPhone.length == 11 && formattedPhone[0] === '1') { 
        formattedPhone = '1 (' + formattedPhone.substring(1, 4) + ') ' + formattedPhone.substring(4, 7) + '-' + formattedPhone.substring(7, 11); 
       } 
      } 

      return formattedPhone; 
     } 
     else { 
      return value.replace(/[^0-9]/g, ''); 
     } 
    }; 


    model = new Backbone.Model({firstName:'Bob', graduated:'maybe', phone: '1234567'}); 

    model.bind('change', function() { 
     $('#modelData').html(JSON.stringify(model.toJSON())); 
    }); 

    model.trigger('keyup'); // just to show the #modelData values initially, not needed for the ModelBinder 


    ViewClass = Backbone.View.extend({ 

     _modelBinder:undefined, 

     initialize:function() { 
      this._modelBinder = new Backbone.ModelBinder(); 

     }, 

     render:function() { 
      var html = '\ 
Edit your information:<br><br>\ 
First Name: <input type="text" name="firstName"/><br>\ 
Last Name: <input type="text" name="lastName"/><br>\ 
Phone: <input type="text" name="phone"/><br>\ 
Height: <input type="text" name="height"/><br><br>\ 
\ 
Graduated: Yes: <input type="radio" id="graduated_yes" name="graduated" value="yes">\ 
No: <input type="radio" id="graduated_no" name="graduated" value="no">\ 
Maybe: <input type="radio" id="graduated_maybe" name="graduated" value="maybe"><br>\ 
\ 
Eye Color: Green: <input type="radio" name="eyeColor" value="green">\ 
Blue: <input type="radio" name="eyeColor" value="blue">\ 
Brown: <input type="radio" name="eyeColor" value="brown"><br><br>\ 
\ 
Drivers licence: <input type="checkbox" name="driversLicense"/><br>\ 
Motorcycle license: <input type="checkbox" name="motorcycle_license" /><br><br>\ 
Dog: \ 
<select name="dog">\ 
<option value="">Please Select</option>\ 
<option value="1">Andy</option>\ 
<option value="2">Biff</option>\ 
<option value="3">Candy</option>\ 
</select> <br><br>\ 
Big Text:<br> <textarea name="bigText" rows="4" cols="80"></textarea>\ 
'; 

      this.$el.html(html); 

      var bindings = { 
       firstName: {selector:'[name=firstName]',converter:nameConverter}, 
       lastName: '[name=lastName]', 
       driversLicense:'[name=driversLicense]', 
       motorcycle_license:'[name=motorcycle_license]', 
       graduated:'[name=graduated]', 
       eyeColor:'[name=eyeColor]', 
       phone:{selector:'[name=phone]', converter:phoneConverter}, 
       dog:{selector:'[name=dog]', converter:(new Backbone.ModelBinder.CollectionConverter(dogs)).convert}, 
       bigText:'[name=bigText]' 
      }; 

      //this._modelBinder.bind(this.model, this.el, bindings); 
      this._modelBinder.bind(this.model, this.el, bindings, {changeTriggers: {'': 'change', '[name=firstName]': 'keyup'}}); 
      return this; 
     } 
    }); 

    view = new ViewClass({model:model}); 
    $('#viewContent').append(view.render().el); 
}); 

mais ne fonctionne pas. quelqu'un me corrige s'il vous plaît?

Here is the live Demo

Answer 1

Vous voulez utiliser des déclencheurs personnalisés. Il n'est pas avliable dans la version que vous utilisez, mais est avaliable en 1.0.5,

la seule chose que vous devez alors ajouter est un appel à lier entrée sur votre champ de texte

this._modelBinder.bindCustomTriggers(this.model, this.el,"input input.[name=firstName]" , bindings, {changeTriggers: {'':'change', 'input.[name=firstName]':'input'}}); 

here it is in a demo working with ModelBinder 1.0.5