淘汰模板的延迟加载/延迟加载，直到点击答案

【问题标题】：Late loading/delay loading of knockout template until click淘汰模板的延迟加载/延迟加载，直到点击
【发布时间】：2015-08-28 06:17:45
【问题描述】：

这是我的 HTML

这是一个 ko 组件。页面加载，并按照您的预期加载组件。 visible: binding 设置为 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>

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

使用计算值，例如类似：

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

【讨论】：

thisRow() 和 thisTab() 在 ViewModel 上，所以我可以在需要时获取它们，但它们仅在单击时分配，因此我可以从长表中获取 THIS 选项卡和 THIS 行在具有相同行的多个选项卡上。即员工：姓名，电话，学生：姓名，电话，人员：姓名，电话。所以我不需要这个功能，甚至不需要切换。切换只是一种显示/隐藏的东西。我需要延迟加载该html，也许是一个ajax来获取它？有没有内置的方法可以做到这一点？
是的，计算也是视图模型的一部分 - 所以我建议您将这个“模板就绪”逻辑定义为计算，而不是“手动”思考，例如使用延迟等。跨度>
你能详细说明一下吗？我没有遵循您的意思，而且您的代码目前对我来说太抽象了，无法真正遵循您的意思。
对不起，如果不清楚 - 我的主要观点是不要考虑“我需要延迟加载模板”，因为这可能不是“淘汰方式”。您的模板可见性和/或文本绑定应仅在绑定数据后显示。看起来问题的一部分是您正在执行 JS 调用数据，如果数据为空，则会失败：thisRow().description.substring(0,5)。如果你用你的代码开始一个 jsfiddle，我可以演示一下。