Knockout show/hide not working with durandal

Question

I have used knockout if binding to show/hide a div based on value from model.

var model = {
        // Model-----------------------------------------------
        router: router,
        chosen: chosen,
        selectedItems: [],
        selectedItemsList: [],
        p: {
            Id: null,
            IsValid : false
        },

         activate: function (id) {
            var self = this;
            var apiRoute = 'test/id';
            return api.GetModel(apiRoute, null, self);
         },
         approve: function ()
         {
            return self.activate(1);
         }
 };

 <!-- ko if: p.IsValid -->
    <div></div>
<!-- /ko -->

This works when the application is loaded first time. But to refresh the view I am calling self.activate() in a button click. After calling self.activate(), the show/hide functionality stops working.

Can someone help me identify what is the issue?

var model = { // Model----------------------------------------------- router: router, chosen: chosen, selectedItems: [], selectedItemsList: [], p: { Id: null, IsValid : false }, activate: function (id) { var self = this; var apiRoute = 'test/id'; return api.GetModel(apiRoute, null, self); }, approve: function () { return self.activate(1); } };  <div></div>  — VJ1243
For what reason would you need to reactivate the view to refresh it? — Brett

Gildas.Tambo Gildas.Tambo · Accepted Answer · 2014-07-09T15:53:21

You can just use the "visible" binding

in the viewModel

   viewModel ={
     activate: activate,
     title: 'Bewertung',
     attached: attached,
     someVal : ko.observable(true)
   }


  return viewModel

in the view

 <div data-bind="visible: someVal"></div>

to change the visibility you can access "someVal"like this viewModel.someVal(false) from attached for example

Knockout show/hide not working with durandal

2 Answers