使用PagerJS的KnockoutJS在数据绑定后停止工作
KnockoutJS with PagerJS stop working after data bound
我正在使用PagerJS插件开发KnockoutJS,发现了这个问题。我不知道它是否与PagerJS有关,但问题在于此。
我使用pager.js的page
绑定和sourceOnShow
属性,并且源内容中有一个子页面绑定了其父级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帮助完善我的问题。
我找到了一种变通方法,或者可能是解决方案。但我不太确定问题的原因。
最初,我尝试将selectedItem
绑定到page: {with: ...}
绑定,这导致了上述问题。现在我更改了selectedItem
与元素本身的绑定,而不是page:
内部的绑定。
我改变了这个:
<div class="job-info" data-bind="page: {id: 'jobinfo', with: selectedItem}">
对此:
<div class="job-info" data-bind="page: {id: 'jobinfo'}, with: selectedItem">
现在看来效果不错。
相关文章:
- OnsenUI AngularJS数据绑定无法正常工作
- 与 Angular 1.5 的单向数据绑定类似于双向工作
- Polymer v1.3.1数据绑定无论是否使用带有重复模板和json数组的iron ajax都无法工作
- 角度2 + 图表.js 和 ng2 图表.数据绑定未按预期工作
- Knockoutjs 单击绑定停止工作
- 控制器中的$scope在视图中不可访问/数据绑定不工作(IONIC/ANGULAR)
- 当数组具有重复值时,角度数据绑定将停止工作
- 指令的link()中的数据绑定工作不正常
- 使用PagerJS的KnockoutJS在数据绑定后停止工作
- Angularjs-数据绑定无法与控制器一起工作
- angular中的双向数据绑定没有像我预期的那样工作
- 如何将项目添加到重复列表和停止列表项目中,这些项目正由数据绑定更改
- AngularJS的Select2中的双向数据绑定没有't工作在角度1.2.13
- Angular指令的数据绑定不能正常工作
- 剑道窗口数据绑定不工作
- Angular日期过滤器不能与双向数据绑定一起工作
- 剑道-数据绑定onclick工作在网络上,而不是在移动
- 数据绑定无法工作的两种方式
- 敲出数据绑定不工作
- 使用prettyCheckable插件与knockoutjs 2.1检查数据绑定不工作