所以我正在与这个骨干脚本作斗争。 基本上它应该做的是:当模型中的某些东西改变时,它需要再次渲染视图。
一切顺利,触发更改事件并且视图响应。 但是当我回到渲染中时,它丢失了模型并且在需要渲染日期的视图中丢失了元素($ el)
我创建了一个代码片段,你可以在这里找到它:
var APP = {};
APP.items = [{
"id": "id_2",
"alias": "item 2"
}];
APP.newItem2 = {
"id": "id_2",
"alias": "item 2",
"ttile": "here is your title",
"description": "need I say more?"
}
APP.ItemModel = Backbone.Model.extend({
initialize: function (attr) {
console.log(attr);
},
updateStore: function (prod) {
this.set(prod);
}
});
APP.ProductsCollection = Backbone.Collection.extend({
model: APP.ItemModel,
initialize: function (mdls) {
console.log(mdls);
}
});
APP.ItemView = Backbone.View.extend({
initialize: function () {
this.model.on("change", this.render);
this.render();
},
render: function () {
console.log('this: ', this); //this is always known
console.log('render model: ', this.model); //the second time the model is undefined
console.log('el: ', this.$el); //the second time the $el is undefined
var htmlSource = $("#itemContent").html(),
template = Handlebars.compile(htmlSource),
compiled = template(this.model);
this.$el.html(compiled);
},
events: {
"click .clickBtn": "loadData"
},
loadData: function (e) {
this.model.updateStore(APP.newItem2);
}
});
APP.MainView = Backbone.View.extend({
el: "#listContainer",
initialize: function () {
APP.productsCollection = new APP.ProductsCollection(APP.items);
this.render();
},
render: function () {
var that = this,
htmlSource = $("#basicContent").html(),
template = Handlebars.compile(htmlSource),
compiled = template(APP.productsCollection);
this.$el.html(compiled);
APP.productsCollection.models.forEach(function (model) {
new APP.ItemView({
el: "#" + model.attributes.id,
model: model
});
});
}
});
APP.mainView = new APP.MainView();

.maplayer_wrap {
width: 500px;
height: 100px;
background-color: white;
padding: 10px;
margin-top: 10px;
border: 1px solid #CCC;
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
<div id="listContainer">
</div>
<script id="basicContent" type="text/x-handlebars-template">
{{#each models}}
<div class="maplayer_wrap" id="{{id}}">Loading... </div>
{{/each}}
</script>
<script id="itemContent" type="text/x-handlebars-template">
<span class="maplayer_image">
new data...
</span>
<div class="maplayer_content">
<p class="maplayer_content_head">{{attributes.title}}</p>
<p class="maplayer_content_txt">{{attributes.description}}</p>
</div>
<span class="maplayer_icon">
<i class="fa fa-map-o fa-fw" aria-hidden="false"></i>
</span>
<button class="clickBtn">
click!
</button>
</script>
&#13;
如果你喜欢jsfiddle,你可以在这里找到一个副本: https://jsfiddle.net/rwqwfz8b/50/
如何解决这个问题?
编辑: 与此同时,我正在寻找解决方案。 我发现的是我第一次渲染视图一切都很好。 但是,当模型更改并且视图再次呈现时,视图似乎认为它是模型而不是视图。
因此它丢失了所有数据,无法再次渲染。
答案 0 :(得分:0)
发现它!
在我设置听众的视图中,我现在也添加了这个&#39;现在它可以工作
this.model.on("change", this.render);
this.model.on("change", this.render, this);