javascript - 由于尚未收到数据，因此无法查看内容

Question

如何等待数据加载然后打印 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()最终显示数据时，问题是我不希望它更新。

Answer 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();
}