knockout.js observableArray changes not reflecting in UI

Question

This is my model

var ViewModel =
{
    results_page: ko.observableArray(),
    show_result: ko.observable(true),
    load_page: function (data, event) { setupPage(event.currentTarget.children[0].innerHTML) }
}

I'm using observableArray to populate the following list from data.

function setupPage(page_index) {

    //some code goes here

    $.get(url, function (data) {
        data = JSON.parse(data);
        if (data.result || false) {    
            ViewModel.results_page([]);
            var page = [];
            for (i = 0; i < result.length; i++) {    

                    //some code goes here

                    page.push(result[i]);                   
                }
            }
            ViewModel.results_page(page);      
        }
    });
}

<ul id="results" data-bind="visible: show_result, foreach: results_page">
    <li style="margin-top: 0px; cursor: pointer;">
        <span class="divider marker">
            <img alt="" data-bind="attr:{src:'/images/markers/' + $index() + '-green.png'}">
        </span>
        <a data-bind="text: description"></a>
        <span data-bind="text: distance + ' mi.'"></span>
        <p data-bind="text: address"></p>
        <p data-bind="text: city + ', ' + province"></p>
        <span class="divider arrow">
            <span>»</span>
        </span>
    </li>
</ul>

and using this list to trigger paging

<ol data-bind="foreach: new Array(pages_count())">
    <li data-bind="click: $root.load_page">
        <a data-bind="text: $index() + 1"></a>
    </li>
</ol>

It update the view with change in result_page for first request but after that it do not update view when result_page changes. I have tried to find some answer but no luck so far.

I'm new to knockout so let me know if there are scope of improvements.

Answer 1

First of all make sure that your server side code is returning correct data. Open any browser's js debugger and look at errors.

I'm not sure what exactly wrong with your code, but I'm made simplified version which works almost the same way as yours. I hope it will help to understand your problem.

HTML:

<ul data-bind="visible: results_page().length > 0, foreach: results_page">
    <li>
        <span data-bind="text: description"></span>
    </li>
</ul>

<ol data-bind="foreach: pages_count()">
    <li data-bind="click: $root.load_page.bind($data, $index() + 1)">
        <a href="javascript:;" data-bind="text: $index() + 1"></a>
    </li>
</ol>

JS:

var ViewModel = {
    results_page: ko.observableArray(),
    show_result: ko.observable(false),
    load_page: function(pageIndex, test) {
        // load data by jquery...
        var pageData = [
            { description: 'description 1 of page ' + pageIndex },
            { description: 'description 2 of page ' + pageIndex }
        ];

        ViewModel.results_page(pageData);
        ViewModel.show_result(pageData.length > 0)
    },
    pages_count: function() {
        return new Array(3);
    }
} 

ko.applyBindings(ViewModel);

jsfiddle