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

好的，不得不就此咨询另一位 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',
  .....
});
于 2013-10-28T18:07:53.293 回答
0

是的，这绝对是双重li破坏了事物。我不知道具体怎么...

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

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

于 2013-10-29T19:14:59.443 回答