Backbone.modelBinder - 无法绑定'按键'

我使用Backbone.ModelBinder到我的应用程序。我想在我的姓名字段上添加事件监听器keyup。我试过这种方式..Backbone.modelBinder - 无法绑定'按键'

$().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); 
});

但不工作。请有人纠正我？

Here is the live Demo

来源

2014-06-10 3gwebtrain

你想使用自定义的触发器。这是不是在你正在使用的版本avliable但在1.0.5 avaliable，

的唯一的事情，那么你就需要补充的是绑定在你的文本字段中输入一个电话

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

来源

2014-06-16 08:17:15 Quince

Backbone.modelBinder - 无法绑定'按键'

回答

相关问题