Question

这是我的模特

var ViewModel =
{
    results_page: ko.observableArray(),
    show_result: ko.observable(true),
    load_page: function (data, event) { setupPage(event.currentTarget.children[0].innerHTML) }
}

我正在使用observableArray从数据中填充以下列表。

function setupPage(page_index) {

    //some code goes here

    $.get(url, function (data) {
        data = JSON.parse(data);
        if (data.result || false) {    
            ViewModel.results_page([]);
            var page = [];
            for (i = 0; i < result.length; i++) {    

                    //some code goes here

                    page.push(result[i]);                   
                }
            }
            ViewModel.results_page(page);      
        }
    });
}

<ul id="results" data-bind="visible: show_result, foreach: results_page">
    <li style="margin-top: 0px; cursor: pointer;">
        <span class="divider marker">
            <img alt="" data-bind="attr:{src:'/images/markers/' + $index() + '-green.png'}">
        </span>
        <a data-bind="text: description"></a>
        <span data-bind="text: distance + ' mi.'"></span>
        <p data-bind="text: address"></p>
        <p data-bind="text: city + ', ' + province"></p>
        <span class="divider arrow">
            <span>»</span>
        </span>
    </li>
</ul>

并使用此列表触发分页

<ol data-bind="foreach: new Array(pages_count())">
    <li data-bind="click: $root.load_page">
        <a data-bind="text: $index() + 1"></a>
    </li>
</ol>

更新第一次请求的result_page更改视图，但之后在result_page更改时不更新视图。我试图找到答案但到目前为止没有运气。

我是淘汰赛的新手，所以如果有改进的话，请告诉我。

Answer 1

首先确保您的服务器端代码返回正确的数据。打开任何浏览器的js调试器并查看错误。

我不确定您的代码到底出了什么问题，但我制作的简化版本与您的版本几乎完全相同。我希望这有助于理解你的问题。

HTML：

<ul data-bind="visible: results_page().length > 0, foreach: results_page">
    <li>
        <span data-bind="text: description"></span>
    </li>
</ul>

<ol data-bind="foreach: pages_count()">
    <li data-bind="click: $root.load_page.bind($data, $index() + 1)">
        <a href="javascript:;" data-bind="text: $index() + 1"></a>
    </li>
</ol>

JS：

var ViewModel = {
    results_page: ko.observableArray(),
    show_result: ko.observable(false),
    load_page: function(pageIndex, test) {
        // load data by jquery...
        var pageData = [
            { description: 'description 1 of page ' + pageIndex },
            { description: 'description 2 of page ' + pageIndex }
        ];

        ViewModel.results_page(pageData);
        ViewModel.show_result(pageData.length > 0)
    },
    pages_count: function() {
        return new Array(3);
    }
} 

ko.applyBindings(ViewModel);

jsfiddle

knockout.js observableArray更改未反映在UI中

1 个答案: