2

主にjQueryで書かれた通常のクライアント側アプリがあります。ある特定のページで Ractive を使用していますが、非常に便利です。ただし、Ractive が初期化された後に DOM が再レンダリングされたため、古い jQuery イベントはすべて関連付けられなくなりました。Ractive がレンダリングされた後にイベントを設定しようとしましたが、奇妙な動作が発生し、DOM 要素などが失われました。これらの古い jQuery ハンドラーはどこでセットアップできますか、またはそれは可能ですか? Ractive レンダリングは非同期で行われていますか? その場合、リッスンする必要があるイベントはありますか?

私はもう試した

$('.button').click(someHandler);  // <--- Here

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
});

と

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
    $('.button').click(someHandler); // <--- Also here
});
4

2 に答える 2

6

Ractive のイベント処理を使用するという Rich の提案 (これは Ractive のやり方と最も一致しています) を超えて、完全なオプションを使用することもできます。

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    complete: function(){
        $('.button').click(...)

        // or better, use ractive's selector 
        // to limit search to the template.
        // You could use this outside of `complete`
        // as well.
        $( this.find('.button') ).click(...)
    }
});

要素を探すのではなく、宣言的にデコレータを使用して、要素がいつ作成された (および破棄された) かを知り、それへの参照を渡すことができます.. テンプレート内:

<button decorator='initbutton'/>

次にコードで：

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    decorators: {
        initbutton: function(node){
            var $button = $(node)
            $button.on('click', ...)

            return { teardown: function(){ 
                //if you need to do anything to teardown...
                $button.off('click', ...) 
            }
        }
    }
});
于 2014-02-22T16:44:00.413 に答える
3

Ractive は同期的にレンダリングするため、2 番目の例は機能するはずです (ただし、最初の例は確実に機能しません) -.buttonターゲットにしている要素がレンダリングされていないセクション内にある場合を除きます。

{{#someCondition}}
  <button class='button'>click me</button>
{{/someCondition}}

この例では、someConditionが偽の場合、jQuery が対象とする DOM 要素はありません。

Ractive でこれを行うより慣用的な方法は次のとおりです。

テンプレート：

{{#someCondition}}
  <button on-click='doSomething'>click me</button>
{{/someCondition}}

コード：

ractive = new Ractive({...});
ractive.on('doSomething', someHandler);

そうすれば、要素がレンダリングされたかどうかを心配する必要はありません。

(ただし、ハンドラーを変更する必要があることに注意してください -thisはractiveインスタンスを意味eventし、ハンドラーに渡されるオブジェクトはネイティブ DOM イベントではなく Ractive イベントです - ネイティブ イベントを取得するにはevent.original.)

.button要素をすぐにレンダリングする必要があり (つまり、偽のセクションにない)、最初のレンダリング後に jQueryがまだそれを見つけられない場合は、興味深いバグを見つけたことを意味します...お知らせください!

于 2014-02-21T20:55:54.137 に答える