0

JSONからヘッダー情報を取得するブートストラップアコーディオンがあります。各アコーディオンペイン内にテーブルがあり、各テーブルの情報にもJSONが入力されています。

私が抱えている問題は、すべてのテーブルデータが最初のアコーディオンペイン内に入力されることです。セカンダリテーブルに移動してそこに情報を入力することはありません。私のJSONデータにはIDが含まれているため、方法がわからない場合でもアイテム間を移動できます。

コードの一部を次に示します。

<div class="well">



  </div>
  <div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">
    <div class="accordion-inner">
      <div id="injectbody">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ContentID</th>
              <th>Content</th>
              <th>Qty To Assign</th>
            </tr>
          </thead>
          <tbody data-bind="foreach: Locations">
            <tr>
              <td id="Lot" data-bind="text: ContentID"></td>
              <td id="Area" data-bind="text: Content"></td>
              <td id="QtyToAssign">
                <input type="text" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

そして、それをすべて機能させるためのJQuery：

   var data = {
  "d": [{
    "__type": "Sample",
      "ItemID": "1",
    "ItemName": "First Item",
      "QtyUnassigned": 10
  }, {
    "__type": "Sample",
      "ItemID": "2",
    "ItemName": "Second Item",
      "QtyUnassigned": 15
  }]
};

var data2 = {
  "d": [{
    "__type": "Sample2",
      "ItemID": 1,
      "ContentID": "1",
      "Content": "This Is The First Item Content"
  }, {
    "__type": "Sample2",
      "ItemID": 2,
      "ContentID": "2",
      "Content": "This Is The Second Item Content"
  }]
};

var ProductViewmodel;
//debugger; 

//Binds ViewModel
function bindProductModel(Products) {
  var self = this;
  self.items = ko.mapping.fromJS([]);
  ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
  console.log(ProductViewmodel());
}

//Binds First DataSet
function bindModel(vm, data) {
  var self = this;
  vm.Locations = ko.mapping.fromJS(data.d);
  console.log(ProductViewmodel());
}

//Starting Function
$(document).ready(function () {
  bindProductModel(data);
  bindModel(ProductViewmodel()[0], data2);
  ko.applyBindings(ProductViewmodel);
});

私はまた、私が到達しようとしていることを示すためにこのフィドルを作成しました。

4

1 に答える 1

1

エラーは、ViewModelが実際には配列であるため、ここLocationsでは変数の最初の要素にのみバインドしているというProductViewmodelことです。

bindModel(ProductViewmodel()[0], data2);

これはあなたが次のようなものを持っていることを意味します...

[0].Locations = [],
[1].Locations = undefined

したがって、マークアップをバインドするときにエラーをスローします（フィドルのコンソールを参照してください）。

関連する注記では、変数の命名は非常に誤解を招く可能性があります。ProductViewmodelは配列ですが、ViewModelという名前を付けますapplyBindings。

LearnKnockoutJSにレビューを与えることをお勧めします。また、変数の名前付けでキャメルケース、underscore_case、PascalCaseなどを選択する場合は、規則に従いますが、それらを混在させないでください。bindModel最後に、特定のオブジェクトにのみ適用できる関数がある場合は、のような名前以外のより適切な名前を使用してみてくださいbindLocationsToModel。

于 2013-01-10T21:08:54.090 に答える