Question

我有一个配置数组，其中包含要在页面上显示的字段名称。我可以使用无容器的foreach渲染标题行。然后在模板脚本中生成表主体。它应打印与联系人数量一样多的行，并动态呈现一些值。让代码讲：

<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>

因此，代码的第一部分根据“字段”动态打印漂亮的标题行。顺便说一句，字段只是

之类的对象数组

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

在我的模板中，我想为每个联系人打印给定字段的值，但无法正常工作。如果我像现在一样拥有它，它将打印该字段的逻辑名称，例如“电话”。但是我想让它打印联系人的电话属性的值。

谢谢！

Answer 1

由于您处于嵌套的foreach中，因此联系人对象的上下文是$ parent，因此可以将dispatch_sync(dispatch_get_main_queue(), ^{ // create your class that will create a CLLocationManager here. });更改为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());

模板脚本内的KnockoutJS无容器foreach

1 个答案: