淘汰赛中的自定义元素应该如何与其合作者沟通？

Question

我很难找到一种让自定义元素与周围环境交流的好方法。到目前为止，我的 google-karma 很低，我还没有找到任何描述 Knockout 中自定义元素的良好架构的东西。

与往常一样，什么才是好的架构取决于 ;-)

更新： I created a fiddle trying to explain what I have in mind.

就我而言：

• 我希望自定义元素真正具有自主性。
• 它应该在添加到视图时正常工作，没有错误。
• 它根本不应该与任何服务或任何其他外部组件直接通信。

给定一个带有一个保存按钮的自定义元素，只有在某些事情发生变化后才应该激活它，我们可以像这样传递一个协调器：

function CustomElement(params) {
    var coordinator = params.coordinator;
    var enabled = this.enabled = ko.observable(false);

    this.save = function() {
        coordinator.save();
    }

    coordinator.onchange(function(hasChanges) {
        enabled(hasChanges);
    });
}

父视图模型定义协调器的地方：

function ParentView() {
    this.coordinator = new CustomElementCoordinator();
}

并通过参数传递：

<custom-element params="coordinator: coordinator"></custom-element>

那我在想协调器应该和自定义元素在同一个目录下定义：

custom-elements
    - custom-element
        - coordinator.js
        - model.js
        - template.html

你怎么看？我是在做某事，还是我处理不当？

Answer 1

在关于跨组件通信的相当大的辩论中，我赞同越简单越好的观点。

DOM 元素之间最古老、最可行的通信方式是什么（最终会变成哪些组件）？为什么，当然是事件！

您的组件应该使用 Knockout 来处理内部状态。但是，添加事件 API 可以在兼容性方面创造奇迹。如果有一天你的整个应用程序都不是由 Knockout 驱动的（相信我，这很可能会发生），你的组件不会完全没用。

很简单：

$(window).on("myEvent.myComponent", this.handleMyEvent) //listen to the world
$("#myNode").trigger("finished.myComponent", ["param1", "param2"]) // talk to the world

如果您想在注入组件时抓住它的节点元素，请查看createViewModel 样式，根据这个问题：How to access custom element in a Knockout component?