淘汰赛 json 数据显示太多行

Question

我有一个淘汰视图模型，它由一个 observableArray 对象组成。

我正在使用这个 json 数据来填充数组

这个 JSON 结构是我真实结构的简化版本。在那，我想为一个项目赋予几个属性，例如控制是否启用表单输入：{"name":"George", "input_disabled":"true", "input_maxlength":"50} 等

function listItem(id, name, address) {
  var self = this;
  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.address = ko.observable(address);
}
function vModel(data) {
	var self = this;
	self.listArray = ko.observableArray();
  $.each(data, function(key, val) {
  	self.listArray.push(new listItem(val.id, val.name, val.address));
  });
	return {
		listArray : self.listArray
	}
}

var jsondata = [
{"id":"1"}, {"name":"George"}, {"age": "35"}, {"occupation": "Architect"}, {"address":"NY"},
{"id":"2"}, {"name":"Jerry"}, {"age": "35"}, {"occupation": "Comedian"}, {"address":"Brooklyn"},
{"id":"3"}, {"name":"Elaine"}, {"age": "35"}, {"occupation": "Publisher"}, {"address":"Manhattan"}
];

ko.applyBindings(new vModel(jsondata));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-striped">
  <tbody data-bind="foreach: listArray()">
    <tr>
      <td>ID</td>
      <td data-bind="text: id"></td>
    </tr>
    <tr>
      <td>Name</td>
      <td data-bind="text: name"></td>
    </tr>
    <tr>
      <td>Address</td>
      <td data-bind="text: address"></td>      
    </tr>
  </tbody>
</table>

当我使用包含的 JSON 填充数组时，foreach 循环会打印出太多行。根据淘汰文档，foreach 循环为数组中的每个项目复制 html 元素。

但问题是，我有没有办法让这个 JSON 与淘汰赛一起工作？还是我必须将 JSON 更改为类似于：var jsondata = [[{"id":"1"}, {"name":"George"}]] 等

Answer 1

Knockout foreach 绑定到数组中的每个元素。通过像您一样定义 json 结构，您将在表中有 15 行。您也无法知道id 对应于name。

我已将您的 JSON 结构更改如下：

[{ "id": "1", "name": "George", "age": "35", "occupation": "Architect", 
"address": "NY" },
{ "id": "2", "name": "Jerry", "age": "35", "occupation": 
"Comedian", "address": "Brooklyn" },
{"id":"3", "name":"Elaine", "age": "35", "occupation": "Publisher", 
"address":"Manhattan"}] 

function listItem(id, name, address) {
  var self = this;
  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.address = ko.observable(address);
}
function vModel(data) {
	var self = this;
	self.listArray = ko.observableArray();
  $.each(data, function(key, val) {
  	self.listArray.push(new listItem(val.id, val.name, val.address));
  });
	return {
		listArray : self.listArray
	}
}

var jsondata = 
[{ "id": "1", "name": "George", "age": "35", "occupation": "Architect", "address": "NY" }, { "id": "2", "name": "Jerry", "age": "35", "occupation": "Comedian", "address": "Brooklyn" },
{"id":"3", "name":"Elaine", "age": "35", "occupation": "Publisher", "address":"Manhattan"}
];

ko.applyBindings(new vModel(jsondata));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-striped">
  <tbody data-bind="foreach: listArray()">
    <tr>
      <td>ID</td>
      <td data-bind="text: id"></td>
    </tr>
    <tr>
      <td>Name</td>
      <td data-bind="text: name"></td>
    </tr>
    <tr>
      <td>Address</td>
      <td data-bind="text: address"></td>      
    </tr>
  </tbody>
</table>

Answer 2

再深入一点：如果我想根据这些数据构建一个表单，我该怎么做？

假设我想将每一行显示为表单的一部分。然后 JSON 数据也将用于控制输入元素。例如：我想在我的 JSON 中定义“id”是一个隐藏字段，而“name”是只读的。这将根据 JSON 以不同方式应用于每组数据。

<table class="table">
<tr><td><input type="hidden" name="id" value="1" /></td></tr>
<tr><td><input type="text" name="name" readonly="readonly" value="George" /></td></tr>
</table>
<table class="table">
<tr><td><input type="hidden" name="id" value="2" /></td></tr>
<tr><td><input type="text" name="name" disabled="disabled" value="Jerry" /></td></tr>
</table>
<table class="table">
<tr><td><input type="hidden" name="id" value="3" /></td></tr>
<tr><td><input type="text" name="name" size="75" value="Elaine" /></td></tr>
</table>