Knockout.js 集合的集合

Question

我刚开始学习淘汰赛，我正在寻找一些帮助，以了解如何为视图模型实现集合的集合，以便为集合构建 json 结果。我有两个表单列表名称和地址，用户为其输入多个值。当我尝试使用一种形式时，它工作正常。当我包含地址模型时，我在构建视图模型时遇到了问题。我想我做错了。如果您能指导我解决此问题，我将不胜感激。提前致谢

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h1 class="panel-title">
                    Names
                </h1>
      </div>
      <div class="panel-body">
        <table data-bind="visible: names().length > 0" class="table table-hover table-responsive">
          <thead>
            <tr>
              <th>First</th>
              <th>Middle</th>
              <th>Last</th>
              <th>Suffix</th>
              <th>Gender</th>
            </tr>
          </thead>
          <tbody data-bind="foreach:names">
            <tr>
              <td>
                <input class="form-control" data-bind="value: firstName" />
              </td>
              <td>
                <input class="form-control" data-bind="value: middleName" />
              </td>
              <td>
                <input class="form-control" data-bind="value: lastName" />
              </td>
              <td>
                <input class="form-control" data-bind="value: suffix" />
              </td>
              <td>
                <input class="form-control" data-bind="value: gender" />
              </td>
              <td style="vertical-align: inherit;"><a href="#" data-bind="click:$root.removeName">Delete</a></td>
            </tr>
          </tbody>
        </table>
        <button class="btn btn-success btn-sm" data-bind="click: addName">Add Name</button>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h1 class="panel-title">
                    Addresses
                </h1>
      </div>
      <div class="panel-body">
        <table data-bind="visible: addresses().length > 0" class="table table-hover table-responsive">
          <thead>
            <tr>
              <th>street</th>
              <th>city</th>
              <th>state</th>
              <th>country</th>
            </tr>
          </thead>
          <tbody data-bind="foreach:addresses">
            <tr>
              <td>
                <input class="form-control" data-bind="value: street" />
              </td>
              <td>
                <input class="form-control" data-bind="value: city" />
              </td>
              <td>
                <input class="form-control" data-bind="value: state" />
              </td>
              <td>
                <input class="form-control" data-bind="value: country" />
              </td>
              <td style="vertical-align: inherit;"><a href="#" data-bind="click:$root.removeAddress">Delete</a></td>
            </tr>
          </tbody>
        </table>
        <button class="btn btn-success btn-sm" data-bind="click: addAddress">Add Address</button>
      </div>
    </div>
  </div>
</div>

var NameModel = function(names) {
  var self = this;
  self.names = ko.observableArray(names);

  self.addName = function() {
    self.names.push({
      firstName: "",
      middleName: "",
      lastName: "",
      suffix: "",
      gender: "",
      reportingDate: ""
    });
  };
  self.removeName = function(name) {
    self.names.remove(name);
  };
};
var AddressModel = function(addresses) {
  var self = this;
  self.names = ko.observableArray(addresses);

  self.addaddress = function() {
    self.names.push({
      street: "",
      city: "",
      state: "",
      country: ""
    });
  };
  self.removeAddress = function(address) {
    self.names.remove(address);
  };
};
//var viewModel = new NameModel([
//  { firstName: "", middleName: "", lastName: "", suffix: "", gender: "", reportingDate: "" }
//]);
var viewModel = {
  nameModel: new NameModel([{
    firstName: "",
    middleName: "",
    lastName: "",
    suffix: "",
    gender: "",
    reportingDate: ""
  }]),
  addressModel: new AddressModel([{
    street: "",
    city: "",
    state: "",
    country: ""
  }])
};
ko.applyBindings(viewModel);

https://jsfiddle.net/iamsrk/9kf41vd7/

Answer 1

现在看看工作小提琴：

https://jsfiddle.net/9kf41vd7/30/

它不起作用的原因是它没有构建。 ApplyBindings 跌倒了。它因多种原因而失败，包括像 addaddress 而不是 addAddress 这样简单的原因。

因为它只是一个例子，我将忽略不好的命名约定。

添加了 withs（更好的做法，允许您的添加名称按钮从 nameModel.addName -> addName 简化）这也是一个函数，因此应该是 nameModel()。 Withs 帮助你避免犯这个错误。

data-bind="with: nameModel"

看看我的小提琴，如果你不明白我为什么做了我做过的事，可以问任何问题。