Question

I’m using KnockoutJS and loading my view model via ajax. Before the load completes, I’d like to show a “Loading…” message, and if no data is loaded, I’d like to show a “No results.” message. My initial attempt looks like this:

<ul data-bind="template: { name: 'mentions-template', foreach: mentions.data }">
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>


<script type="text/javascript">

    var viewModel = {
        mentions: {
            loaded: ko.observable(false),
            data: ko.observableArray()
        }
    }

    function loadData() {
       $.post(action, function(result) {
           viewModel.mentions.data = ko.mapping.fromJS(result);
           viewModel.mentions.loaded(true);
           ko.applyBindings(viewModel);
       });   
    } 

    ko.applyBindings(viewModel);
    loadData();    
</script>

I expected that the first li element would only show if viewModel.mentions.loaded was false and viewModel.mentions.data contained some items, and that the second li would show up until viewModel.mentions.loaded had been set to false, but both items are displayed at all times. What am I doing wrong?

Answer 1

When you have these static items inside of the ul your list, they don’t actually get bound, as Knockout just processes each item in the array.

One way to achieve what you want, would be to do:

<ul>
    <!-- ko template: { name: 'mentions-template', foreach: mentions.data } -->
    <!-- /ko -->
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>

Sample: http://jsfiddle.net/rniemeyer/gw7bM/