jsviews表动态列

Question

我正在尝试创建一个具有列数组的表，以允许显示哪些列，但是我希望能够使用link，但是像下面那样使用它并不能使用obeservable进行更新。

我目前所做的是首先基于columns集合生成一个模板，然后使用该模板生成表。

所以我想知道有没有一种方法可以在单个模板中做到这一点？

<table id="test"><tbody></tbody></table>
<script>
    var columns = [{field:"Id"}, {field:"Name"}];
    var data = {rows:[{Id:1, Name:"a", Bla:"bla"},{Id:2, Name:"b", Bla:"bla"}]};
    var tmpl = "{^{for rows}}<tr>{^{for ~columns}}<td>{^{:#parent.parent.data[field]}}</td>{{/for}}</tr>{{/for}}";

    $.templates(tmpl).link("#test tbody", data, { columns: columns });

    var d = $.view($("#test tbody tr")[0]).data;
    $.observable(d).setProperty("Name", "c");
</script>

Answer 1

以下是您可以使用的一种方法：

<table id="test"><tbody></tbody></table>

<script type="text/x-jsrender" id="tmpl">
    {^{for rows}}
        <tr>
            {^{props}}
                {{if ~inColumns(key)}}
                    <td>{^{:prop}}</td>
                    <td><input data-link="prop"/></td>
                {{/if}}
            {{/props}}
        </tr>
    {{/for}}
</script>

<script>
    var columns = ["Id", "Name"];

    var data = {
        rows:[{Id:1, Name:"a", Bla:"bla"},{Id:2, Name:"b", Bla:"bla"}]
    };

    $.templates("#tmpl").link("#test tbody", data, {
        inColumns: function(key) {
            return $.inArray(key, columns) !== -1;
        } 
    });

    var d = $.view($("#test tbody tr")[0]).data;

    $.observable(d).setProperty("Name", "c");
</script>

在下一次更新中，将有一个新的DataMaps功能，它将提供另一种方法。一旦答案可用，我可能会更新这个答案。