jquery - 使用下划线将项目添加到带有 jquery 的 html 表中

Question

这个问题已经有答案了:

Render html table with underscore template engine using a backbone complex model (1 个回答)

已关闭 10 年前。

我发现我可以将表格添加到我的表格中

$('#mytable').append("<tr><td>").text("yo").append("</td></tr>");

但是如果我像这样多次这样做:

$('#mytable').append("<tr><td>").text("yo1").append("</td></tr>");
$('#mytable').append("<tr><td>").text("yo2").append("</td></tr>");

它最终只使用最后一个“yo2”。有没有办法使用下划线迭代我的主干模型，以动态地将行插入到 html 表中。提前致谢。

Answer 1

您的多个 append 和 text 调用失败，因为它们无法像那样链接。由于您想要使用 Backbone 和下划线，因此您可以使用 _.each ( docs ) 迭代您的属性并将它们附加到您的表中。像这样:

var TableModel = Backbone.Model.extend({
    defaults: {
        "foo": "foo",
        "bar": "bar",
        "blah": "blah"
    }
});

var TableView = Backbone.View.extend({
    el: '#mytable',
    initialize: function() {
    },
    render: function() {
        _.each(this.model.attributes, function(val, key) {
            var row = "<tr><td>" + val + "</td></tr>";
            $('#mytable').append(row);
        });
        return this;
    }
});

var newModel = new TableModel();
var modelView = new TableView({model: newModel});
modelView.render();

jsfiddle here ，按预期工作。我只是创建一个虚拟模型和 View 。在 View 的 render() 函数中，我迭代模型并将每个模型在一行中附加到表中。