0

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

html（无附加视图）：

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

控制器.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 元素的最佳方法是什么？

4

1 回答 1

1

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

首先，当您不确定它是否已经存在时，我建议您不要传入btnas jQuery object ( ) 。{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");
        });
    }
};
于 2013-06-21T14:43:28.460 回答