更新LayoutView的型号 [英] Updating a LayoutView's Model

问题描述

JSBin链接

点击点击次数链接查看控制台显示最新的模型数据，但原来显示的HTML不会改变。

更新的LayoutView模型似乎并没有引起更新显示的数据视图。我认为这是视图和模型之间的默认交互的一部分。

解决方案

骨干网和木偶不会自动绑定模型数据的看法。你将不得不听的模式，在视图中的变化和更新。

例如，你可以简单地重新渲染视图完全当模型变化中的任何数据：

 初始化：功能（）{
    this.listenTo（this.model，变，this.render）;
}
 

或者创建一个侦听特定的一块有望改变的数据，并且只更新视图的一部分。这是pferred $ P $如果视图是比较复杂的：

 的OnRender：功能（）{
    this.listenTo（this.model，变化：值，this.renderValue）;
}，
renderValue：功能（）{
    / *这个期望你包的价值
       ＆LT;跨度类=值＆GT;＆LT; / SPAN＆GT;
       在模板* /
    这个$（​​'值'）文本（this.model.get（'值'））;
}
 

下面是一个完整的工作示例：

\r

\r

VAR TestLayoutView = Mn.LayoutView.extend（{\r
    模板：#lvTemplate'，\r
    EL：#APP'，\r
    事件：{'点击.watchhere'：'updateValue}，\r
    OnRender方法：功能（）{\r
        this.listenTo（this.model，变化：值，this.renderValue）;\r
    }，\r
    renderValue：功能（）{\r
        这个$（​​'值'）文本（this.model.get（'值'））;\r
    }，\r
    updateValue：功能（clickedView）{\r
        this.model.set（价值，this.model.get（'值'）+ 1）;\r
    }\r
}）;\r
\r
VAR testlv的=新TestLayoutView（{\r
  型号：新Backbone.Model（{值：15}）\r
}）;\r
\r
testLV.render（）;

\r

＆LT;脚本的src =HTTP：//$c$c.jquery。 COM / jquery.js和'＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本的src =HTTP：//underscorejs.org/underscore.js'>＆LT; / SCRIPT＆GT;\r
＆LT;脚本的src =HTTP：//backbonejs.org/backbone.js'>＆LT; / SCRIPT＆GT;\r
＆LT;脚本src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.2/backbone.marionette.js'></script>\r
  \r
＆LT;脚本类型=文/模板ID =lvTemplate＆GT;\r
  ＆LT;一类='watchhereHREF =＃＆GT;点击＆LT;跨度类=值＆GT;＆LT;％=值％＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;\r
＆LT; / SCRIPT＆GT;\r
  \r
＆LT; D​​IV ID =应用程序＆GT;＆LT; / DIV＆GT;

\r

\r

\r

JSBin link

Click the 'Clicks' link to see the console showing updated model data, but the original displayed HTML doesn't change.

Updating the model on the LayoutView doesn't seem to cause the view to update the displayed data. I thought that was part of the default interaction between Views and Models.

解决方案

Backbone and Marionette do not bind model data to views automatically. You will have to listen that model to change within the view and update it.

For example, you can simply re-render the view completely when any data within the model changes:

initialize: function(){
    this.listenTo( this.model, "change", this.render );
}

Or create a listener for a specific piece of data expected to change, and only update part of the view. This is preferred if the view is more complicated:

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

Here's a complete working example:

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的型号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！