7

ルーターでメニュー リンクの配列を設定し、#each を使用してテンプレートでレンダリングする必要があります。しかし、#linkTo ヘルパーが変数を認識しなかったようです。どうすればこれを解決できますか?

ルーター:

Lite.DashboardRoute = Em.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('application').set('mainControls', [ {path: 'widgets.new', name: 'Add', classes: 'btn btn-success icon-ok-sign'} ])
  }
})

アプリケーション テンプレートでのリンク レンダリング:

{{#each link in mainControls}}
  {{#linkTo link.route class=link.classes}} {{link.name}} {{/linkTo}}
{{/each}}

エラーメッセージ：

ember.debug.js:51 Error: assertion failed: The route link.route was not found

残り火バージョン:

// Version: v1.0.0-pre.4
// Last commit: 855db1a (2013-01-17 23:06:53 -0800)
4

4 に答える 4

7

ケンのオプションにまだ苦労している場合は、次のようなことを試してみてください。

{{#each link in mainControls}}
    <a {{action "goToLink" link}} {{bindAttr class="link.classes"}}>
        {{link.name}}
    </a>
{{/each}}

そして、アクションを処理するために goToLink 関数が必要になります。コレクションに配置することもできますが、そうしない場合は、ルート ハンドラーにバブルアップすることになっているため、理論的には非常に簡単になります。

App.MyRoute = Ember.Route.extend({
    // ... stuff ...

    actions: {
            goToLink: function(item) {
                this.transitionTo(item.route);
            }
    }
});

アクションについて詳しくは、http: //emberjs.com/guides/templates/actions/をご覧ください。

アップデート

最新かつ最高の Ember を使用して、フィドルを作成しました。

私が発見したいくつかの技術的な制限のため、上記の提案を少し変更しました。

具体的には、ルートは、ルートによって内部的に作成されたコントローラーのアクションのみを処理できるようです。これはナビゲーション メニューの問題です。経路を変更しているのに、まだ画面上にあるからです。

Handlebars の "render" ヘルパーを使用してメニューをレンダリングするように切り替えた場合、どの Router もそのアクションを処理しようとしていないようです。 ただし、現在のルーターは、コントローラーの「送信」のために常にバブル チェーンに接続されているようです。そのため、コントローラーからルーターまでのチェーンでイベントを送信するだけで、ルーティングの至福が得られます。

ここでフィドルを見つけることができます：http://jsfiddle.net/Malkyne/fh3qK/

更新 2

これは、同じフィドルの別のバージョンです。コントローラーがリレーを行う必要なく、(奇妙なことに文書化されていない) ApplicationRouteを使用してアクションを直接処理するだけです: http://jsfiddle.net/Malkyne/ydTWZ/

于 2013-02-16T11:44:06.453 に答える
4

linkTo ヘルパー内で変数を使用することはできません。代わりに、アンカー タグで bindAttr を使用する必要があります

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>
于 2013-02-11T17:50:19.763 に答える
0

このスレッドはそれほど最近のものではなく、Ember の最新バージョンがこの問題に対して別の解決策を提示しているかどうかはわかりませんが、Ember バージョン 1.11 では問題なく動作します。

解決策は のインラインバージョンですlink-to。

activeこれはヘルパーと同じように機能し (はい、現在のルートに応じてクラスを切り替えます)、動的パラメーターを渡すことができます。著者の状況をシミュレートすると、次のようになります。

component.js

mainControls: [
  { path: 'widgets.new' },
  { name: 'Add' },
  { classes: 'btn btn-success icon-ok-sign' }
]

コンポーネント.hbs

{{#each link in mainControls}}
  {{link-to link.name link.route class=link.classes}}
{{/each}}

このアプローチの詳細については、こちらを参照してください。

于 2016-10-06T19:22:32.487 に答える