0

我的问题更具概念性。我已经阅读了网站上的指南、API并查看了一些幻灯片，但我对自己的决定没有信心。我做了组件，但似乎它可能会更好。

我担心很多标签<script id="metamorph-73-end" type="text/x-placeholder"></script>

问题1：我怎样才能减少它？

问题 2： count tags == count 事件监听器是真的吗？

谢谢！

模板：

<script type="text/x-handlebars" data-template-name="components/bootstrap-select">
    <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
        {{selected_name}} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        {{#each items}}
            <li {{action "chosen" this.id this.name on="click" }}><a href="#">{{this.name}}</a></li>
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="components/filter-offers">
        <span class="label_filter">Фильтр </span>
            {{bootstrap-select name="filter_day" data=App.CONSTANTS.DAYS_OF_WEEK selected=0}}
            {{bootstrap-select name="filter_city" data=App.CONSTANTS.CITIES selected=2}}
            {{bootstrap-select name="filter_section" data=App.CONSTANTS.SECTION selected=1}}
        </div>
</script>

JavaScript：

App.BootstrapSelectComponent = Em.Component.extend({
    tagName: 'div',
    classNames: ['ember-view', 'btn-group'],
    // custom fileds
    name: '',
    data: [],
    items: function(){
        return this.get('data').map(function(row){
            return Em.Object.create({id: row[0], name: row[1]});
        });
    }.property('data'),
    selected: NaN,
    selected_name: function(){
        var id = this.get('selected'),
            item = this.get('items').filter(function(item, index){
                if (item.id == id) return true;
            });
        if (item[0] && 'name' in item[0])
            return item[0]['name'];
        else
            return '';
    }.property('selected'), 
    // setup actions
    action_name: function(){
        var name = 'select_updated_' + this.get('name');
        return name.camelize();
    }.property(),
    actions: {
        chosen: function(value, name) {
            // save to memory
            this.set('selected', value);
            // bubble action
            this.sendAction('action_name',
                            this.get('selected'),
                            this.get('selected_name'));
        }
    }
});

App.FilterOffersComponent = Em.Component.extend({
    init: function() {
        this._super();
    },
    templateName: 'filter-offers',
    didInsertElement: function(){
        //console.log(this.get('childViews').mapProperty('selected'));    
    },
    // setup actions
    action: function(){
        // by default filterOffersUpdated
        var name = this.get('templateName') + '_updated';
        return name.camelize();
    }.property('templateName'),
    actions: {
        selectUpdatedFilterDay: function(){
            this.sendAction('action');
        },
        selectUpdatedFilterCity: function(){
            this.sendAction('action');
        },
        selectUpdatedFilterSection: function(){
            this.sendAction('action');
        }
    }
});
4

1 回答 1

1

我会说你的担心是没有必要的。标签的数量并不一定意味着动作侦听器的数量。有些标签是听众，有些不是。您的数量恰到好处：每个元素 1 个。

那是你要找的吗？

于 2013-10-06T00:29:59.223 回答