更新我的模型与骨干更改我的看法

Question

我是新来的主干，我正在练习它再见，通过使用包含数据的json文件做一些博客。一切正常（可能大多数情况下不好的做法可能），但有一件事我想补充。我想在模型更改时更新我的​​视图。 我想我必须做一个监听器或类似的东西，但我不知道，并尝试了很多不同的东西，我发现在stackoverflow。

这里是我的代码：

项目（骨干型）

ItemCollection（该骨干网收集）

var ItemCollection = Backbone.Collection.extend({ 
    model: Item, 
    comparator: function(model) { 
     if (sortid == "waardering") { 
      return -model.get(sortid); //sorteert desc 
     } else { 
      return model.get(sortid); //sorteert asc 
     } 
    } 
}); 

ItemShelfView（该骨干网查看）

var ItemShelfView = Backbone.View.extend({ 
    className: 'itemshelf', 
    tagName: 'div', 


    render: function() { 
     var self = this; 

     // iterate through each item in the collection 
     // and add it to the dom 
     this.collection.each(function(item) { 

      // create item dom node 
      var itemEl = $('<div />', { 
       class: "item well well-lg col-md-5" 
      }); 
      var itemTitel = $('<h3 />').text(item.get('titel')).attr('class', "col-md-12"); 

      var itemLink = $('<a />').attr('href', '#detail/' + item.get('url_titel')).attr('class', "btn btn-default navigate col-md-12").text('Bekijk het volledige artikel'); 

      var itemAfbeelding = $('<img />').attr('src', item.get('img_path')).attr('class', " thumbnail col-md-4 "); 

      var artikeltekst = item.get('artikel'); 
      var shortText = jQuery.trim(artikeltekst).substring(0, 200).split(" ").slice(0, -1).join(" ") + "..."; 

      var itemArtikel = $('<p />').text(shortText).attr('class', "col-md-8"); 
      var itemCategorie = $('<span />').text(item.get('categorie')).attr('class', "col-md-8"); 
      var itemWaardering = $('<b class="waardering" />').text(item.get('waardering')).attr('class', "col-md-8"); 
      var itemCommentaar = $('<span />').text(item.get('commentaar')).attr('class', "col-md-8"); 




      // bad practise 
      itemEl.append(itemTitel); 
      itemEl.append(itemAfbeelding); 
      itemEl.append(itemArtikel); 
      itemEl.append(itemLink); 
      itemEl.append(itemCommentaar); 
      itemEl.append(itemCategorie); 
      itemEl.append(itemWaardering); 


      // append the fragment to this views root el 
      self.$el.append(itemEl); 
     }); 
     return this; 
    } 
}); 

我的Ajax获得JSON数据

$.ajax({ 
    url: 'api/items.json', 
    dataType: 'json', 
    success: function(data) { 
     console.log(data); 

     var items = new ItemCollection(data); 
     var shelf = new ItemShelfView({ 
      collection: items 
     }); 

     $('#app').append(shelf.render().$el); 

     // ensure we can edit the items 
     window.items = items; 
     window.shelf = shelf; 
    } 
}); 

谢谢！ （我已经看过很多关于计算器的话题。） Grtz！

Answer 1

看起来好像你只想重新渲染一个模型的视图，如果该模型改变了，而不是整个集合。您可以为每个模型创建一个视图。 （您当前的视图适用于您的收藏。）

将collection.each中的代码取出并且不是在那里进行所有渲染，而是为每个集合创建一个新的视图，该视图只负责渲染与一个模型关联的元素。

现在，由于您可以查看每个模型，因此您可以通过执行this.model.on('change', this.render, this)来在自己的视图中聆听模型中的更改。下面的伪代码：

ItemShelfView() 
    render: 
     this.collection.each(function(m) {(
     var mview = new modelView({model: m}) //make a new modelView and pass it a model 
    );} 

modelView() 
    initialize: 
     this.model.on('change', this.render, this); //re-renders the model if it's changed 
    render: 
     // put the rendering code here 
     //(the stuff that was previously in the each loop in the collection view) 

我推荐这个教程：http://arturadib.com/hello-backbonejs/。 它以非常缓慢的速度前进，并朝着我认为你正在尝试做的事情努力（呈现模型集合;如果它改变，则重新呈现模型）