knockout.js - 隐藏页面直到 knockout 绑定(bind)和所有子绑定(bind)完成

Question

我的页面有一个 knockout 模型，在 knockout 模型中有子模型，如下所示:

  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);

这只是伪代码，实际上有一堆子模型，每个子模型都有一堆自己的属性和其他被调用的函数。
我想先隐藏那个页面，然后当所有子模型的所有数据都在里面时，我会显示主页。到目前为止，我已经尝试设置:

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

这会隐藏页面，直到绑定(bind)主模型然后显示它。但是，如果任何子模型需要一段时间才能加载，则它们在显示页面时不会完成，例如如果该属性未填充，则子模型中基于 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>

有没有更清洁的方法来观察并等待它们全部被填充？

Answer 1

解决方案很简单。在你的主视图模型上有一个 observable，它变成 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 > "";
    });
}

knockout 将更新 allDone随着订阅属性的出现，在某个时间点，整体返回值将是 true。