Question

我正在使用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>

Answer 1

好的，不得不在这个问题上咨询另一个Emberino。

归结为嵌套的li元素。当您在组件上定义tagName时，它会使用该标记注入组件。不幸的是它破坏了ember / html / somewhere / Idunno。

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：

<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',
  .....
});

Answer 2

是的，绝对是双li 以某种方式打破了事情。我不知道究竟是怎么......

我刚评论了tagName : 'li',行，模板中的{{isSelected}}值开始显示正确的内容。

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

Ember组件绑定不传播

2 个答案: