Backbone: смотреть визуализируем метод вызывается, но DOM не обновляя

Question

Посмотрите на эту jsfiddle пожалуйста: https://jsfiddle.net/76bypu9d/

Как вы можете видеть, у меня есть список игроков, с силой, ловкостью и интеллектом. Когда я нажимаю кнопку обновления, я вычисляю точки на основе входных данных.

Однако PlayerView не быть повторно вынесен, хотя я сделал вид слушать изменения на модели:

var PlayerView = Backbone.View.extend({ 
    tagName: "<tr>", 

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

    render: function() { 
     var html = "<td>" + this.model.get("name") + "</td>"; 
     html += "<td>" + this.model.get("job") + "</td>"; 
     html += "<td>" + this.model.get("str") + "</td>"; 
     html += "<td>" + this.model.get("dex") + "</td>"; 
     html += "<td>" + this.model.get("int") + "</td>"; 
     html += "<td>" + this.model.get("points") + "</td>"; 
     $(this.el).html(html); 
     return this; 
    } 
}); 

Я вижу, вижу в консоли, что модели были обновлены с новым значением и вызывается метод представления, но значения в DOM не изменяются. Любые идеи почему?

Answer 1

Это потому, что вы не вставляете PlayerViewel в DOM. Вы представляете каждый из них в виде строки и объединяете это для рендеринга PlayerTableView. Таким образом, нет связи между элементами в документе и свойствами elPlayerView. Вы должны переделать PlayerTableView.render(), чтобы вставить PlayerView.el.

Вот быстрый дифф из вашего кода для иллюстрации: https://jsfiddle.net/76bypu9d/6/

До:

html += "</thead><tbody>"; 

_(this.collection.models).each(function(player) { 
    var playerView = new PlayerView({ 
     model: player 
    }) 
    html += playerView.render().el.outerHTML; 
}, this); 

html += "</tbody></table>"; 

$(this.el).html(html); 

После:

html += "</thead><tbody>"; 
html += "</tbody></table>"; 

$(this.el).html(html); 
_(this.collection.models).each(function(player) { 
    var playerView = new PlayerView({ 
     model: player 
    }) 
    this.$el.find("tbody").append(playerView.render().el); 
}, this); 

И, кстати, эта строка concatentation является отвратительным. Вы должны заглянуть в шаблонный движок, например, усы.

Разное

Вот некоторые разные заметки о других аспектах вашего кода Backbone:

• Re: tagName: "<tr>", tagName не нуждается в угловых скобках (<>). Я думаю, это работает, но это не обязательно. Это может быть tagName: "tr"

• Это: _.bindAll(this, "render") вероятно, не является необходимым, и, безусловно, не является необходимым для строки, следующей: this.listenTo(this.model, "change", this.render). От системообразующих Документов

  callback всегда будет вызываться с object в качестве контекста.

  Где objectthis в этом случае.

  То же самое с вашими PlayerTableView и _.bindAll(this, "render", "updatePoints"). Обработчики событий, указанные как:

  events: { 
      "click button": "updatePoints" 
  }, 
  

  будет вызываться с объектом вида как контекст.

• Re: $(this.el).html(html) - $(this.el) не нужно.Вы можете сделать this.$el.

• Это:

  playersData.forEach(function(playerData) { 
      var player = new Player(); 
      player.set({ 
       name: playerData.name, 
       job: playerData.job, 
       str: playerData.str, 
       dex: playerData.dex, 
       int: playerData.int 
      }); 
      that.collection.add(player); 
  

  Может быть консолидированы на это (потому что вы установили PlayerCollection.model):

  that.collection.add(playersData); 
  

• Это: _(this.collection.models).each() может быть просто this.collection.each().

• И это повторяется, конкатенация строк должна идти.