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

Question

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:

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 :

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

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

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.