【发布时间】：2014-10-14 15:53:20
【问题描述】：
我正在使用 PagerJS 插件开发 KnockoutJS 并发现了这个问题。我不知道它是否与 PagerJS 有关，但这是问题所在。
我使用带有sourceOnShow 属性的pager.js 的page 绑定，并且源内容中有子页面与其父ViewModel 的可观察属性绑定。
当可观察属性发生变化时，孩子尝试更新新数据。但是在绑定第一个值之后，它似乎停止了工作。我在每个步骤之间放了一些日志，结果如下：
我的示例代码的结果仅显示job_id，其余显示具有空绑定的块，控制台仅记录log1 和log2。没有记录其他错误。好像它在第一次绑定后停止工作。
我的代码是，例如
main page
<script src="/js/jobspage.js"></script>
<!-- some elements -->
<div data-bind="page: {
id: 'somepage',
title: 'Some Page',
sourceOnShow: 'template/somepage',
role: 'start'
}"></div>
<div data-bind="page: {
id: 'jobs',
title: 'Jobs',
sourceOnShow: 'template/jobs',
with: JobsPageVM
}"></div>
<div data-bind="page: {
id: 'other',
title: 'Other Page',
sourceOnShow: 'template/otherpage'
}"></div>
/template/jobs
<div class="jobs" id="main" role="main">
<div class="job-list" data-bind="page: {role: 'start'}">
<!-- ko foreach: jobitems -->
<div data-bind="event: {click: item_clicked}">
<!-- item description -->
<!-- item_clicked will set the selectedItem (observable) property of JobsPageVM -->
</div>
<!-- /ko -->
</div>
<div class="job-info" data-bind="page: {id: 'jobinfo', with: selectedItem}">
<!--ko text: console.log('log1')--><!--/ko-->
<!-- some elements -->
<!--ko text: console.log('log2')--><!--/ko-->
Job ID : <span class="job-value" data-bind="text: job_id"></span>
<!--ko text: console.log('log3')--><!--/ko-->
Job Title : <span class="job-value" data-bind="text: job_title"></span>
<!--ko text: console.log('log4')--><!--/ko-->
</div>
</div>
jobspage.js
var JobsPageVM = function () {
var self = this;
var dataitems = ko.observableArray();
self.isLoading = ko.observable(true);
self.searchTerm = ko.observable("");
self.jobitems = ko.computed(function () {
var search_input = self.searchTerm().toLowerCase();
if (search_input === "") {
return dataitems();
} else {
return ko.utils.arrayFilter(dataitems(), function (item) {
var data = item.cust_first_name + item.cust_last_name;
return data.search(new RegExp(search_input, "i")) >= 0;
});
}
}, this);
self.selectedItem = ko.observable();
self.branchID = ko.observable(sample_branch_id);
self.getJobList = function (status) {
self.isLoading(true);
if (typeof (status) === "undefined") {
status = "all";
}
$.ajax({
url: "/api/job/branch/" + self.branchID(),
data: {
jobstatus: status
},
success: function (data) {
dataitems(data); // data is an array of object items contains `job_id`, `job_title`, and more
self.isLoading(false);
},
error: function (x, s, e) {
console.log(x, s, e);
self.isLoading(false);
}
});
};
self.item_clicked = function (vm, e) {
self.selectedItem(vm);
pager.navigate('jobs/jobinfo');
};
self.getJobList();
};
*我不知道这是否违反规则。之前有人问过这个问题，但没有回答，所以我删除并在这里重新提问。感谢@Stijn 和@KristianNissen 帮助完善我的问题。
【问题讨论】：
-
在一个工作示例上调试这样的东西要容易得多。你能为我们提供一个jsfiddle吗？
-
作为一般提示，在 Knockout 中“它只工作一次”通常意味着您不小心覆盖（替换）了一个 observable 而不是更新它的值。也就是说，您创建一个可观察的
value = ko.observable('firstvalue')，绑定到您的 HTML 中的该可观察对象，然后再次执行类似value = ko.observable('newvalue')的操作，而不是value('newvalue')。 -
谢谢@janfoeh 我正在尝试制作一个。我已经检查过我的代码中没有替换值。
标签： javascript html knockout.js pagerjs