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

I have an observableArray and I would like to loop through to achieve a table of fields and in which the user should be able to dynamically add the rows. Here is an image of what I would like to accomplish:

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

Note in the above, whenever I fill the form it updates/mutates to the other fields although I have my field name made unique.

请注意,只要我填写表单,它就会更新/变异到其他字段,尽管我的字段名称是唯一的。

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

Here is how the fields are generated for the observableArray:

以下是为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);
}));

Additional information.

Here is a schema data from where I'd like to create my multi records form from. So a given page will have several form sections with single fields and multi-record fields such as the products list below. For multi records schema, I should be able to add more rows to it.

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

[{"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"}]}]}]

1 个解决方案

#1

Here's the section of interest:

这是感兴趣的部分:

<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 is the outer loop, so there is one row for each entry in it. $parent.fields_schema provides the $data for the columns in each row. You bind every element of a column to the same thing, fields_schema[$index].value.

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

You are going to need to provide an alias for the outer loop so that you can refer to the row's data and not just the schema column specs. That will look something like:

您将需要为外部循环提供别名,以便您可以引用行的数据而不仅仅是架构列规范。这将看起来像:

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

(I removed references to $data, as they are unnecessary.) row refers to the field object for the current row, and it is indexed (I think) by name from the schema.

(我删除了对$ data的引用,因为它们是不必要的。)row引用当前行的字段对象,并且它从模式中按名称索引(我认为)。

#1