有没有办法动态添加数据绑定"文本: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>
我的数据源&#39; person&#39;可以有不同的属性名称和不同数量的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&#39; s。
答案 0 :(得分:3)
如有疑问,请尝试自定义绑定!
<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>');
答案 1 :(得分:0)
使用与先前答案建议的方法相同的方法,我提供了以下代码。 请注意,它可以重构为更“优雅”的东西。
观看代码:
<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 prepend,这样您的自定义TD将出现在TR的末尾)