如何監控輸入變化

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

因此，如果您更改屬性在任何其他視圖中的模型上，該段落仍然會更新，無論它是否是該輸入。