ノックアウト内のデータソースの使い方について質問したいです。そのために、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/