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);
});

我还创建了这个Fiddle来展示我想要达到的目标。

4

1 回答 1

1

您的错误是，由于您的 ViewModel 实际上是一个数组，因此您仅在此处绑定Locations到变量的第一个元素ProductViewmodel。

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

这意味着你有类似...

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

因此在绑定标记时抛出错误（请参阅小提琴中的控制台）。

在相关说明中，您的变量命名极具误导性。ProductViewmodel是一个数组，但您将其命名为 ViewModel 并命名为applyBindings它。

我建议你给Learn KnockoutJS一个评论。另外，当变量命名选择camelCase，或underscore_case，或PascalCase或其他东西时，请遵守约定，但不要混合它们。最后，如果您的功能只适用于特定对象，请尝试使用比bindModellike更好的名称bindLocationsToModel。

于 2013-01-10T21:08:54.090 回答