durandaljs - 准备好后如何从小部件中查询 DOM 元素答案

【问题标题】：durandaljs - how to query a DOM element from a widget after readydurandaljs - 准备好后如何从小部件中查询 DOM 元素
【发布时间】：2013-06-21 22:43:28
【问题描述】：

我想在 durandaljs 小部件中查询一个元素，当它准备好时。如果我直接在数据绑定中使用选择器，将找不到元素：

html（无附加视图）：

<button id="myButton"></button>
<div data-bind="widget: { kind: 'myWidget', options: { btn: $('#myButton') } }"></div>

controller.js：

define(function (require) {
    var ctor = function (element, settings) {
        var btn = settings.options.btn;
        // btn = $('#myButton'); // this will work, but i'm not sure if the DOM is
                                 // currently ready in the constructor
        btn.on("click", function () {
           console.log("I want to be fired");
        });
    };

    return ctor;
});

在开始时从 durandal 小部件查询 DOM 元素的最佳方式是什么？

【问题讨论】：

标签： javascript jquery durandal

【解决方案1】：

我不确定 html 片段属于哪里，所以有两个略有不同的答案。

首先我建议你不要传入 btnas jQuery 对象 ({btn: $('myButton')}) ，当你不确定它是否已经存在时。最好传入一个选择器{btn: '#myButton'} 并让小部件弄清楚如何处理它。

您的小部件是否有自己的 view.html 并且在内部定义了按钮？如果是这种情况，您应该查看viewAttached 回调。

var ctor = function (element, settings) {
    this.btn = settings.options.btn;
};

ctor.prototype.viewAttached = function (view){
   var btn = $(this.btn, view);
   if ( btn.length > 0 ) {
       btn.on("click", function () {
       console.log("I want to be fired");
    });

   }

}

如果您的小部件没有自己的 view.html，那么您应该通过向设置对象添加一个值为 false 的视图属性来让小部件知道。

下面是 http://durandaljs.com/documentation/Creating-A-Widget/ 中解释这一点的段落。

注意：在某些情况下，您的小部件实际上可能不需要视图。也许它只是添加一些 jQuery 行为或将现有的 jQuery 插件应用到 dom 元素。要告诉 Durandal 没有要加载和绑定的视图，请在小部件的构造函数中向设置对象添加一个值为 false 的视图属性。

然而，在这种情况下，您只能在小部件被实例化时访问 DOM 中已经存在的元素，例如

var ctor = function (element, settings) {
    settings.view = false;
    this.btn = $(settings.options.btn);

    if ( this.btn.length > 0 ) {
        this.btn.on("click", function () {
            console.log("I want to be fired");
        });
    }
};

【讨论】：