Question

How to wait for data to load and then print html content?

Here is HTML markup:

<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">

Here is JS markup:

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
};

Observations

1. When the variable is ko.observable() it eventually shows the data, problem is I don’t want it to update.

Answer 1

Something like this should work.

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

another approach would be to use a hidden class on your #item-details-content div and just do $(‘#item-details-content’).show();

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


success: function (data) {
    itemViewModel.item = data;
    $('#item-details-content').show();
}