Question

我正在使用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帮助改进我的问题。

Answer 1

我找到了一种解决方法，或者可能是解决方案。但我不能确定问题的原因。

最初，我尝试将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">

现在似乎工作正常。

带有PagerJS的KnockoutJS在数据绑定后停止工作

1 个答案: