javascript - 在 Knockout 中调用 ajax 后 ViewModel 未更新

Question

我正在尝试为我的项目制作一个带有挖空的简单网格系统。但是我无法正确更新我的 View 模型

这是我的JS；

$(function () {
    function AppViewModel(initialData) {
        var self = this;
        self.prices = ko.observableArray(initialData.Data);
        self.TotalCount = ko.observable(initialData.TotalCount);
        self.Page = new PageViewModel(initialData);
        self.GoTo = function (d) {
            $.getJSON("/prices/GetByFilterViaJSON?limit=3&page=" + d, function (data) {
                self.Page = new PageViewModel(data);
                self.prices(data.Data);
            });
        };
    };

    function PageViewModel(listData) {
        var self = this;
        ko.mapping.fromJS(listData.Page, {}, self);
    }

    $.getJSON("/prices/GetByFilterViaJSON?limit=3", function (data) {
        ko.applyBindings(new AppViewModel(data));
    });
});

和 HTML

<div class="section table_section">
<div class="section_inner">
    <div class="title_wrapper">
        <h2 data-bind="text: TotalCount">
            Prices</h2>
    </div>
    <div class="section_content">
        <div id="product_list">
            <div class="table_wrapper">
                <div class="table_wrapper_inner">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <th>
                                    No.
                                </th>
                                <th>
                                    Tier
                                </th>
                                <th>
                                </th>
                            </tr>
                            <!-- ko foreach: prices -->
                            <tr data-bind="css:{first: $index % 2 == 0}">
                                <td data-bind="text: Id" style="width: 26px;">
                                </td>
                                <td data-bind="text: Tier" style="width: 35px;">
                                </td>
                                <td style="width: 120px;">
                                    <div class="actions_menu">
                                        <ul>
                                            <li><a class="edit" href="">edit</a></li>
                                            <li><a class="delete" href="">deny</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <!-- /ko -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- PAGING NUMBERS -->
        <div class="pagination"><!-- HERE NOT UPDATING -->
            <span class="page_no" data-bind="text: Page.CurrentPage()"></span>
            <ul class="pag_list" data-bind="foreach: ko.utils.range(1, Page.TotalPage)">                   <!-- AND HERE NOT UPDATING -->
                <li><a href=""  data-bind="click: $root.GoTo, css:{current_page: $data==$root.Page.CurrentPage()}"><span><span data-bind="text: $data"></span></span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

当我点击分页号码(viewModel 中的 GoTo 函数)时，self.Page 不会更新，因此页码类别始终相同。这就是我无法成功的原因。

你觉得我做错了什么？

Answer 1

当您在 GoTo 方法中执行此操作时，Knockout 不知道您的新 PageViewModel:

  self.Page = new PageViewModel(data);

UI 与以前的 PageViewModel 绑定(bind)并且不知道这个新的。您可能希望使 self.Page 成为可观察对象并使用当前的 PageViewModel 填充它。那么，您的 GoTo 方法将执行以下操作:

self.Page(new PageViewModel(data))`.  

你最初会这样定义它:

self.Page = ko.observable(new PageViewModel(initialData));

然后，在您的 UI 中，您需要围绕您的部分执行 with: Page 或访问 Page().CurrentPage 等值。