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

GoToメソッドでこれを行うと、ノックアウトは新しい PageViewModel を認識しません。

  self.Page = new PageViewModel(data);

UI は以前の PageViewModel にバインドされており、この新しい PageViewModel については認識していません。オブザーバブルを作成self.Pageし、現在の 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 に答える