如果在返回模板之前删除元素，则Knockout组件将失败

我有一个KO自定义绑定，它为页面添加一个组件（作为虚拟元素，但我认为这不重要），然后将视图模型应用于它。该组件通过服务器的require来加载它的模板。

I have a KO custom binding which adds a component to the page (as a virtual element but i don't think this matters) and then applies a view model to it. The component loads it's template via require from the server.

但是在加载过程中我遇到了更新自定义绑定并从页面中删除元素的问题（我想要如果不需要的话，让它整理一下自己。）

However during load I am getting a problem where the custom binding is updated and removing the element from the page (I want to have it tidy it's self up if not required).

这会导致竞争条件 - 如果在删除元素之前模板的异步查找尚未完成KO尝试应用它无法找到结束标记的组件并抛出错误。

This results in a race condition - if the asychronous lookup for the template has not finished before the elements are removed when KO tries to apply the component it can't find the closing tag and throws an error.

我想知道是否有任何人可以建议缓解这个问题？我已经知道 applyBindings 上没有回调机制，而且我没有认为 afterRenderCallback 将有助于它在到达目前之前发生错误。我想知道是否有办法取消，停止或中止流程但没有。

I am wondering if there is any thing anyone can suggest to alleviate the problem? I already know there is no callback mechanism on applyBindings and I don't think afterRenderCallback will help as it errors before it gets that far. I wondered if there is a way to cancel, stop or abort the process and there isn't.

任何想法？

这是小提琴，它展示了我的问题。

Here is a fiddle which demonstrates my problem.

My自定义绑定如下所示：

My custom binding looks like this:

ko.bindingHandlers.customBinding = {
    update: function(element, valueAccessor){
      var $element = $(element)

      if(ko.unwrap(valueAccessor())){
        $element.data("controller", new CustomBindingController(element));
      } else {
        var controller = $element.data("controller");

        if(controller){
          controller.destroy();

          $element.removeData("controller");
        }
      }
    }
  }

它正在调用控制器类，如下所示：

It is making calls to a controller class which looks like this:

function CustomBindingController(element){
    var self = this,
    $element = $(element),
    $component;

    function init(){
      $component = $("<!-- ko component: { name: \"my-component\", params: $data } --><!-- /ko -->");

      $("#component-container").append($component);

      ko.applyBindings( { message: "Binding Applied!" }, $component[0]);

      self.destroy = destroy;
    }

    function destroy(){
      $component.remove();
    }

    init.call(self);
  }

组件通过require加载：

The component is loaded via require:

  ko.components.register("my-component", {
    //template: "<p data-bind=\"text: message\"></p>"
    template: { require: "text!component-template" }
  });

简化的初始化看起来像这样：

And a simplified initialisation looks something like this:

  var vm = { shouldBeBound: ko.observable(true) };

  ko.applyBindings(vm);

  vm.shouldBeBound(false);

实际上我有一些更复杂的依赖关系，它们在初始化开始后将标志设置为false。 / p>

In reality I have some more complex dependencies which are setting the flag to false after initialisation has begun.