0

ルーティング/アプリロジックを処理するためにSammy.jsを使用し、テンプレートを作成するためにHandlebars.jsを使用しています。UIを動的にするためにいくつかの簡単なjQueryイベントを設定したいと思います（要素の切り替えなど）。例えば：

$("#availability").click( function(e) {
    console.log("hi2");
    e.preventDefault();
});

現在、jQueryイベントをSammy.jsアプリ内に配置することでこれを行うことができますが、これは非常に面倒です。

this.get('#q=:query', function(context) {
    var query = context.params.query,
    loadOptions =   {
                      type: 'get', 
                      dataType: 'json',
                      data: {query: query},
                      cache: CACHE_ENABLED
                    };

    context.load("search.php", loadOptions)
            .then(function(products) {
                 context.query = query;
                 context.products = products.hits.hits;                         
                 return context;
            })
            .partial('/js/templates/search.hb')
            .replace('body')
            .then( function () {
                $("#availability").click( function(e) {
                    console.log("hi2");
                    e.preventDefault();
                });
            });
});

Handlebarsテンプレート自体の内部またはヘルパーを使用してこれらのタイプのjQueryイベントを初期化する方法はありますか？いくつかのカスタムヘルパーを登録しようとしましたが、イベントが発生することはありません。

「UIロジック」は、メインのSammy.jsコードが乱雑になり、読みにくくなるため、メインのアプリケーションロジックとは別にしたいと思います。

4

1 に答える 1

0

Handlebars テンプレートにインライン jQuery を含める方法はまだ見つかりませんが、それを Sammy アプリに含めるより良い方法を見つけました。Sammy Helper のコードを削除してそれを呼び出すことで、アプリの主要部分をすっきりさせることができます。

var app = Sammy("body", function() {

    this.use('Handlebars', 'hb');

    this.helpers({
         jq_clickEvents: function() {
             $("#availability").click( function(e) {
                    console.log("hi2");
                    e.preventDefault();
              });

         }
    });

    this.get('#q=:query', function(context) {
        var query = context.params.query,
        loadOptions =   {
                  type: 'get', 
                  dataType: 'json',
                  data: {query: query},
                  cache: CACHE_ENABLED
                };

         context.load("search.php", loadOptions)
                .then(function(products) {
                    context.query = query;
                    context.products = products.hits.hits;                         
                    return context;
                 })
                .partial('/js/templates/search.hb')
                .replace('body')
                .then('jq_clickEvents');
     });
});
于 2012-07-30T14:06:24.157 に答える