gpt4 book ai didi

knockout.js - 在也使用 Knockout 的站点中使用时,我的 Knockout/RequireJS 小部件如何绑定(bind)到正确的上下文?

转载 作者:行者123 更新时间:2023-12-01 05:20:36 24 4
gpt4 key购买 nike

设想

我正在使用 RequireJS 和 KnockoutJS 构建一个小部件。小部件调用 ko.applyBindings(widgetViewModel, thisWidget)当它被实例化时。无论站点是否使用 Knockout 本身,该小部件都应该能够在站点中使用。

问题

当我将小部件放入使用 Knockout 的站点时,如果站点调用 ko.applyBindings(siteViewModel),则会将错误的 View 模型应用于小部件。小部件设置后。小部件获得 siteViewModel而不是想要的 widgetViewModel .

到目前为止我尝试过的

  • 重新排序对 ko.applyBindings(siteViewModel) 的调用在小部件设置之前发生。 这可行但并不理想,因为它限制了我的小部件的调用方式。
  • 为我的小部件添加一个自定义绑定(bind),该绑定(bind)应用正确的绑定(bind)上下文(即 widgetViewModel 到我的小部件并返回 {controlsDescendantBindings: true}; 不幸的是,该站点使用的 Knockout 实例与我的小部件使用的不同(因为of Require) 所以我需要访问站点的实例,可能通过查看全局命名空间。
  • 最佳答案

    我认为您对第二个解决方案很接近。你可以做的是有一个自定义绑定(bind),就像这个页面上提供的示例 http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

    但是正如你所说,如果他们已经在网站上使用了 knockout ,你需要这个绑定(bind)在那个版本的 knockout 上,所以你应该把它包装在这样的 if(ko) 中......

    if(ko){
    ko.bindingHandlers.allowBindings = {
    init: function(elem, valueAccessor) {
    // Let bindings proceed as normal *only if* my value is false
    var shouldAllowBindings = ko.unwrap(valueAccessor());
    return { controlsDescendantBindings: !shouldAllowBindings };
    }
    };
    }

    然后因为您使用的是 requirejs,您可以将您的 knockout 版本映射到 ko 以外的其他内容,例如 ko2 或其他。
    define(["knockout", "jquery"], function (ko2, $) {

    var myViewModel = {
    SomeComponentLevelBinding: ko2.observable()
    };

    ko2.applyBindings(myViewModel, document.getElementById('someElementId'));
    }

    那么你的html可能看起来像这样......
    <body>
    <div>
    <span data-bind="text: SomeSiteLevelBinding"></span>
    </div>
    <div data-bind="allowBindings: false">
    <div id="someElementId">
    <span data-bind="text:SomeComponentLevelBinding"></span>
    </div>
    </div>
    </body>

    因为该站点已经使用了 knockout,并且我们向该实例添加了 allowBindings 绑定(bind),所以我们阻止该站点的 knockout 版本控制该 div 内的任何内容。然后,因为我们确实使用组件的 knockout 版本从我们的组件将绑定(bind)应用到其中的 div,所以我们应该在同一页面上有 2 个 knockout 版本一起玩得很好。

    如果他们在页面上没有 knockout ,这也应该没问题,因为如果他们没有,我们不会添加 allowBindings 绑定(bind),并且因为我们只将绑定(bind)应用到其中的 div,data-bind 属性与 allowBindings:false在那种情况下被忽略。

    关于knockout.js - 在也使用 Knockout 的站点中使用时,我的 Knockout/RequireJS 小部件如何绑定(bind)到正确的上下文?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16969018/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com