我想问一个关于在淘汰赛中使用数据源的问题。为此,我尝试将我的示例基于 jsfiddle,但我什至无法让这个简单的示例工作。
这是html代码:
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Sales</th>
<th>Price</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: sales"></td>
<td data-bind="text: price"></td>
</tr>
</tbody>
</table>
<span id="pager">
<button data-bind="click: items.pager.first">First</button>
<button data-bind="click: items.pager.previous">Prev</button>
<span class="summary">Page
<span data-bind="text: items.pager.page"></span> of
<span data-bind="text: items.pager.totalPages"></span></span>
<button data-bind="click: items.pager.next">Next</button>
<button data-bind="click: items.pager.last">Last</button>
</span>
这是javascript代码:
var initialData = [
{ id:1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ id:2, name: "Speedy Coyote", sales: 89, price: 190.00 },
{ id:3, name: "Furious Lizard", sales: 152, price: 25.00 },
{ id:4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ id:5, name: "Brooding Dragon", sales: 0, price: 6350 },
{ id:6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ id:7, name: "Optimistic Snail", sales: 420, price: 1.50 }
];
function getAnimals() {
var params = {
limit: this.pager.limit(),
startIndex: this.pager.limit() * (this.pager.page() - 1)
};
$.ajax({
type: 'POST',
url: '/echo/json/',
data: {
json: ko.toJSON(initialData.slice(params.startIndex, params.startIndex + params.limit))
},
context: this,
success: function(data) {
this(data);
this.pager.totalCount(7);
},
dataType: 'json'
});
};
var viewModel = {
items: ko.observableArray([]).extend({
datasource: getAnimals,
pager: {
limit: 3
}
})
};
ko.applyBindings(viewModel);
我总是收到以下 javascript 错误:
错误:无法解析绑定。消息:TypeError:items.pager 未定义;绑定值:点击:items.pager.first
我刚刚再次测试,在 Chrome 中它工作正常,但在 Ubuntu 12.10 下的 Firefox 20.0 中它不起作用!
知道这里可能出了什么问题:http: //jsfiddle.net/sturm/pr9Sf/1/