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

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>

Are you saying that the visible code never works, neither on the initial data load nor on the subsequent updates? — Paul Manzotti, Jul 08 '13 at 12:37
Sorry, the orginal call it works and shows the correct rows, but it is the subsequent update calls that it does not hide the currently visible but now set to invisible rows, or show the orginally hidden, but now set to visible rows. — Ben Sharpe, Jul 08 '13 at 12:41

Paul Manzotti · Accepted Answer · 2013-12-08T12:21:46.133

2

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.

edited Dec 08 '13 at 12:21

answered Jul 08 '13 at 13:06

Paul Manzotti

5,107
21
27

"empty mapping" worked for me, the question remains: why or when? – Stefan Oct 23 '13 at 09:30
just run ko.mapping.fromJS(model, {}, viewModel) without setting viewModel equal to it. Not only is it redundant in this case, but passing viewModel as the 3rd param does just that. The empty {} simply means to use an empty custom mapping. – beauXjames Dec 08 '13 at 01:32
Sorry, I meant I didn't understand why I have to sometimes pass in an empty mapping to make this work. You're right about not needing to assign the result to view model though, missed that! – Paul Manzotti Dec 08 '13 at 12:21

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

1 Answers1

Linked