durandaljs - 如何在準備好後從小部件查詢DOM元素

Question

我想在準備好的時候查詢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元素的最佳方法是什麼？

Answer 1

我不確定html片段屬於哪裏，所以有兩個略有不同的答案。

首先，我建議你不要傳遞btn作爲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沒有加載和綁定的視圖，在widget的構造函數中將值屬性設置爲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"); 
     }); 
    } 
};