更新 LayoutView 的模型

Question

单击 'Clicks' link 以查看显示更新模型数据的控制台，但原始显示 HTML 没有变化。

在 LayoutView 上更新模型似乎不会导致视图更新显示的数据。我认为这是视图和模型之间默认交互的一部分。

Answer 1

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>

更新 LayoutView 的模型

Updating a LayoutView's Model

javascript

backbone.js

marionette