knockout.js - 将元素放入淘汰视图模型中

Question

如何绑定元素以使元素本身位于我的视图模型中？我不想使用document.getElementByID.

html

<div id="someDiv" data-bind="self: someDiv" />

视图模型

viewModel.someDiv = ko.observable();

例子

(viewModel.someDiv() === document.getElementByID('someDiv')) === true;

编辑：

一些上下文...我在调用图形库的包装层中订阅了另一个视图模型。我想绑定图形库呈现的元素。

Answer 1

您可以编写自定义绑定来设置您的 observable：

ko.bindingHandlers.bindElement = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        value(element);
    }

    };

<div id="someDiv" data-bind="bindElement: myElement">

见小提琴：链接

Answer 2

直接从视图模型访问视图违背了 MVVM 的分离原则。也许更好的是使用自定义绑定处理程序作为一种行为 - 绑定处理程序init和update函数将使您能够访问 DOM 元素本身。这样，可以以声明的方式从视图中添加行为。

有关您正在尝试实现的确切目标的更多信息将有助于提供有用的答案。

Answer 3

为您通过 document.getElementById('') 返回的元素设置一个 observable，例如

viewModel.someDiv = ko.observable(document.getElementById('someDiv'));

我用几个 if 语句创建了一个小提琴，以显示与您的示例类似的内容。

http://jsfiddle.net/Rynan/DnXrd/