从所需的 AMD viewModel 访问 Knockout 组件 DOM

Question

我以这种方式加载我的 Knockout 组件：

ko.components.register("example", {
    viewModel: {require: "widgets/example"},
    template:  {require: "text!widgets/example.html"}
});

与example.js（极其简化）：

"use strict";

define(["knockout"], function(ko) {

    function ExampleWidgetViewModel(params) {

        this.editedText = ko.observable("Example");
    }

    return ExampleWidgetViewModel;
});

和example.html：

<div id="example-dlg", data-bind="text: editedText"></div>

该组件像往常一样被调用 <example></example> 并且一切正常。但我想访问 DOM 以删除模板中 id 的需要。已尝试 the method from the documentation 将 example.js 更改为：

"use strict";

define(["knockout"], function(ko) {

    function ExampleWidgetViewModel(params, componentInfo) {

        this.editedText = ko.observable("Example");
    }

    return {createViewModel: ExampleWidgetViewModel};
});

但它抱怨找不到 editedText。像这样的其他变体也有同样的问题：

"use strict";

define(["knockout"], function(ko) {

    function creaExample(params, componentInfo) {
        let ExampleWidgetViewModel = (params) => {

             this.editedText = ko.observable("Example");
        }
        return ExampleWidgetViewModel;
    }
    return {createViewModel: creaExample};
});

你能提供一个工作示例吗？谢谢！

Answer 1

没有什么比寻求帮助来找到解决方案更好的了...我错误地调用了视图模型。正确的 example.js 文件是：

"use strict";

define(["jquery", "knockout"], function($, ko) {

    function factory(params, componentInfo) {
        function ViewModel() {

            // To show how to access the component external div
            console.log($(componentInfo.element.firstChild).attr("id"));

            // To show it can correctly access parameters
            this.editedText = params.oneParameter;
        }
        return new ViewModel();
    }
    return {createViewModel: factory};
});

从所需的 AMD viewModel 访问 Knockout 组件 DOM

Accessing Knockout component DOM from required AMD viewModel

knockout.js

requirejs

amd