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

我理解错误，因为外部模型不包含innertext，因此事情崩溃了。

我的问题是，是否有一个正确/更好/正确的方法来拥有一个内部元素并让它在淘汰赛中发挥作用。

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

任何帮助表示感谢。

由于

Answer 1

通常最好的办法是让内部东西成为外部东西的属性然后正常绑定（可能与with）。 E.g：

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>

示例：

＆＃13;

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

＆＃13;

    <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>

＆＃13;

但是在不可能的情况下，您可以向KO添加一个新的绑定，表示“不要在此元素中绑定”＃34;作为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。（请注意，我在div id2周围添加了div。如果您想使用＆＃34;虚拟元素＆＃34;请在绑定处理程序后添加此行：< / p>

ko.virtualElements.allowedBindings.stopBinding = true;

...允许将其与虚拟元素一起使用。）

示例：

＆＃13;

    // 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'));

＆＃13;

    <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>

＆＃13;

淘汰JS内外绑定

1 个答案: