Geek Answers Handbook

Hide the page until the knockout binding and all the garters are completed.

I have a page with a knockout model, inside the knockout model there are such submodules:

  function firstSubViewModel(listData) {
         var self = this;
         self.myAttribute = ko.observable();
         function that sets stuff()
         return self;
 }

var MyViewModel = function () {
        var self = this;
        // load the sub-viewmodels used on the page
        self.foo= new firstSubViewModel(params);
        self.bar= new secondSubViewModel(otherparams);
}
vm = new MyViewModel();
ko.applyBindings(vm);

It's just psuedocode, actually there are a bunch of submodels, each of which has a bunch of its own attributes and other called functions. First I would like to hide this page, and then when all the data from all the submodules is presented, I will show the main page. So far I have tried setting:

<div id = "main" style = "display: none" data-bind = "visible: true"></div>

, , . - , , , , , myAttribute , , . .

<div id = "main" style = "display: none" data-bind = "visible: vm.foo.myAttribute"></div>

, , , ,

  <div data-bind = "visible:vm.foo.myAttribute && vm.bar.myAttribute && vm.bar.otherAttribute && etc.."></div>

, ?

+4
2

. , true, .

<div id="main" style="display: none" data-bind="visible: allDone"></div>


function MainViewModel() {
    var self = this;

    self.foo = ko.observable();
    self.bar = new SubModel();
    // all other observables and sub-viewmodels here

    self.allDone = ko.computed(function () {
        // now just subscribe to all kinds of observables
        var foo = self.foo(),
            bar = self.bar.myAttribute();

        // ...and do value checks
        return foo > "" && bar > "";
    });
}

allDone , , .

+4

, ( , ).

<div id="content" style="display: none" data-bind="style: {display: 'block'}">
    <!-- YOUR CONTENT HERE -->
</div>

Knockout , . Knockout View Model, .

+2

More articles:


All Articles