Question

我正在尝试创建一个包含列数组的表来启用要显示的列，但是我希望能够使用链接，但是像我在下面那样使用它不会使用obeservable setProperty进行更新。

我目前最终做的是首先根据列集合生成模板，然后使用该模板生成表格。

所以我想知道有没有办法在单个模板中执行此操作？

<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功能，它将提供另一种方法。一旦可用，我可能会更新这个答案。

jsviews表动态列

1 个答案: