2

基本的な機能が組み込まれたアプリがあります。私は、機能を追加することはしていません。この場合、現在使用している単純なボタンをlinkToビューに変換する必要があります。問題は、一方を他方に変換し、リンクをそのまま維持する方法がわからないことです。

この変換を行うにはどうすればよいですか？これが私が今持っているコードです：

<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
    {{#linkTo "account" account}}
        <img {{bindAttr src="account.icon"}} />
    {{/linkTo}}
{{/each}}
</script>

これが私が持っているコードです：

<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
    {{#view "Social.AccountButtonView"}}
        <img {{bindAttr src="account.icon"}} />
    {{/view}}
{{/each}}
</script>

Social.AccountButtonView = Ember.View.extend({
    tagName: 'a',
    classNames: ['item-account'],
    click: function(){
        // do something
    }
});

ビューのクリックハンドラーの上に構築していると思いますが、繰り返されるアイテムへの参照を渡す方法や、ビュー内の正しいルートを参照する方法がわかりません。

助けてください？

アップデート1

#/accounts/4最初のバージョンは、設定したルーターに基づいた値でhref属性をレンダリングします。

Social.Router.map(function() {
    this.resource('accounts', function(){
        this.resource('account', { path: ':account_id'});
    });
});

現在のコードをビューに変換するとき、linkToが提供する機能をどのように模倣しますか？

4

1 に答える 1

1

accountハンドルバーテンプレートでのプロパティバインディングを定義できます。このバインディングは次のように機能します。

<script type="text/x-handlebars">
    <h1>App</h1> 
    {{#each item in controller}}
        {{#view App.AccountView accountBinding="item"}}
            <a {{bindAttr href="view.account.url"}} target="_blank">
                {{view.account.name}}
            </a>
        {{/view}}
    {{/each}}
</script>

を追加accountBindingしたので、一般的なルールはpropertyNameとBindingサフィックスとしてです。また、ビューにプロパティを追加すると、そのプロパティに直接アクセスできなくなり、代わりにview.propertyName上記のようにアクセスする必要があることに注意してください。

ヘルパーViewを使用するときは、クラスが必要であることに注意してください。{{view}}

window.App = Em.Application.create();
App.AccountView = Em.View.extend(); // this must exist
App.ApplicationRoute = Em.Route.extend({
    model: function() {
        return [
            {id: 1, name: 'Ember.js', url: 'http://emberjs.com'}, 
            {id: 2, name: 'Toronto Ember.js', url: 'http://torontoemberjs.com'}, 
            {id: 3, name: 'JS Fiddle', url: 'http://jsfiddle.com'}];    
    }
})

ワーキングフィドル： http： //jsfiddle.net/schawaska/PFxHx/

アップデート1への対応：

私は同じようなシナリオに陥り、{{linkTo}}ヘルパーを模倣するための子ビューを作成することになりました。私はそれが最良の実装であるかどうかを本当に知りません/考えていません。あなたはここで私の以前のコードを見ることができます：http：//jsfiddle.net/schawaska/SqhJB/

その時、私はApplicationView：内に子ビューを作成していました。

App.ApplicationView = Em.View.extend({
  templateName: 'application',
  NavbarView: Em.View.extend({
    init: function() {
      this._super();
      this.set('controller', this.get('parentView.controller').controllerFor('navbar'))
    },
    selectedRouteName: 'home',
    gotoRoute: function(e) {
      this.set('selectedRouteName', e.routeName);
      this.get('controller.target.router').transitionTo(e.routePath);
    },
    templateName: 'navbar',
    MenuItemView: Em.View.extend({
      templateName:'menu-item',
      tagName: 'li',
      classNameBindings: 'IsActive:active'.w(),
      IsActive: function() {
        return this.get('item.routeName') === this.get('parentView.selectedRouteName');
      }.property('item', 'parentView.selectedRouteName')
    })
  })
});

そして私のハンドルバーは次のようになります：

<script type="text/x-handlebars" data-template-name="menu-item">
  <a {{action gotoRoute item on="click" target="view.parentView"}}>
  {{item.displayText}}
  </a>
</script>

<script type="text/x-handlebars" data-template-name="navbar">
  <ul class="left">
    {{#each item in controller}}
      {{view view.MenuItemView itemBinding="item"}}
    {{/each}}
  </ul>
</script>

申し訳ありませんが、これ以上の回答はできません。これは私がその時に思いついたものであり、それ以来それに触れていません。私が言ったように、私はこれがそれを処理する方法ではないと思います。{{linkTo}}ヘルパーのソースコードを調べてみると、独自の実装のベースとなる可能性のあるモジュール式でエレガントな実装が表示されます。私はあなたが探している部分はhref次のように定義されているプロパティだと思います：

var LinkView = Em.View.extend({
...
    attributeBindings: ['href', 'title'],   
    ... 
    href: Ember.computed(function() {
      var router = this.get('router');
      return router.generate.apply(router, args(this, router));
    })
...
});

だから、そこからあなたはそれがどのように機能するかを理解し、あなた自身で何かを実装することができると思います。それが役に立ったら教えてください。

于 2013-02-26T16:31:44.753 に答える