Ember.js 余烬组件绑定未传播

我要用余烬组件来结束一些奇怪的事情。我看到的第一个问题是类属性绑定不起作用。我还目睹了一些属性在第一次发生变异后是如何被解除绑定的。这只是我正在构建的一个简单的选项卡组件。这是一份复印件

JS

模板

  <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>

{{outlet}}
{{my tabs model=model initialTab=initialTab selectedTab=selectedTab}
所选选项卡：{{selectedTab}

{{my tab name=“control”initialTab=initialTab selectedTab=selectedTab}
{{{#模型中的每个项目}
{{my tab name=item initialTab=controller.initialTab selectedTab=controller.selectedTab}}
{{/每个}}


{{isSelected}}

好的，我不得不就这件事咨询另一位恩贝里诺

归根结底是因为有嵌套的li元素。在组件上定义标记名时，它会向组件注入该标记。不幸的是，它正在破坏ember/html/某处/Idunno

App.MyTabComponent=Ember.Component.extend({
标记名：“li”，
.....
});

是的，一定是双

李

打破了局面。我不知道到底是怎么

我刚刚注释掉了

标记名：'li'，

行，模板中的

{{{isSelected}

值开始显示正确的内容

---

我正在研究它，bind attr有些疯狂，当你把它去掉的时候，它工作得很好，但是它在使用它的过程中不知何故破坏了它。。。是的，这真的很奇怪。

  <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>

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

});

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