Knockout.js観測可能な配列の一意のフィールド値を作成する方法

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は、外側ループであるので、その中の各エントリに対して1つの行が存在します。 $parent.fields_schemaは、各行の列に$dataを提供します。列のすべての要素を同じものにバインドします（fields_schema[$index].value）。

アウターループにはprovide an aliasが必要なので、スキーマ列の仕様だけでなく、行のデータも参照できます。 rowは、現在の行のfieldオブジェクトを参照し、それはスキーマからnameで（と思う）インデックス付けされて（彼らは不必要であるように私は、$dataへの参照を削除しました。）

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

：それは次のようになります。