将元素放入淘汰视图模型中答案

【问题标题】：Put element in Knockout View Model将元素放入淘汰视图模型中
【发布时间】：2012-09-07 17:29:32
【问题描述】：

我怎样才能绑定一个元素，使元素本身在我的视图模型中？我不想使用document.getElementByID。

HTML

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

视图模型

viewModel.someDiv = ko.observable();

示例

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

编辑：

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

【问题讨论】：

标签： knockout.js

【解决方案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

【讨论】：

【解决方案2】：

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

更多关于你想要达到的目标的信息将有助于给出一个有用的答案。

【讨论】：

OP 确实说他不想直接从视图模型访问视图：“我不想使用 document.getElementByID”
“所以元素本身在我的视图模型中”对我来说意味着视图可以从视图模型中获得。

【解决方案3】：

给你通过document.getElementById('')返回的元素设置一个observable比如

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

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

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

【讨论】：