Question

我有一个bootstrap手风琴，它从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来展示我想要达到的目标。

Answer 1

您的错误是因为您的ViewModel实际上是一个数组，所以您只需将Locations绑定到变量ProductViewmodel的第一个元素。

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

这意味着你有类似......

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

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

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

我建议您对Learn KnockoutJS进行审核。另外，当变量命名选择camelCase，或者undercore_case或PascalCase之类的东西时，坚持使用约定，但不要混淆它们。最后，如果您的某些功能仅适用于特定对象，请尝试使用bindModel以外的更好名称，例如bindLocationsToModel。

使用Knockout JS在多个表中填充JSON值

1 个答案: