灰烬组件绑定不传播

我用Ember组件过关了一些奇怪的东西。我看到的第一个问题是类属性绑定不起作用。我还目睹了一些物业，他们在第一次变异后如何被解禁。这只是我正在构建的一个简单的标签组件。这里有一个摄制http://emberjs.jsbin.com/uDUfONi/2/edit 灰烬组件绑定不传播

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>

来源

2013-10-27 Chad

我寻找到它，有些事情是会疯狂的结合，ATTR，当你剥离出来做工精细，但它在... HTTP与它在某种程度上打破它一路上：/ /emberjs.jsbin.com/uDUfONi/3/edit – Kingpin2k

是的，这真的很奇怪。 – Chad

好了，对这个与另一个Emberino咨询。

归结为嵌套li元素的事实。当您在组件上定义tagName时，它会使用该标记注入组件。不幸的是它打破了烬/ 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')); 
    } 

});

，而不是李被定义两次：

<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-28 18:07:53 Kingpin2k

是啊，这绝对是双li是莫名其妙摔东西。我不知道如何...

我刚刚注释掉tagName : 'li',行和模板中的{{isSelected}}值开始显示正确的东西。

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

来源

2013-10-29 19:14:59

灰烬组件绑定不传播

回答

相关问题