模板脚本中的 KnockoutJS Containerless foreach

Question

我有一个配置数组，其中包含我想在页面上显示的字段名称。我可以使用无容器 foreach 来呈现我的 header 行。然后在模板脚本中生成table body。它应该打印与联系人一样多的行，并动态呈现一些值。让代码说话：

<div class="w3-padding" data-bind="visible: contacts().length>0">
    <div class="w3-container w3-blue">
        <p>Title</p>
    </div>
    <div class="w3-responsive">
        <table class="w3-table-all">
            <tr class="w3-light-gray">
                <th style="width:125px">Full name</th>
                <th style="width:125px">Customer</th>

                <!-- ko foreach: fields -->
                <th style="width:125px" data-bind="text: name"></th>
                <!-- /ko -->

                <th class="w3-center" style="width:125px">Action 1</th>
                <th class="w3-center" style="width:125px">Action 2</th>
            </tr>
            <tbody data-bind="template: { name: 'contactTemplate', foreach: contacts }"></tbody>
        </table>
    </div>
</div>

<script type="text/html" id="contactTemplate">
    <tr>
        <td><div data-bind="text: fullname"></div></td>
        <td><div data-bind="text: customername"></div></td>

        <!-- ko foreach: $root.fields -->
        <td><div data-bind="text: logicalName"></div></td>
        <!-- /ko -->

        <td class="w3-center"><button class="w3-button w3-light-blue w3-border w3-round-large" data-bind="click: function(){$parent.createPhoneCallHandler($data)}">Create Phone Call</button></td>
        <td class="w3-center">
            <button class="w3-button w3-light-blue w3-border w3-round-large" data-bind="click: function(){$parent.openContact($data)}">Open Contact</button>
            <button class="w3-button w3-light-blue w3-border w3-round-large" data-bind="enable: $parent.contactHasAccount($data), click: function(){$parent.openAccount($data)}">Open Account</button>
        </td>
    </tr>
</script>

所以代码的第一部分会根据 "fields" 动态地打印漂亮的 header 行。顺便说一句，字段只是一个 objects 的数组，比如

{ name: "Human readable name", logicalName: "machine_name" }

在我的模板中，我想为每个联系人打印给定字段的值，但我无法让它工作。如果我现在拥有它，它会打印字段的逻辑名称，例如 "telephone"。但我想让它打印联系人电话属性的值。

谢谢！

Answer 1

由于您在嵌套的 foreach 中，联系人对象的上下文是 $parent，因此您可以将 data-bind="text: logicalName" 更改为 data-bind="text: $parent[logicalName]" 以获取值。

function viewModel(){
  var self = this;
  self.contacts = ko.observableArray([
    { id: 1, address: '123 A street' },
    { id: 2, address: '123 B street' }
  ]);
  self.fields = [
    {name: 'col1', logicalName: 'address'},
    {name: 'col2', logicalName: 'id'}
  ];
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<div class="w3-padding" data-bind="visible: contacts().length>0">
    <div class="w3-container w3-blue">
        <p>Title</p>
    </div>
    <div class="w3-responsive">
        <table class="w3-table-all">
            <tr class="w3-light-gray">
                <!-- ko foreach: fields -->
                <th style="width:125px" data-bind="text: name"></th>
                <!-- /ko -->
            </tr>
            <tbody data-bind="template: { name: 'contactTemplate', foreach: contacts }"></tbody>
        </table>
    </div>
</div>

<script type="text/html" id="contactTemplate">
    <tr>
        <!-- ko foreach: $root.fields -->
        <td><div data-bind="text: $parent[logicalName]"></div></td>
        <!-- /ko -->
    </tr>
</script>

模板脚本中的 KnockoutJS Containerless foreach

KnockoutJS Containerless foreach inside template script

knockout.js