1

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

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

更新： 我创建了一个小提琴试图解释我的想法。

就我而言：

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

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

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

你怎么看？我是在做某事，还是我错误地处理了这个问题？

4

1 回答 1

0

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

在 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样式，根据这个问题：如何访问 Knockout 组件中的自定义元素？

于 2015-03-11T12:30:24.847 回答