在Knockout中调用ajax后,ViewModel未更新

时间:2012-09-03 14:20:35

标签: javascript asp.net-mvc knockout.js

我正在尝试为我的项目制作一个简单的网格系统。但我无法正确更新我的viewmodel

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

你认为我做错了什么?

1 个答案:

答案 0 :(得分:3)

当您使用GoTo方法执行此操作时,Knockout不知道您的新PageViewModel:

  self.Page = new PageViewModel(data);

UI与先前的PageViewModel绑定,并且不知道这个新的。您可能希望使self.Page成为可观察对象,并使用当前的PageViewModel填充它。那么,那么你的GoTo方法就可以了:

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

您最初会将其定义为:

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

在您的用户界面中,您需要在部分周围with: Page或访问Page().CurrentPage等值。