后期加载/延迟加载淘汰模板，直到单击

Question

这是我的HTML

这是ko组件。 该页面将加载，并按预期加载组件。 首先将visible：绑定设置为false，然后单击按钮更改以显示此模式。 但是，$ root.configurator.thisRow（）或... thisTab（）没有任何值，并且只有在调用$ root.configurator.storeRows（tab，row）的按钮单击事件触发后才能具有值。

如何延迟加载此模板，直到... thisRow（）和... thisTab（）具有值之后？ 注意：不能使用jQuery

<div class="config-div">
<div class="my-table">

        <div data-bind="text: $root.configurator.thisRow().description.substring(0,5)"></div>
        <div data-bind="attr: {id: $root.configurator.thisTab().name.substring(0,4) +'-'+ $root.configurator.thisRow().description.substring(0,5)">
            <div data-bind="text: $root.configurator.initConfigSorted(thisTab(), thisRow())"></div>
            <!--ko foreach: {data: $root.configurator.config.blah, as: 'thing'}-->
            <div class="config-list">
                <div class="row single-row  list-group-item">
                    <div class="col-md-6">
                        <p data-bind="text: thing.name"></p>
                    </div>
                </div>
            </div>

            <!--/ko-->
        </div>
   <button data-bind="click: function(){ $root.configurator.toggleConfig() }">Submit</button>

Answer 1

使用计算值，例如：

this.templateReady = ko.computed(function() {
   return yourToggle() && thisRow() && thisTab();
})