Knockout.js - ko.mapping.fromJS - Visible Binding

Question

I am working on a website that updates values on the page every 5 seconds, it calls to a remote database and returns a MVC model through a Get Json call, and call

viewModel = ko.mapping.fromJS(model).

I am then updating this view model every 5 seconds using another Get call and call this mapping call then

 viewModel = ko.mapping.fromJS(model, viewModel). 

The bindings are correct on my HTML elements as the original model that is retrieved from the database is displayed on the screen but then when the IsVisible property on the model nothing happens, ie the table row should be set to invisible, and another should be set to visible.

On each update the model should be different, with rows set to visible or invisible along with other span's text updating, this part is working, and updates are showing on the page, just the visibility is not changing.

HTML exert of the visible invisible problem, with Javascript of the update call.

All variables from the Model are correctly called I cannot post the model up for the public.

<table class="SelectionTable" cellpadding="0" cellspacing="0">
    <tbody data-bind="foreach: { data: markets.Selections, as: 'selections' }">
       <tr class="Selection">
          <td><span data-bind='text: selections.Number, visible: selections.IsVisible'></span></td>
          <td><span data-bind='text: selections.Name, visible: selections.IsVisible'></span></td>
          <td><span data-bind='text: selections.CurrentPrice, visible: selections.IsVisible'></span></td>
          <td><span data-bind='text: selections.OpeningPrice, visible: selections.IsVisible'></span></td>
       </tr>
    </tbody>
</table>

<script type="text/javascript">
    var viewModel;
    var self;

    var getUpdates = setInterval(function () {
        $.getJSON(
            "/Home/Get", {},
            function (model) {
                viewModel = ko.mapping.fromJS(model, viewModel);
            });
    }, 5000);

    $(document).ready(
        function () {
            $.getJSON(
                "/Home/Get", {},
                function (model) {
                    viewModel = ko.mapping.fromJS(model);
                    bindViewModel();
                });
        });

    function bindViewModel() {
        ko.applyBindings(viewModel);
    }
</script>

Answer 1

I find that you sometimes need to provide an empty mapping when updating a viewmodel:

ko.mapping.fromJS(model, {}, viewModel);

Failing that, output the value of selections.IsVisible and make sure that it is in a format that can resolve to true or false.