Tengo un enlace personalizado KO que agrega un componente a la página (como elemento virtual pero no creo que esto importe) y luego le aplica un modelo de vista. El componente carga su plantilla a través de require desde el servidor.

Sin embargo, durante la carga, recibo un problema en el que se actualiza el enlace personalizado y elimino el elemento de la página (quiero que esté ordenado si no es necesario).

Esto da como resultado una condición de carrera: si la búsqueda astronómica de la plantilla no ha finalizado antes de que se eliminen los elementos cuando KO intenta aplicar el componente, no puede encontrar la etiqueta de cierre y arroja un error.

Me pregunto si hay algo que alguien pueda sugerir para aliviar el problema. Ya sé que no hay un mecanismo de devolución de llamada enapplyBindings y yo nopensar afterRenderCallback ayudará, ya que los errores antes de llegar tan lejos. Me preguntaba si hay una manera decancelar, detener o abortar el proceso y no hay

¿Algunas ideas?

Aquí hay unviolín Lo que demuestra mi problema.

Mi encuadernación personalizada se ve así:

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");
        }
      }
    }
  }

Está haciendo llamadas a una clase de controlador que se ve así:

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);
  }

El componente se carga mediante require:

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

Y una inicialización simplificada se parece a esto:

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

  ko.applyBindings(vm);

  vm.shouldBeBound(false);

En realidad, tengo algunas dependencias más complejas que establecen el indicador en falso después de que ha comenzado la inicialización.