使用 knockout.js 动态添加“td”和绑定答案

【问题标题】：dynamically add 'td' and bindings using knockout.js使用 knockout.js 动态添加“td”和绑定
【发布时间】：2013-03-04 19:53:30
【问题描述】：

有没有一种方法可以动态添加 'td with data-bind:"text: propertyName"' 而无需显式写入如下属性名称？：

<table>
<tbody data-bind="template: {name: 'Tmpl', foreach:person}">                      
</tbody>

<script id="Tmpl" type="text/html">
 <tr class="tableRow">
  <td data-bind="text: Name"></td>
  <td data-bind="text: Age"></td>
 </tr>
</script>
</table>

我的“person”数据源可以有不同的属性名称和不同数量的 td，所以它非常动态。我尝试的是：

<table>
<tbody data-bind="template: {name: 'Tmpl', foreach: person}">                      
</tbody>
<script id="assessmentTmpl" type="text/html">
 <tr class="tableRow">
  <td data-bind="text: $data"></td>
 </tr>
</script>
</table>

但这只会赋予对象本身而不是属性。我试图通过使用 knockout.js 来做到这一点，但我可能需要用 jquery 动态添加 td。

【问题讨论】：

标签： jquery asp.net-mvc knockout.js

【解决方案1】：

如有疑问，请尝试自定义绑定！

<table>
    <tbody data-bind="template: {name: 'Tmpl', foreach:person, as : per}">                      
    </tbody>

    <script id="Tmpl" type="text/html">
        <tr class="tableRow" data-bind="createRow: per">
        </tr>
    </script>
</table>

ko.bindingHandlers.createRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        for(var item in valueAccessor())
        {
            $(element).append('<td data-bind="text:' + valueAccessor()[item] + '"></td>');
        });
    }
};

我认为这会起作用，如果数据绑定不正确，您可以自己输出该更新方法中的值：

$(element).append('<td>' + valueAccessor()[item] + '</td>');

【讨论】：

试试这个，给每个人一个别名（你可能应该重命名 person 以表明它包含多个对象，然后你可以将别名重命名为 person）。

【解决方案2】：

使用与先前答案建议的方法相同的方法，我提供了以下代码。请注意，它可以重构为更“优雅”的东西。

查看代码：

<table class='table table-striped table-bordered'>
    <thead>
        <tr class="tableRow" data-bind="createTheadRow: userEntityObj.UserList()[0]"></tr>
    </thead>
    <tbody data-bind="foreach:userEntityObj.UserList">
        <tr class="tableRow" data-bind="createTbodyRow: $data"></tr>
    </tbody>
</table>

自定义绑定：

ko.bindingHandlers.createTheadRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        if($(element).html() == '')
        if (valueAccessor() != null)
        for (var key in valueAccessor())
            $(element).prepend('<th>' + key + '</th>');
    }
};
ko.bindingHandlers.createTbodyRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        if (valueAccessor() != null)
        for (var key in valueAccessor())
            $(element).prepend('<td data-bind="text:' + key + '"></td>');
    }
};

有了这个，你可以在不知道源属性的情况下生成一个表。您还可以添加自定义 TD 字段（例如，用于编辑/删除按钮），只需在 tr 块中添加此字段（绑定 make 前置，因此您的自定义 TD 将出现在 TR 的末尾）

【讨论】：