杂

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

这是因为您没有在DOM中插入PlayerView el。您将每个呈现为字符串并将其连接以呈现PlayerTableView。因此，文档中的元素与el的{{1}}属性之间没有任何关联。您应该返工PlayerView以插入PlayerTableView.render()。

这是您的代码中的快速差异，用于说明： https://jsfiddle.net/76bypu9d/6/

在：

PlayerView.el

后：

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

顺便说一句，字符串连接是可怕的。你应该看看像胡子一样的模板引擎。

杂

以下是关于Backbone代码其他方面的一些其他说明：

重新：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);，tagName: "<tr>"不需要尖括号（tagName <）。我猜它有效，但它不是必要的。它可以是>
这个：tagName: "tr"可能不是必需的，并且为了后面的行而绝对没有必要：_.bindAll(this, "render")。来自骨干文档：

始终以this.listenTo(this.model, "change", this.render)作为上下文调用callback。

在这种情况下，object为object。

与您的this和PlayerTableView相同。事件处理程序指定如下：
```
_.bindAll(this, "render", "updatePoints")
```
将使用视图对象作为上下文调用
。
回复：events: { "click button": "updatePoints" }, - $(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()。
值得重复的是，字符串连接已经完成。

Backbone：调用view的渲染方法，但DOM不更新

1 个答案:

杂