1

Ember に問題がありますが、Handlebars 内か Ember コンポーネント内か、どこに問題があるのか​​よくわかりません。

問題は、コントローラー オブジェクト コンテキストが引数として ember コンポーネントに渡される場合、コンテキストが未定義であることです。ただし、コンポーネントの直前のハンドルバー テンプレート内のオブジェクトをログに記録すると、正しいオブジェクトが表示されます (index および components/component-button テンプレートを参照)。

テンプレート

<script type="text/x-handlebars" data-template-name="application">
    <h1>Fiddling</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{#each sections}}
    {{#each buttons}}
        {{log 'source in template' ../source}}
        {{component-button source=../source options=this}}
    {{/each}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="components/component-button">
    {{log 'source in component' source}}
    <button {{action 'options.action'}}>{{options.label}}</button>
</script>

応用

App = Ember.Application.create( {} );

/**
 * Component: Button
 */
App.ButtonComponent = Ember.Component.extend( {

  tagName: 'button',

  click: function click() {
    this.get( 'source' ).send( this.get( 'options.action' ) );
  }

} );

/**
 * Controller: Application
 */
App.IndexController = Ember.ObjectController.extend( {

  sections: Ember.A(),

  actions: {
    doSomething: function() {
      window.console.log( 'hooray!' );
    }
  },

  setup: function setup() {
    var source = this;

    var section = Ember.Object.create( {
      source: source,
      buttons: Ember.A( [
        Ember.Object.create( {
          label: 'Do something!',
          action: 'doSomething'
        } )
      ] )
    } );

    this.sections.pushObject( section );

  }.on( 'init' )

} );

App.IndexRoute = Ember.Route.extend( {
  model: function() {
      return { name: 'foo' };
  }
} );

フィドルを見る

4

1 に答える 1

0

../sourceeach ループで参照する代わりに、次のようにします。

<script type="text/x-handlebars" data-template-name="index">
    {{#each section in sections}}
        {{#each section.buttons}}
            {{log 'source in template' section.source}}
            {{component-button source=section.source options=this}}
        {{/each}}
    {{/each}}
</script>

最初に各「セクション」が定義され、ネストされた各ステートメントでセクションを参照するために使用できます。

于 2014-09-28T16:46:54.630 に答える