1

我正在尝试为我的项目制作一个带有淘汰赛的简单网格系统。但我无法正确更新我的视图模型

这是我的 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 不会更新，因此页码类始终相同。那是我无法成功的。

你觉得我做错了什么？

4

1 回答 1

3

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

  self.Page = new PageViewModel(data);

UI 绑定到以前的 PageViewModel 并且不知道这个新的。您可能希望创建self.Page一个 observable 并使用当前的 PageViewModel 填充它。所以，那么你的GoTo方法会做： 

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

您最初将其定义为：

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

然后，在您的 UI 中，您需要with: Page围绕您的部分进行操作或访问诸如Page().CurrentPage.

于 2012-09-03T14:33:22.800 回答