0

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

4

0 に答える 0