挖空 JS 内部和外部绑定

knockout JS inner and outer bindings

本文关键字：外部 绑定 内部 JS 挖空      更新时间：2023-09-26

我想使用挖空在外部元素中包含内部元素，这可能吗？

.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 布局中，但不一定相关。

任何帮助表示赞赏。

谢谢

    通常，你

  1. 最好的选择是让内部的东西成为你外部的东西的属性，然后正常绑定（可能与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添加新绑定，该绑定显示"不要在此元素中绑定"，如下所述：

    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>

相关文章：