リンクする必要があるホームページにログインボックスがあります。ログインボックスにはid="loginhtml があり、このようなリンクがある<li><a href="#login">Login</a></li>ので、クリックするとそのログイン div に移動しますが、更新を押すか、アンカー付きのリンクに直接移動すると、Uncaught Error: No route matched the URL 'login'
Ember でこの単純なタスクを達成する方法を知っている人はいますか? ありがとう。
アップデート
私のコードは次のようになります。
ナビゲーション
<ul class="nav navbar-nav pull-right">
<li><a href="#login">Signup</a></li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
そして、私が持っているページの下のどこかに
<section id="login">
-- some content
</section>
問題は、Ember が URL のハッシュ部分を使用してアプリケーションの現在の状態を保存していたことです。自然に、2 つの解決策が考えられます。
1 - * Ember が URL のハッシュ部分を使用しないようにします。* したがって、EmberのHTML5 履歴ロケーション実装を使用します。これにより、yourdomain.com/users/1/なしのような URL になります#。
App.Router.reopen({
location: 'history'
});
2 - この手法を使用しないでください。代わりに jQueryを使用して、関連する部分へのスクロールを行います。これは次のようになります。
<ul class="nav navbar-nav pull-right">
<li><a {{action jumpToLogin}}>Signup</a></li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
そして、対応するビューで：
App.YourView = Ember.View.extend({
jumpToLogin : function(){
$('html, body').animate({
scrollTop: $("#login").offset().top
}, 2000);
}
});
これは、この小さな機能の多くのコードに見えるかもしれませんが、これはより優れたユーザー エクスペリエンスだと思いますよね? 実際には、このロジックを mixin に抽出することでこのアプローチを改善できるため、何度も繰り返す必要はありません。
App.ScrollToMixin = Ember.Mixin.create({
scrollDuration : 2000, //default
scrollTo : function(selector){
$('html, body').animate({
scrollTop: $(selector).offset().top
}, this.get("scrollDuration");
)
});
// mix it into your View
App.YourView = Ember.View.extend(App.ScrollToMixin, {});
テンプレートで使用します。
<ul class="nav navbar-nav pull-right">
<li><a {{action scrollTo "login"}}>Signup</a></li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
PS:ミックスインでコードをテストしていません。String "login" がまさにそのようにアクション ハンドラに渡されるかどうか、私には絶対にわかりません。したがって、テストする必要があります:-)
アクションを介してクエリ パラメータをサポートするように拡張することもできるコンポーネントを使用します。
var ScrollToComponent = Ember.Component.extend({
tagName: 'a',
anchor: '',
scrollTo: function () {
var anchor = this.get('anchor'),
$el = Ember.$(anchor);
if ($el) {
Ember.$('body').scrollTop($el.offset().top);
}
}.on('click')
});
これはあなたがそれを使用する方法です：
{{#scroll-to anchor=anchor}}Jump To Anchor{{/scroll-to}}
はどこanchorですか#my-id。
編集
これは、これを行う ember-cli アドオンですhttps://www.npmjs.com/package/ember-scroll-to
以前の回答のほとんどの問題は、「href ハッシュ/フラグメント/ID」を含む「リンク」をクリックしたときにルートが変更されない場合、ember ルーターが以前のほとんどを実行するために必要なフックを起動しないことです。ソリューション。
これは、ユーザーが「ナビゲーション/インデックスまたはリンクのリスト」からページの関連セクション (利用規約やページについてなど) にジャンプできるようにする複数の「見出し」を持つページで明らかです。
このような状況では、ルートが変更されていなくてもクエリ パラメータが変更されている場合でも、ルーターがそのフックを起動するように、ember では「完全な遷移を選択する」必要があります。詳細については、「完全移行へのオプトイン」を参照してください。
注:この「オプトイン」を使用したときに発生する唯一の文書化されたフックは、モデル フックです。
この「完全な移行」オプトインは、並べ替えやフィルタリングなどのクエリ パラメータの変更でモデルを更新する場合にのみ使用することを意図していたと思います。
確かに、これはちょっとしたハックのように思えますが、上記の「オプトイン」を使用して、問題の div /anchor タグまでスクロールできます。将来的には、オプトインは他のより適切なフックも起動できるようになる可能性があります (setupController は特に便利です)。
また、他の誰かがグーグルしている場合。また、ルートで「willTransition」および「didTransition」アクションも使用してみました。悲しいことに、他のルートから遷移するときに発射されましたが、同じルートからそれ自体に遷移するときにも発射に失敗します。
最後に、ブラウザーを問題の ID までスクロールさせるには、dom を完全にロードする必要があることは明らかなはずです (最初はそうではありませんでした)。Ember.run.schedule('afterRender',そのため、コールバック内でスクロールを実行する必要があります。
参考までに、現時点で一般的に利用可能な最新の ember-cli、ember.js、および ember-data を使用しています。
app/router.js
this.route('about', {
queryParams: ['anchor']
});
ルート/about.js
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
anchor: {
refreshModel: true
}
},
model: function(params) {
var aboutController = this.controllerFor('about');
aboutController.set('anchorLocation', params.anchor);
}
});
アプリ/コントローラー/about.js
import Ember from "ember";
export default Ember.Controller.extend({
queryParams: ['anchor'],
anchor: '',
showAnchor: function() {
var _this = this;
Ember.run.schedule('afterRender', function scrollToAnchor(){
var elem = Ember.$(_this.anchorLocation);
elem.get(0).scrollIntoView(true);
});
}.observes('anchorLocation'),
});
app/templates/footer.js
<ul>
<li>
{{#link-to "about" (query-params anchor='#contact')}}Contact{{/link-to}}
</li>
<li>
{{#link-to "about" (query-params anchor='#support')}}Support{{/link-to}}
</li>
<li>
{{#link-to "about" (query-params anchor='#team')}}Team{{/link-to}}
</li>
</ul>
kroovy's answer からの単純なアクション アプローチを使用して、Ember でこれを機能させました。
Ember が API を変更したため、kroovys のアプローチを少し変更する必要がありました。
次の 2 つの点が変更されました。
Emberバージョン1.7.0で動作させる方法は次のとおりです
Ember ハンドルバー テンプレートnew.hbs
{{!-- Navigation --}}
<ul>
<li {{action 'goToLink' "new" "#part1"}}>Part 1</li>
<li {{action 'goToLink' "new" "#part2"}}>Part 2</li>
</ul>
{{!-- content --}}
<div id="part1" class="row">...</div>
<div id="part2" class="row">...</div>
Ember App.Controller NewController.js
App.NewController = Ember.ArrayController.extend({
actions: {
goToLink: function(item, anchor) {
console.log('NewController > goToLink');
var $elem = $(anchor);
var $scrollTo = $('body').scrollTop($elem.offset().top);
this.transitionToRoute(item.route).then( $scrollTo);
}
}
});
Ember 3 でこの問題を解決しようとしている人がいれば、解決策があります。他の人が言及したのと同じ queryParams アプローチを使用しますが、コントローラーで何も動作させることができませんでした。私が見つけた唯一のアプローチは、ルート + jQuery.ready 関数を使用することでした。
// route/application.js
import Route from '@ember/routing/route';
import $ from 'jquery';
export default Route.extend({
queryParams: {
anchor: null
},
setupController: function(controller, context, params) {
let anchor = params.queryParams.anchor;
// On ready, find the anchor offset and go there
$().ready(function() {
let anchorOffset = $("#" + anchor).offset().top
window.scrollTo(0, anchorOffset);
});
}
});次に、テンプレートで、通常どおり queryParams を使用します。
{{#link-to "path.to.page" (query-params anchor="my-anchor")}}My Link{{/link-to}}ここでの唯一の問題は、毎回ページをリロードしていることですが、それ以外は機能しているようです-誰かの役に立てば幸いです.