javascript - 如何监控输入的变化

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 就像您在问题中的内容一样。如果要使用多个事件，则需要将每个事件添加到哈希中。像：

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);
    }
});

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