使用PagerJS的KnockoutJS在数据绑定后停止工作

KnockoutJS with PagerJS stop working after data bound

本文关键字:数据绑定 停止工作 KnockoutJS PagerJS 使用      更新时间:2023-09-26

我正在使用PagerJS插件开发KnockoutJS,发现了这个问题。我不知道它是否与PagerJS有关,但问题在于此。

我使用pager.js的page绑定和sourceOnShow属性,并且源内容中有一个子页面绑定了其父级ViewModel的可观察属性。

当可观察属性发生变化时,子级会尝试更新新数据。但在绑定了第一个值之后,它似乎停止了工作。我在每个步骤之间放了一些日志,结果如下:

我的示例代码的结果只显示job_id,其余显示具有空绑定的块,控制台只记录log1log2。没有记录其他错误。好像它在第一次绑定后就停止了工作。

我的代码是,例如

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">

现在看来效果不错。