Question

我在我的应用程序中使用Backbone.ModelBinder。我想在我的名字字段keyup上添加事件监听器。我试过这种方式..

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

Answer 1

您想要使用自定义触发器。它在您使用的版本中无法实现，但在1.0.5中可用，

您需要添加的唯一内容是调用文本字段上的绑定输入

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

Backbone.modelBinder - 无法绑定'keypress'

1 个答案: