Question

我有一个组件显示一堆具有不同状态的数据。每个数据都包含在不同的div上。我还有一个菜单栏，假设只显示与该操作绑定的元素。我希望能够隐藏与onclick操作无关的元素。

<script type="text/x-handlebars" id="new">
    <section>
        <ul>
            <li {{action 'showAllLeads'}} {{bind-attr class="allLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">
                    <i class="icon-menu"></i>ALL
                </a>
            </li>
            <li {{action 'newLeads'}} {{bind-attr class="newLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">TWO</a>
            </li>
            <li {{action 'activeLeads'}} {{bind-attr class="activeLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">
                    <i class="icon-right-open"></i>ONE
                </a>
            </li>
        </ul>
    </section>
</script>


App.NewController = Ember.Controller.extend({
    actions: {
        showAllLeads: function(){
            this.send('resetTabs');
            this.set('allLeadsTabIsActive', true);
        },
        activeLeads: function(){
            this.send('resetTabs');
            this.set('activeLeadsTabIsActive', true);
        },
        newLeads: function(){
            this.send('resetTabs');
            this.set('newLeadsTabIsActive', true)
        },
        resetTabs: function(){
            this.set('allLeadsTabIsActive', false);
            this.set('newLeadsTabIsActive', false);
            this.set('activeLeadsTabIsActive', false);
        },
    }
});

Answer 1

我认为你应该为每个标签制作一条路线。因为您的控制器中的状态发生了变化，我相信这些应该在您的路由器（这是一台状态机）中。

我希望路由器看起来像：

this.route('leads', function() {  //all leads
  this.route('new');              //new leads
  this.route('active');           //active leads
});

话虽如此。您可以通过执行以下操作轻松更新活动选项卡：

我认为您的标签位于model

中

App.NewController = Ember.Controller.extend({
    activeTabs: function() {
        if (this.get('newLeads') {
            return this.get('model').filter(function(lead) { 
                return lead.get('isNew'); 
            });
        }
        //etc, etc, etc
    }.property('model', 'allLeads', 'newLeads', 'activeLeads');
});

确保在模板中使用属性activeTabs，而不是模型。

过滤掉点击的元素

1 个答案: