javascript - 在 Knockout JS 中保存对 DOM 元素的引用的正确模式

Question

我知道在 Knockout 模型中处理 DOM 内容是一种不好的做法。但是保存对模型中元素的引用的正确模式是什么？

假设我有一个菜单模型:

MenuModel = function()
{
    var self = this;
    self.buttons = [{ text: "set color" }, { text: "set border" }];
};

现在，这个菜单代表一个 DOM 元素，菜单中的每个按钮都可以操作所代表元素的 DOM。

这是存储元素引用的正确模式吗？

MenuModel = function(el)
{
    var self = this;
    self.element = el;
    self.buttons = [{ text: "set color" }, { text: "set border" }];
};

因此，当单击菜单按钮时，该按钮的父模型 (MenuModel) 保存对该元素的引用。

我知道解决方案是为所表示的元素提供 Knockout 模型并更改该模型，以便元素根据模型的更改而更改。但这对我来说不切实际，此时我确实需要直接更改元素 DOM。

Answer 1

为什么要在 JS 中保存 DOM 元素的引用？我认为这是一种反模式。看看这个MVVM graphic from Wikipedia 。显然，您的 MenuModel 并不是真正的模型，而是一个 viewModel；它不保存数据，只保存表示逻辑。这些模型将是您从后端获取的 JSON/XML 数据，并最终通过构造函数转换为命名对象实例。 viewModel (JS) 和 View (HTML) 之间的流程通过数据绑定(bind) 进行绑定(bind)。如果您坚持 knockout 倡导者的模式，您应该保持如下简单:

<ul data-bind="foreach: buttons">
  <li data-bind="text: text"></li>
</ul>

您可以简单地向每个按钮对象添加一个操作属性，并传递参数 yourFunction(data, e) 来操作您的 View ，如下面的代码片段所示。如果您需要访问 View 层次结构中的其他元素，您可以随时将类/id 附加到它，然后使用 ko.dataFor(elem) 或 ko.contextFor 引用其数据(元素)。

<ul data-bind="foreach: buttons">
  <li data-bind="text: text, click: action"></li>
</ul>

为了性能/代码可读性，您可能不希望将事件绑定(bind)附加到每个元素(尤其是在列表中)。在这种情况下，请参阅 unobtrusive event handling 上的 Knockout 部分。或其他解决方案，例如 R.Niemeyer 的插件 Knockout delegated events .

那么回答但是保存对模型中元素的引用的正确模式是什么？ - 我会说，没有。在我编写的所有 Knockout 代码中，我想不出有任何需要这样做的情况。如果这还不能令人信服，请阅读 What is separation of concerns?和 loose coupling .