0

データがロードされるのを待ってからHTMLコンテンツを印刷するにはどうすればよいですか？

HTMLマークアップは次のとおりです。

<div id="item-details-content">
    <input type="hidden" id="item-id" value="@id" data-bind=""/>
    <div class="item-list" data-bind="init: itemPage.loadcontent(@id), with: itemPage.item">
        <div class="item-container clearfix">
            <div class="item-content clearfix">
                <div class="title" data-bind="text: Title">

JSマークアップは次のとおりです。

var itemViewModel = {
    item: {},
    loadcontent: function (getID) {
        $.ajax({
            url: '/api/item/details/' + getID,
            dataType: 'json',
            success: function (data) {
                itemViewModel.item = data;
            }
        });
    }
};

var mainViewModel = {
    indexPage: indexViewModel,
    itemPage: itemViewModel
};

観察

  1. 変数がko.observable()最終的にデータを表示する場合、問題はそれを更新したくないということです。
4

1 に答える 1

1

このようなものが機能するはずです。

<div id="item-details-content" data-bind="if: isLoaded">
....
</div>


and javascript:

var itemViewModel = {
    item: {},
    loadcontent: function (getID) {
        $.ajax({
            url: '/api/item/details/' + getID,
            dataType: 'json',
            success: function (data) {
                itemViewModel.item = data;
                mainViewModel.isLoaded(true);
            }
        });
    }
};

var mainViewModel = {
    indexPage: indexViewModel,
    itemPage: itemViewModel,
    isLoaded: ko.observable(false)
};

別のアプローチは、＃item-details-content divで非表示のクラスを使用し、$（'＃item-details-content'）。show（）;を実行することです。

    <div id="item-details-content" class="hidden">
    ....
   </div>


success: function (data) {
    itemViewModel.item = data;
    $('#item-details-content').show();
}
于 2012-08-14T16:59:41.533 に答える