Question

我有一个observableArray，我想循环实现一个字段表，用户应该能够动态添加行。这是我想要完成的图像：

在上面注意，每当我填写表单时，它会更新/变异到其他字段，尽管我的字段名称是唯一的。

<div class="spacer-xxs">
<records data-bind="foreach: $data.multi_records">
    <record>
        <h5 data-bind="text: $data.title"></h5>
        <table class="table table-condensed" data-bind="if: $data.fields().length > 0">
            <thead>
            <tr data-bind="foreach: $data.fields_schema">
                <th data-bind="text: $data.title"></th>
            </tr>
            </thead>
            <tbody data-bind="foreach: $data.fields">
            <tr data-bind="foreach: $parent.fields_schema">
                <td>
                    <input class="form-control input-sm"
                           data-bind="attr: {'name': $data.name, 'id': $index()}, value: $data.value">
                </td>
                <!-- ko if: $index() == $parent.length-1 -->
                <td>
                    <a href="#" class="error" data-bind="click: $root.removeRow.bind($data, $parent)"><i
                            class="fa fa-times-circle"></i> </a>
                </td>
                <!-- /ko -->
            </tr>
            </tbody>
        </table>
        <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-xs btn-inverse" data-bind="click: $root.addTableRow.bind($data, $parent)">
                    <i class="fa fa-plus"></i> Add item
                </button>
            </div>
        </div>
    </record>
</records>

以下是为observableArray：

生成字段的方式

var field = function (field) {
            this.name = ko.observable(field.name).extend({required: field.required === true});
            this.title = ko.observable(field.title);
            this.type = ko.observable(field.type);
            this.help_text = ko.observable(field.help_text);
            this.value = ko.observable(field.value).extend({required: field.required === true});

            //Add validation group
            self.errors.push(ko.validation.group(this));
  };

section.fields = [{...}, ] //Contains fields array from the database.

this.fields = ko.observableArray(ko.utils.arrayMap(section.fields, function (field_item) {
      return new field(field_item);
}));

其他信息。

这是一个架构数据，我想从中创建我的多记录表单。因此，给定页面将具有多个具有单个字段和多记录字段的表单部分，例如下面的产品列表。对于多记录模式，我应该能够添加更多行。

[{"title":"Untitled section","fields":[],"multi_records":[]},{"title":"Section 1","fields":[{"title":"Field 1","type":"text","required":true,"value":"1000","help_text":"Default is 1000","name":"field_1"},{"title":"Field 2","type":"text","required":true,"name":"field_2"}],"multi_records":[{"title":"Products","fields":[{"title":"Name","type":"text","name":"name"},{"title":"Qty","type":"number","name":"qty"},{"title":"Price","type":"number","name":"price"},{"title":"Total","type":"formula","value":"MULT(price,qty)","name":"total"}]}]}]

Answer 1

以下是感兴趣的部分：

<tbody data-bind="foreach: $data.fields">
<tr data-bind="foreach: $parent.fields_schema">
    <td>
        <input class="form-control input-sm"
               data-bind="attr: {'name': $data.name, 'id': $index()}, value: $data.value">
    </td>

$data.fields是外部循环，因此每个条目都有一行。 $parent.fields_schema为每行中的列提供$data。您将列的每个元素绑定到同一个事物fields_schema[$index].value。

外部循环需要provide an alias，以便您可以引用行的数据而不仅仅是架构列规范。这看起来像是：

<tbody data-bind="foreach: {data: fields, as:row}">
<tr data-bind="foreach: $parent.fields_schema">
    <td>
        <input class="form-control input-sm"
               data-bind="attr: {'name': name}, value: row[name()]">
    </td>

（我删除了对$data的引用，因为它们是不必要的。）row引用当前行的field对象，并通过{{进行索引（我认为） 1}}来自架构。

Knockout.js如何为可观察数组创建唯一字段值

1 个答案: