Question

如何监控骨干输入的变化？

在AngularJs中

 <div ng-controller="W3">

     <input type="text" ng-model="val" >

     <p>{{val}}</p>
 </div>

我希望该字段值已显示在<p></p>。

中

Answer 1

您必须将其添加为视图中的事件：

var MyView = Backbone.View.extend({
    events: {
        'keyup input': 'updateParagraph'
    },
    updateParagraph: function(ev) {
        this.$('p').html(ev.target.value);
    }
});

这假设您的视图HTML与您的问题中的HTML一样。如果要使用多个事件，则需要将每个事件添加到哈希。像：

events: {
    'keyup input': 'updateParagraph',
    'propertychange input': 'updateParagraph',
    // etc.
}

如果您的视图与模型绑定并且输入应该更新模型，我会这样写：

var MyView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.model, 'change:text', this.updateParagraph);
    },
    events: {
        'keyup input': 'updateModel'
    },
    updateModel: function(ev) {
        var target = ev.target;
        // Assuming that the input name is the model attribute
        // To simplify, I'm just going to set something specific
        this.model.set('text', target.value);
    },
    updateParagraph: function(model, value) {
        // Set the input value as well, so it stays in sync
        this.$('input').val(value);
        this.$('p').html(value);
    }
});

这使得如果您在任何其他视图中更改模型上的该属性，该段落仍将更新，无论是否是该输入。

如何监控输入的变化

1 个答案: