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フラグメントがどこに属しているのかわからないので、2つのわずかに異なる答えがあります。

まず、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 がない場合は、view プロパティを設定オブジェクトに 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 に答える