4

私は、EmberJS 上に構築されたDiscourse ( http://www.discourse.org/ ) を使用しており、新しいトピックを開くときなど、URL が変更されるたびに観察しようとしています。たとえば、ここで currentPath を観察するための答えを見てきました: EmberJS 1.0.0-pre.4 でルート遷移を検出する

App.ApplicationController = Ember.Controller.extend({

  routeChanged: function(){
    // the currentPath has changed;
  }.observes('currentPath');
});

しかし、パスの変更だけでなく、URL の変更を検出しようとしています。その回答のコメントで述べたように：

このオブザーバーは、パスが同じままであるため、 たとえば /pages/1からへの遷移時に起動しません。/pages/2pages.page.index

私がやりたいのは、実際には、によってトリガーされない前述の遷移を検出することですobserves('currentPath')。これらの線に沿ってthis.get('currentPath');、関数内で行うと、次のようなものが得られますtopic.fromParamsが、実際にはURLパスに興味があります/t/this-is-my-url-slug.

簡単に言うと、アプリが次の場所からいつ移動するかを検出したいと思います。

/t/this-is-my-url-slug

に

/t/another-url-slug

パスをキャプチャできるようにします。/t/another-url-slug

申し訳ありませんが、私は少し Ember n00b であり、唯一の経験は Discourse です。何か案は？

4

3 に答える 3

7

これを行うために Ember 固有のものは必要ありません。ハッシュまたはプッシュステートのどちらを使用しているかに応じて、使用できます...

$(window).on('hashchange', function(){
  console.log("Hash URL is " + location.hash.substr(1));
  // Do stuff
});

また

$(window).on('popstate', function(e) {
  console.log("Hash URL is " + window.location.pathname);
  // Do stuff
});
于 2013-05-16T04:23:14.750 に答える
3

ソリューションは Discourse にかなり固有のものです (EmberJS ほど一般的ではありません) が、Discourse には URL 関連の関数 ( /components/url.js) に対して呼び出される URL 名前空間があります。そこにはrouteTo(path)、新しいルートがロードされるたびに呼び出される関数があります。そのため、そこに独自の関数を追加することができました。これにより、次のことが保証されます。

  • 私の関数は、談話ルートが変更されるたびに呼び出されます
  • pathそれ自体（つまり、URL）をキャプチャできます
于 2013-05-16T18:56:06.883 に答える
0

Luke Melia の回答では、ブラウザーの [戻る] ボタンを使用するときに問題を引き起こすことなく、メモリ リークを防ぐために分解を行っていません。

これがアプリでグローバルに必要であり、このイベントを使用して 1 つの関数を呼び出すだけであれば、OK です。ただし、ルートを離れるときに off() を呼び出したい場合 (不要な場合は破棄する必要があります)、ember でバグが発生します。特にブラウザの戻るボタンを使用しようとした場合。

より良い方法は、イベント バスを利用して、戻るボタンで問題が発生しないイベントにイベントをプロキシすることです。

    $(window).on('hashchange', function(){ 
        //Light weight, just a trigger
        $(window).trigger('yourCustomEventName');
    });

次に、ハッシュの変更をリッスンする場合は、カスタム イベントをリッスンし、不要になったら破棄します。

ルート A に入る:

    $(window).on('yourCustomEventName', function(){ 
        // Do the heavy lifting
        functionforA();
    });

ルート A を離れる:

    $(window).off('yourCustomEventName');

ルート B に入る:

    $(window).on('yourCustomEventName', function(){ 
        // Do the heavy lifting maybe it's different?
        functionforB();
    });

ルート B を離れる:

    $(window).off('yourCustomEventName');
于 2014-02-19T01:22:27.147 に答える