点击“点击次数”链接,查看显示更新型号数据的控制台,但原始显示的HTML不会更改。
在LayoutView上更新模型似乎不会导致视图更新显示的数据。我认为这是视图和模型之间默认交互的一部分。
答案 0 :(得分:3)
Backbone和Marionette不会自动将模型数据绑定到视图。您必须在视图中监听该模型并进行更新。
例如,当模型中的任何数据发生变化时,您可以完全重新渲染视图:
initialize: function(){
this.listenTo( this.model, "change", this.render );
}
或者为预期要更改的特定数据创建一个侦听器,并且只更新视图的一部分。如果视图更复杂,这是首选:
onRender: function(){
this.listenTo( this.model, "change:value", this.renderValue );
},
renderValue: function(){
/* This expects that you wrap the value with
<span class="value"></span>
in the template */
this.$('.value').text( this.model.get('value') );
}
这是一个完整的工作示例:
var TestLayoutView = Mn.LayoutView.extend({
template: '#lvTemplate',
el: '#app',
events: { 'click .watchhere': 'updateValue'},
onRender: function(){
this.listenTo( this.model, "change:value", this.renderValue );
},
renderValue: function(){
this.$('.value').text( this.model.get('value') );
},
updateValue: function (clickedView) {
this.model.set('value', this.model.get('value') + 1);
}
});
var testLV = new TestLayoutView({
model: new Backbone.Model({ value: 15 })
});
testLV.render();
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.2/backbone.marionette.js'></script>
<script type="text/template" id="lvTemplate">
<a class='watchhere' href="#">Clicks <span class="value"><%= value %></span></a>
</script>
<div id="app"></div>