从淘汰视图模型访问 html 元素

Question

我创建了一个包含引导模式对话框的敲除组件，我正在注册和加载（作为 AMD 模块）如下：

// Register dialogs as components
ko.components.register('create-user-dialog', {
    viewModel: { require: 'Features/Users/Index/CreateController' },
    template: { require: 'text!Features/Users/Index/CreateDialog.html' }
});

模板 HTML 包含如下标签：

<div class="modal fade" id="create-user-modal" tabindex="-1" role="dialog">
...
</div>

淘汰视图模型扩展了一个基类，看起来像这样（打字稿）：

export = CreateController

class CreateController extends Controllers.BootstrapModalController {

    constructor() {
        super($('#create-user-modal'));
    }
}

class BootstrapModalController {
    public dialog: JQuery;

    constructor(dialog: JQuery) {
        // Save a reference to the modal element so we can 
        // show/hide the dialog from the controller
        this.dialog = dialog;
    }

    // Show the modal window
    showModal = () => {
        this.dialog.modal({
            show: true,
            backdrop: 'static'
        });
    }

    // Close the modal window
    closeModal = () => {
        this.dialog.modal('hide');
    }
}

最后，我在我的页面中使用组件如下：

<div data-bind="component: 'create-user-dialog'"></div>

这可行，但有点混乱，因为CreateController 在构造函数中做了一些我认为有点奇怪的事情——即使用一个 jquery 选择器，它与模板中的 html 紧密耦合。

在某种程度上，这是不可避免的，但我认为这可能会更好一些。如果可能的话，我希望 BootstrapModalController 基类能够自动确定与 Bootstrap 模态相对应的 DOM 元素......这样 showModal 和 closeModal 就可以工作，只要模板实际上包含引导模式对话框和后代不必在构造函数中显式传入 id 或 jquery 对象。

我认为它可能能够使用类似jQuery find 的方法在组件的HTML 模板中寻找具有CSS 类modal 的元素。但是，为了做到这一点，我需要能够获取 Knockout 绑定组件的视图模型所针对的 rootNode（即<div data-bind="component: 'create-user-dialog'"></div> 元素）。

有没有办法从该组件的 javascript 视图模型中计算出该组件的 html rootNode？

Answer 1

您可以使用自定义绑定，如http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html 文章中所述，以便使用 Knockout 包装 HTML/JS 元素，例如jquery 按钮绑定：

ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).button(options);
    }
};

用法：

data-bind="jqButton: { ...some options... }"

在自定义绑定中，您可以访问应用绑定的元素。

Answer 2

好的，所以答案似乎是使用绑定处理程序。我找到了this snippet，这似乎可以满足我的要求：

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

作者演示的：

<canvas width="100" height="60" data-bind="element: yourObservable"></canvas>

一切似乎都相当轻松......唯一的事情是，在我的情况下，我必须从元素创建一个 JQuery 对象，如下所示：

ko.bindingHandlers.element = {
    init: function(element, valueAccessor) {
      var value = valueAccessor();
      value($(element));
    }
};

感谢罗伯特的提示！