1

単一のグリッドページがあり、Knockoutを使用してデータをバインドしようとしていますが、論理的な問題があると思います（私のせいで）。データバインディングは、jsonからデータを取得する前に開始されます。

ここでjavascript;

$(function () {



my.PriceListViewModel = (function () {
    var 
        data = ko.observableArray([]),
        totalCount = ko.observable(),
        currentPage = ko.observable(1),
        page = ko.observable(my.PageModel),
        goTo = function (d) {
            $.getJSON("/prices/GetByFilterViaJSON?limit=3&page=" + d, function (data) {
                Data(data.Data);
                CurrentPage(d);
            });
        },
        loadData = function () {
            $.getJSON("/prices/GetByFilterViaJSON?limit=3", function (list) {
                $.each(list, function (key, val) {
                    data.push(val);
                });

                my.PageModel.LoadData(data);
                Page = my.PageModel;
            });
        };
    return {
        Data: data,
        TotalCount: totalCount,
        CurrentPage: currentPage,
        Page: page,
        GoTo: goTo,
        LoadData: loadData
    };
})();

my.PageModel = (function () {
    loadData = function (data) {
        ko.mapping.fromJS(data.Page, {}, this);
    };

    return {
        LoadData: loadData
    };

})();

my.PriceListViewModel.LoadData();
debugger;
ko.applyBindings(my.PriceListViewModel);
});

およびhtml;

<div class="section table_section">
<div class="section_inner" id="divTestKoRemoteGrid" >
    <div class="title_wrapper">
        <h2 data-bind="text: TotalCount">
            Prices</h2>
    </div>
    <div class="section_content">
        <div id="product_list">
            <!--[if !IE]>start table_wrapper<![endif]-->
            <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: Data -->
                            <tr data-bind="css: { second: $index() % 2 }">
                                <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>
            <!--[if !IE]>end table_wrapper<![endif]-->
        </div>
        <!--[if !IE]>start pagination<![endif]-->
        <div class="pagination">
            <span class="page_no" data-bind="text: CurrentPage()"></span>
            <ul class="pag_list" data-bind="foreach: ko.utils.range(1, Page.TotalPage)">                   
                <li><a href=""  data-bind="click: $root.GoTo, css:{current_page: $data==$root.CurrentPage()}"><span><span data-bind="text: $data"></span></span></a>
                </li>
            </ul>
        </div>
        <!--[if !IE]>end pagination<![endif]-->
    </div>
</div>

バインドを開始する前にデータを取得するにはどうすればよいですか？

4

3 に答える 3

1

ko.applyBindings（my.PriceListViewModel）;を呼び出すことができます。初期データが取得された後でのみ。

于 2012-09-06T06:17:58.337 に答える
0

ドキュメントレディ関数でapplyバインディングを呼び出します。

于 2012-09-06T06:57:30.210 に答える
-1

私は解決策を見つけました。

非同期である$.getJsonメソッドを使用したため、データはビューモデルがロードされた後に取得されていました。

$.getJsonメソッドを$.ajax.async= falseに変更したところ、すべて問題ありませんでした。

my.PriceListViewModel = (function () {
    var 
        data = ko.observableArray([]),
        totalCount = ko.observable(),
        page = ko.observable(),
        goTo = function (d) {
            $.getJSON("/prices/GetByFilterViaJSON?limit=6&page=" + d, function (list) {
                data(list.Data);
                page(list.Page);
            });
        },
        loadData = function () {
            $.ajax({
                type: 'GET',
                url: '/prices/GetByFilterViaJSON',
                dataType: 'json',
                success: function (list) {
                    data(list.Data);
                    page(list.Page);
                    totalCount(list.TotalCount);
                },
                data: { limit: 6 },
                async: false
            });
        };
    return {
        Data: data,
        TotalCount: totalCount,
        Page: page,
        GoTo: goTo,
        LoadData: loadData
    };
})(); 
my.PriceListViewModel.LoadData();
ko.applyBindings(my.PriceListViewModel);
于 2012-09-07T13:23:28.033 に答える