【问题标题】:Is there some sort of callback available on ko.applyBindings?ko.applyBindings 上是否有某种可用的回调?
【发布时间】:2015-08-25 14:16:05
【问题描述】:

在我们当前的项目中使用,我们已经多次达到这一点。

我如何确保只有在页面上的所有绑定都已被 Knockout 应用后才执行某些 Javascript 代码?

在我的特定用例中,我使用if-bindings 来评估一些配置选项并决定是否应该渲染内部的元素(= 在 DOM 中)。只有在评估了这些if-bindings 之后,我才需要计算某个元素内的 DOM 节点的数量。显然,如果我计算得太早,if-bindings 还没有删除那些不需要的 DOM 节点,所以计算结果是错误的。

【问题讨论】:

  • 可能是用于根绑定的 afterRender 回调 (stackoverflow.com/questions/9306177/…) 对您有帮助吗?
  • 如果在 ko.applyBindings 上可用 - 是的。但它似乎只适用于某些特定的绑定。在正确应用所有适用的绑定后,我需要一个钩子,包括所有组件、子组件等。就像没有异步调用未完成并且页面“完成”和“准备就绪”时的状态一样。
  • 唯一出现在我脑海中的东西——你可以用包装模板绑定来包装你想要处理的绑定——就像在jsfiddle.net/Le3bw37p小提琴中一样——函数'ar'将在模板绑定内容将被渲染
  • 您可能应该包括对您的情况的实际复制。没有它,问题就轻松解决了:在applyBindings...
  • @Jeroen 这不是一个特定的代码问题,而是每个 Knockout 开发人员在大型项目中应用 Knockout 时迟早会遇到的问题。因此,将其视为一个通用问题,如何使用 Knockout.js 解决某个问题。

标签: knockout.js knockout.js


【解决方案1】:

ko.applyBindings()synchronous call,所以下一条语句只能在它完成后执行。如果您有淘汰组件,它们可以同步或异步加载。所以,例如

var vm = new ViewModel();
ko.applybindings(vm);
//
CountRenderedElements();

应该给你正确的结果。

【讨论】:

    【解决方案2】:

    这可能会有所帮助。您可以使用模板绑定包装您的绑定(并将任何其他绑定放入模板中)并传递“afterRender”处理程序。这个处理程序将在内容被渲染后被调用。 我已经美化了上面提到的jsfiddle(在评论中):

    var model = {
      afterRenderCallback: function() {
        // this method will be called after content rendered
        var divContent = document.getElementById("textdiv").innerHTML;
        alert(divContent);
      },
      txt: ko.observable("this text will be substituted in the div")
    };
    
    ko.applyBindings(model);
    .content {
        border: 1px solid red;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <script type="text/html" id="wrappingTemplate">
    <div id="textdiv" class="content" data-bind="text: txt"></div>
    </script>
    
    <!-- ko template: { name: 'wrappingTemplate', afterRender: afterRenderCallback } -->
    <!-- /ko-->

    【讨论】:

    • 好一个解释清楚+1。
    猜你喜欢
    • 2012-07-29
    • 2016-08-17
    • 1970-01-01
    • 2014-09-29
    • 2017-04-28
    • 2015-12-07
    • 1970-01-01
    • 2013-03-05
    • 2023-01-09
    相关资源
    最近更新 更多