1

私は、Ember コンポーネントの奇妙さを解消しています。私が見ている最初の問題は、クラス属性バインディングが機能していないことです。また、プロパティが最初に変異した後、どのようにバインドされていないかを目撃しています。これは、私が構築している単純なタブ コンポーネントです。ここに再現がありますhttp://emberjs.jsbin.com/uDUfONi/2/edit

JS

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.IndexController = Ember.Controller.extend({
  selectedTab: '',

  initialTab: function () {
    var name = this.get( 'model' ).get('firstObject');
    this.set( 'selectedTab', name );
    return name;
  }.property()

});


App.MyTabComponent = Ember.Component.extend({
  tagName: 'li',
  isSelected: false,

  tabChanged: function () {
    if ( this.get( 'selectedTab' ) !== this.get( 'name' ) ) {
      this.set( 'isSelected', false );
    } else {
      this.set( 'isSelected', true );
    }
  }.observes('selectedTab'),

  checkInitialTab: function () { 
    if ( this.get( 'initialTab' ) === this.get( 'name' ) ) {
      this.set( 'isSelected', true);
    } else {
      this.set( 'isSelected', false );
    }
  }.on( 'didInsertElement' ),

  actions: {
    selectTab: function () {
      if ( this.get( 'selectedTab' ) !== this.get( 'name' ) ) {
        this.set( 'selectedTab',  this.get( 'name' ) );
      }
    }
  }
});

テンプレート

  <script type="text/x-handlebars">


    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">


    {{my-tabs model=model initialTab=initialTab selectedTab=selectedTab}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/my-tabs">
  Selected Tab: {{selectedTab}}
  <ul class="nav nav-tabs">
    {{my-tab name="control" initialTab=initialTab selectedTab=selectedTab}}
    {{#each item in model}}
      {{my-tab name=item initialTab=controller.initialTab selectedTab=controller.selectedTab}}
    {{/each}}
  </ul>

  </script>
  <script type="text/x-handlebars" data-template-name="components/my-tab">
    <li {{action selectTab name}} {{bind-attr class="isSelected:active"}}>
    {{isSelected}}
      <a href="#">{{name}}</a>
    </li>

  </script>
4

2 に答える 2

0

わかりました、これについて別のエンベリーノと相談しなければなりませんでした。

ネストされたli要素があったという事実に行き着きました。コンポーネントに tagName を定義すると、そのタグを持つコンポーネントが注入されます。残念ながら、ember/html/somewhere/Iduunno が壊れていました。

http://emberjs.jsbin.com/uDUfONi/10/edit

<script type="text/x-handlebars" data-template-name="components/my-tab">
  <a>{{name}}</a>
</script>

App.MyTabComponent = Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['isSelected:active', ':clickable'],
  isSelected: function(){
    return this.get('selectedTab') === this.get('name');
  }.property('selectedTab', 'name'),

  click: function () {
    this.set('selectedTab', this.get('name'));
  }

});

li を 2 回定義する代わりに:

<script type="text/x-handlebars" data-template-name="components/my-tab2">
  <li {{action selectTab name}}>
   {{isSelected}}
   <a href>{{name}}</a>
  </li>
</script>

App.MyTabComponent = Ember.Component.extend({
  tagName: 'li',
  .....
});
于 2013-10-28T18:07:53.293 に答える