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与淘汰赛合作？或者我是否必须更改类似于var jsondata = [[{"id":"1"}, {"name":"George"}]]等的JSON

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"}]

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

淘汰json数据显示太多行

2 个答案: