将元素放在Knockout View Model中

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">

请参阅小提琴：link

Answer 2

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

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

Answer 3

通过document.getElementById（''）设置一个observable到你得到的元素，例如

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

我用一些if语句创建了一个小提琴，以显示与你的例子类似的东西。

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