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

Question

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

$('#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，按预期工作。我只是在创建一个虚拟模型和视图。在视图的render()函数中，我遍历模型并将每个模型附加到一行中的表中。

Answer 2

我对骨干网不熟悉，但如果您可以将值存储在数组中，则可以执行以下操作：

$(document).ready(function(){
    var values = ['yo', 'yo2'],
    text = [];

    for(i=0;i<values.length;i++){
        text.push("<tr><td>"+values[i]+"</td></tr>");
    }
    $('#myTable').append(text.join(""));
});

Answer 3

如果您使用主干，您可以使用 underscore/lodash 模板引擎并将数据转换为 html 代码，如下所示：

var data = ['yo1', 'yo2'];
var templ = "<tr><td><%=value%></td></tr>";
var rows = _.map(data, function(item) { return _.template(templ, {value: item}); });
var html = rows.join('');
$('#mytable').empty().append(html);