可观察数组中的子数组
Sub-array within an observable array
我正在尝试创建一个包含内部数组的新帐户,但出现错误:
未捕获错误:初始化可观察数组时传递的参数必须是数组,或为 null,或未定义。
知道为什么这不起作用吗?
<script>
function Account(id, name, balance, deposits) {
this.Id = id;
this.Name = name;
this.Balance = balance;
this.Deposits = deposits;
}
var myAccountViewModel = function ()
{
this.Accounts = ko.observableArray([
new Account(1, "A1", 100, [1,2]),
new Account(2, "A2", 200, [2]),
new Account(3, "A3", 300, [2, 3]),
new Account(4, "A4", 400, [2,3]),
])
}
ko.applyBindings(myAccountViewModel);
</script>
HTML
<table>
<thead>
<tr>
<th>S.No</th>
<th>ID</th>
<th>Name</th>
<th>Balance</th>
</tr>
</thead>
<tbody data-bind="foreach: {data:Accounts, as:'Account'}">
<tr>
<td data-bind="text:($index()+1)"></td>
<td data-bind="text:Account.Id"></td>
<td data-bind="text:Account.Name"></td>
<td data-bind="text:Account.Balance"></td>
<!--<td>
<ul data-bind="foreach: {data:Deposits, as:'Amount'}">
<li data-bind="text:(Account().Name + 'Deposited ' + Amount())"></li>
</ul>
</td>-->
</tr>
</tbody>
</table>
问题中的代码对我有用。以下是适用于@alwaysVBNET 的版本。 - 它基本上是问题中代码的内容,并进行了一些小的修改。我从 http://knockoutjs.com/downloads/knockout-3.4.2.js
下载了 KO 3.4.2
主要变化是使用 temp
变量实例化 Account
对象,然后再将它们添加到可观察数组。如果有人能解释为什么这会有所作为,我会很感兴趣。
<!doctype html>
<html>
<head>
<title>KO js test</title>
<script src=./knockout-3.4.2.js></script>
</head>
<body>
<table>
<thead>
<tr>
<th>S.No</th>
<th>ID</th>
<th>Name</th>
<th>Balance</th>
</tr>
</thead>
<tbody data-bind="foreach: {data:Accounts, as:'Account'}">
<tr>
<td data-bind="text:($index()+1)"></td>
<td data-bind="text:Account.Id"></td>
<td data-bind="text:Account.Name"></td>
<td data-bind="text:Account.Balance"></td>
<td>
<ul data-bind="foreach: {data:Deposits, as:'Amount'}">
<li data-bind="text:(Account.Name + 'Deposited ' + Amount)"></li>
</ul>
</td>
</tr>
</tbody>
</table>
<script>
"use strict";
function Account(id, name, balance, deposits) {
var self = this;
self.Id = id;
self.Name = name;
self.Balance = balance;
self.Deposits = deposits;
}
var MyAccountViewModel = function ()
{
var self = this;
self.Accounts = ko.observableArray();
var temp = new Account(1, "A1", 100, [1,2]);
self.Accounts.push(temp);
temp = new Account(2, "A2", 200, [2]);
self.Accounts.push(temp);
temp = new Account(3, "A3", 300, [2, 3]);
self.Accounts.push(temp);
temp = new Account(4, "A4", 400, [2,3]);
self.Accounts.push(temp);
}
ko.applyBindings(new MyAccountViewModel());
</script>
</body>
</html>
我正在尝试创建一个包含内部数组的新帐户,但出现错误:
未捕获错误:初始化可观察数组时传递的参数必须是数组,或为 null,或未定义。
知道为什么这不起作用吗?
<script>
function Account(id, name, balance, deposits) {
this.Id = id;
this.Name = name;
this.Balance = balance;
this.Deposits = deposits;
}
var myAccountViewModel = function ()
{
this.Accounts = ko.observableArray([
new Account(1, "A1", 100, [1,2]),
new Account(2, "A2", 200, [2]),
new Account(3, "A3", 300, [2, 3]),
new Account(4, "A4", 400, [2,3]),
])
}
ko.applyBindings(myAccountViewModel);
</script>
HTML
<table>
<thead>
<tr>
<th>S.No</th>
<th>ID</th>
<th>Name</th>
<th>Balance</th>
</tr>
</thead>
<tbody data-bind="foreach: {data:Accounts, as:'Account'}">
<tr>
<td data-bind="text:($index()+1)"></td>
<td data-bind="text:Account.Id"></td>
<td data-bind="text:Account.Name"></td>
<td data-bind="text:Account.Balance"></td>
<!--<td>
<ul data-bind="foreach: {data:Deposits, as:'Amount'}">
<li data-bind="text:(Account().Name + 'Deposited ' + Amount())"></li>
</ul>
</td>-->
</tr>
</tbody>
</table>
问题中的代码对我有用。以下是适用于@alwaysVBNET 的版本。 - 它基本上是问题中代码的内容,并进行了一些小的修改。我从 http://knockoutjs.com/downloads/knockout-3.4.2.js
下载了 KO 3.4.2主要变化是使用 temp
变量实例化 Account
对象,然后再将它们添加到可观察数组。如果有人能解释为什么这会有所作为,我会很感兴趣。
<!doctype html>
<html>
<head>
<title>KO js test</title>
<script src=./knockout-3.4.2.js></script>
</head>
<body>
<table>
<thead>
<tr>
<th>S.No</th>
<th>ID</th>
<th>Name</th>
<th>Balance</th>
</tr>
</thead>
<tbody data-bind="foreach: {data:Accounts, as:'Account'}">
<tr>
<td data-bind="text:($index()+1)"></td>
<td data-bind="text:Account.Id"></td>
<td data-bind="text:Account.Name"></td>
<td data-bind="text:Account.Balance"></td>
<td>
<ul data-bind="foreach: {data:Deposits, as:'Amount'}">
<li data-bind="text:(Account.Name + 'Deposited ' + Amount)"></li>
</ul>
</td>
</tr>
</tbody>
</table>
<script>
"use strict";
function Account(id, name, balance, deposits) {
var self = this;
self.Id = id;
self.Name = name;
self.Balance = balance;
self.Deposits = deposits;
}
var MyAccountViewModel = function ()
{
var self = this;
self.Accounts = ko.observableArray();
var temp = new Account(1, "A1", 100, [1,2]);
self.Accounts.push(temp);
temp = new Account(2, "A2", 200, [2]);
self.Accounts.push(temp);
temp = new Account(3, "A3", 300, [2, 3]);
self.Accounts.push(temp);
temp = new Account(4, "A4", 400, [2,3]);
self.Accounts.push(temp);
}
ko.applyBindings(new MyAccountViewModel());
</script>
</body>
</html>