如何使用更多链接按钮创建骨干视图？

I am trying to create a backbone view which has more button in it. Please check the below image

我正在尝试创建一个骨干视图,其中包含更多按钮。请查看下图

Those button's are generated from different response's, for each button one response will be there, so dynamically I am creating the button view and appending it.

那些按钮是从不同的响应生成的,对于每个按钮,一个响应将在那里,所以动态我创建按钮视图并附加它。

If the more buttons ( 4,5 etc) are there i need to show a "more" button, so that if the user clicks "more" button I need to expand and show all the buttons.

如果有更多按钮(4,5等),我需要显示“更多”按钮,这样如果用户点击“更多”按钮,我需要展开并显示所有按钮。

How we can handle this case? I have tried backbone collection

我们如何处理这个案子?我试过骨干收藏

1 个解决方案

#1

I suppose you can do something like this?

我想你可以做这样的事情吗?

http://jsfiddle.net/u9y574y8/

ExpandableView = Backbone.View.extend({
    itemTemplate: _.template('<button name="<%=name%>" id="<%=name%>" value="<%=name%>"><%=name%></button>'),
    id: 'expand',
    events: {
        'click #more': 'more'
    },
    initialize: function(opt) {
        // attach to the main body
        $(opt['main']).append(this.el)

        this.counter = 3;
        this.render();
    },
    more: function() {
        this.counter += 3;
        this.render();
    },
    render: function() {
        $(this.el).html('');
        for (var i = 0; i < this.counter; i++) {
            $(this.el).append(this.itemTemplate({name: i}));
        }
        $(this.el).append(this.itemTemplate({name: 'more'}));

        return this;
    }
});

var search_view = new ExpandableView({ main: $('body') });