延迟加载/延迟加载击倒模板,直到点击

Late loading/delay loading of knockout template until click

本文关键字:延迟加载      更新时间:2023-09-26

这是我的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>

使用计算值,例如:

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