Question

我想问一个关于淘汰赛中数据源使用情况的问题。为此，我尝试将我的例子放在一个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未定义; 绑定值：click：items.pager.first

我刚刚再次测试，在Chrome中它运行正常，但在Ubuntu 12.10下的Firefox 20.0中它不起作用！

知道这里可能出现的问题：http://jsfiddle.net/sturm/pr9Sf/1/

knockoutjs数据源示例在jsfiddle中不起作用

0 个答案: