javascript - Backbone: view's render method being called but DOM not updating -

look @ jsfiddle please: https://jsfiddle.net/76bypu9d/

as can see, have list of players strength, dexterity , intelligence. when click update button, calculate points based on inputs.

however playerview not being re-rendered although have made view listen changes on model:

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

i can see see in console models being updated new value , render method of view being called values in dom not change. ideas why?

it's because you're not inserting playerview el's in dom. you're rendering each 1 string , concatenating render playertableview. there's no connection between elements in document , el properties of playerview's. should rework playertableview.render() insert playerview.el's.

here's quick diff code illustrate: https://jsfiddle.net/76bypu9d/6/

before:

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

after:

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

and way, string concatentation hideous. should templating engine mustache.

miscellaneous

here's miscellaneous notes other aspects of backbone code:

• re: tagname: "<tr>", tagname doesn't need angle brackets (< >). guess works, it's not neccesary. can tagname: "tr"

• this: _.bindall(this, "render") isn't necessary, , isn't necessary sake of line follows: this.listento(this.model, "change", this.render). backbone docs:

  the callback called object context.

  where object this in case.

  same thing playertableview , _.bindall(this, "render", "updatepoints"). event handlers specified like:

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

  will called view object context.

• re: $(this.el).html(html) -- $(this.el) unnecessary. can this.$el.

• this:

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

  could consolidated (because set playercollection.model):

  that.collection.add(playersdata); 

• this: _(this.collection.models).each() can this.collection.each().

• and bears repeating, string concatenation has got go.