javascript - knockout JS 内部和外部绑定(bind)

Question

我想使用 knockout 在外部元素中包含内部元素，这是否可行？

HTML:

<div id='id1'>
    <span data-bind="text: outerText()"></span>
    <div id='id2'>
        <span data-bind="text: innerText()"></span>
    </div>
</div>

JavaScript:

var outerModel = function() {
    this.outerText = ko.observable("Outer Model - Outer Text");
};
ko.applyBindings(new outerModel(), document.getElementById('id1'));

var innerModel = function() {
    this.innerText = ko.observable("Inner Model - Inner Text");
};
ko.applyBindings(new innerModel(), document.getElementById('id2'));

这给了我一个错误:

ReferenceError: Unable to process binding "text: function(){return innerText() }"
Message: 'innerText' is undefined

我理解这个错误，因为外部模型不包含内部文本，因此事情崩溃了。

我的问题是是否有一种适当/更好/正确的方法来拥有内部元素并使其在 knockout 中发挥作用。

注意:我不希望innerModel 成为outerModel 的成员/子级，因为它们只是出于布局目的而在此HTML 布局中，但不一定相关。

感谢任何帮助。

谢谢

Answer 1

1. 通常，最好的选择是将内部内容作为外部内容的属性，然后正常绑定(bind)(可能使用 with)。例如:

   var innerModel = function() {
       this.innerText = ko.observable("Inner Model - Inner Text");
   };
   var outerModel = function() {
       this.outerText = ko.observable("Outer Model - Outer Text");
       this.inner = ko.observable(new innerModel());
   };
   ko.applyBindings(new outerModel(), document.getElementById('id1'));
   

   ...然后:

   <div id='id1'>
       <span data-bind="text: outerText()"></span>
       <div id='id2' data-bind="with: inner">
           <span data-bind="text: innerText()"></span>
       </div>
   </div>
   

   示例:

       var innerModel = function() {
           this.innerText = ko.observable("Inner Model - Inner Text");
       };
       var outerModel = function() {
           this.outerText = ko.observable("Outer Model - Outer Text");
           this.inner = ko.observable(new innerModel());
       };
       ko.applyBindings(new outerModel(), document.getElementById('id1'));

       <div id='id1'>
           <span data-bind="text: outerText()"></span>
           <div id='id2' data-bind="with: inner">
               <span data-bind="text: innerText()"></span>
           </div>
       </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

2. 但在不可能的情况下，您可以向 KO 添加一个新的绑定(bind)，表示“不要在此元素内绑定(bind)”，如 described here :

   ko.bindingHandlers.stopBinding = {
       init: function () {
           return { controlsDescendantBindings: true };
       }
   };
   

   用法:

   <div id='id1'>
       <span data-bind="text: outerText()"></span>
       <div data-bind="stopBinding: true">
           <div id='id2'>
               <span data-bind="text: innerText()"></span>
           </div>
       </div>
   </div>
   

   ...然后在您的问题中执行两个 applyBindings 。 (请注意，我在您的 id2 div 周围添加了一个 div。如果您想使用“虚拟元素”，请在绑定(bind)处理程序:

   ko.virtualElements.allowedBindings.stopBinding = true;
   

   ...以便能够将其与虚拟元素一起使用。)

   示例:

       // Somewhere where you'll only do it once
       ko.bindingHandlers.stopBinding = {
           init: function () {
               return { controlsDescendantBindings: true };
           }
       };
   
       // Then:
       var outerModel = function() {
           this.outerText = ko.observable("Outer Model - Outer Text");
       };
       var innerModel = function() {
           this.innerText = ko.observable("Inner Model - Inner Text");
       };
       ko.applyBindings(new outerModel(), document.getElementById('id1'));
       ko.applyBindings(new innerModel(), document.getElementById('id2'));

       <div id='id1'>
           <span data-bind="text: outerText()"></span>
           <div data-bind="stopBinding: true">
               <div id='id2'>
                   <span data-bind="text: innerText()"></span>
               </div>
           </div>
       </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>