javascript - 从 knockout View 模型访问 html 元素

Question

我创建了一个包含引导模式对话框的 knockout 组件，我正在注册并加载该组件(作为 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>

knockout View 模型扩展了一个基类，看起来像这样( typescript ):

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只要模板实际上包含引导模式对话框，并且后代不必在构造函数中显式传递 ids 或 jquery 对象，就可以工作。

我认为它可能可以使用类似 jQuery find 的东西寻找 CSS 类元素的方法 modal在组件的 HTML 模板中。然而，为了做到这一点，我需要能够获取 Knockout 绑定(bind)组件 View 模型的 rootNode(即 <div data-bind="component: 'create-user-dialog'"></div> 元素)。

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

Answer 1

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

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

用法:

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

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