我想使用挖空在外部元素中包含内部元素,这可能吗?
.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
我理解这个错误,因为外部模型不包含内部文本,因此事情崩溃了。
我的问题是,是否有一种适当/更好/正确的方法来拥有一个内部元素并让它在淘汰赛中发挥作用。
注意:我不希望 innerModel 成为 outerModel 的成员/子模型,因为它们只是出于布局目的而在此 HTML 布局中,但不一定相关。
任何帮助表示赞赏。
谢谢
- 通常,你
最好的选择是让内部的东西成为你外部的东西的属性,然后正常绑定(可能与
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>
但是,如果无法做到这一点,您可以向KO添加新绑定,该绑定显示"不要在此元素中绑定",如下所述:
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
。如果要改用"虚拟元素",请在绑定处理程序后添加以下行: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>