这是我的模特
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更改时不更新视图。我试图找到答案但到目前为止没有运气。
我是淘汰赛的新手,所以如果有改进的话,请告诉我。
答案 0 :(得分:0)
首先确保您的服务器端代码返回正确的数据。 打开任何浏览器的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);