ember.js で URL ハッシュ コンテキスト検索を実行しようとしています。これまでのところ、ドキュメントを読んだりチュートリアルを見たりすることはかなりできましたが、今は行き詰まっています。
問題:
私がアクセス/#/search/movie/bob
すると、映画を検索する必要があることが検出され、TMDB (映画データベース) API でクエリが実行され、映画がプルされます。ブラウザのアドレスバーをに変更bob
すると、再度ルート遷移して検索を行います。lord
この問題は、状態で HTML 検索入力フィールドを使用して再度検索すると発生します/search/:type/:query
。statemanager はルートを再度呼び出しません。
これが私のルーターです:
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
showSearchResults: Ember.Route.transitionTo('searchResults'),
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('search');
}
}),
searchResults: Ember.Route.extend({
route: '/search/:type/:query',
serialize: function(router, params) {
// App.SearchModel gets its values set by
// the bindAttr helper in the handlebar
// template
return {
type: App.SearchModel.get('type'),
query: App.SearchModel.get('inputValue')
}
},
connectOutlets: function(router, params) {
var type = null;
var query = null;
var searchController = router.get('searchController');
if (params && params.type && params.query) {
type = params.type;
query = params.query;
// make sure the SearchModel has its
// properties set to be able to display them
// properly in the search fields
App.SearchModel.set('type', type);
App.SearchModel.set('inputValue', query)
} else {
type = App.SearchModel.get('type');
query = App.SearchModel.get('inputValue');
}
// display the search bar again
router.get('applicationController').connectOutlet('search');
// perform a search against an API
searchController.search(type, query, function(data) {
router.get('applicationController').connectOutlet('search_results', 'searchResults', data);
});
}
})
})
});
ハンドルバーのテンプレートは次のとおりです。
<script type="text/x-handlebars" data-template-name="search-view">
{% verbatim %}
<form class="form-inline">
{{view Ember.TextField valueBinding="App.SearchModel.inputValue" class="span7" placeholder="Search Movies - TV Shows ..." }}
<input type="hidden" {{bindAttr value="App.SearchModel.type"}} />
<button type="submit" class="btn btn-large" {{action showSearchResults on="click"}}>Search</button>
</form>
{% endverbatim %}
</script>
送信ボタンをクリックするとshowSearchResults
、以前に検索を完了していない限り、呼び出して遷移します。/
これは、初期状態にある場合は正しく発生しますが、状態にある場合は正しく発生しません/search/:type/:query
。
これを再び遷移させるには、ハッシュの場所を操作する必要がありますか? または、検索ボタンをクリックすると状態が変わるように変更する必要があることを ember に伝えるより良い慣用的な方法はあります:query
か?
アップデート:
私はそれを機能させましたが、それは本当にハッキーに感じます..これを行うより良い方法があるに違いありませんか? これが私の解決策です:
showSearchResults: function(router, e, b) {
// set the hash location so it knows to transition
// to searchResults correctly .. this feels very
// hacky ..
var hashLocation = Ember.HashLocation.create();
hashLocation.setURL('/search/%@/%@'.fmt(
App.SearchModel.get('type'),
App.SearchModel.get('inputValue')
));
router.location = hashLocation;
router.transitionTo('searchResults');
}