模型更新后视图丢失其模型

Question

所以我正在与这个主干脚本作斗争。 基本上它应该做的是：当模型中的某些内容发生变化时，它需要再次渲染视图。

一切顺利，更改事件被触发并且视图响应。 但是当我回到渲染中时，它丢失了模型并且丢失了视图中需要渲染日期的元素（$el）

我创建了一个 sn-p 你可以在这里找到它：

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>

如果你喜欢 jsfiddle，你可以在这里找到一份副本： https://jsfiddle.net/rwqwfz8b/50/

我该如何解决这个问题？

编辑： 与此同时，我自己也在寻找解决方案。 我发现第一次渲染视图时一切正常。 但是，当模型更改并且视图再次呈现时，视图似乎认为它是模型而不是视图。

因此它会丢失所有数据并且无法再次渲染。

Answer 1

找到了！

在我设置监听器的视图中，我现在还添加了“this”，现在它可以工作了

问题：

---

this.model.on("change", this.render);

---

解决方案：

---

this.model.on("change", this.render, this);

---