0

我正在尝试制作一个带有列数组的表以启用要显示的列，但我希望能够使用链接，但是像我在下面所做的那样使用它不会使用可观察的 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>
4

1 回答 1

0

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

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

于 2014-08-01T01:33:43.903 回答