搜索骨干集合的问题

时间:2015-02-05 17:17:33

标签: javascript backbone.js backbone-views backbone-collections

我有这个bb应用程序,我正在尝试搜索并返回搜索结果,然后在清除时,所有结果再次。在添加搜索功能之前,我能够显示所有内容,但现在没有显示任何内容。我认为该系列在尝试填充时不可用,但似乎无法让它等待。我试过移动取消无济于事。任何帮助都会非常感激。为了方便起见,我把所有东西都放在了这里可以找到的小提琴......

//Campaign Model w defaults
app.model.Campaign = Backbone.Model.extend({
    default: {
        title: '',
        img: '',
        id: '',
        slug: '',
        image_types: 'small',
        tagline: ''
    }
});


//Campaign Collection from model
app.collection.Campaign = Backbone.Collection.extend({
    //our URL we're fetching from
    url: 'https://api.indiegogo.com/1/campaigns.json?api_token=e377270bf1e9121da34cb6dff0e8af52a03296766a8e955c19f62f593651b346',
    parse: function(response) { 
        console.log('parsing...');
        return response.response; //get array from obj to add to collection based on model
    },
    currentStatus: function(status){
        return _(this.filter(function(data){
            console.log('currentStats', status);
            return data.get('_pending') == status;
        }));
    },
    search: function(searchVal) {
        console.log('search...');
        if (searchVal == '') {
            return this;
        }

        var pattern = new RegExp(searchVal, 'gi');
        return _(this.filter(function(data) { 
            return pattern.test(data.get('title'));
        }));
    }
});

app.collection.campaigns = new app.collection.Campaign();
app.collection.campaigns.fetch({
    success: function(){ 
        console.log('Success...');

        var sHeight = window.screen.availHeight - 200 + 'px';
        $('#container ul').css('height', sHeight);
    },
    error: function() { 
        console.log('error ',arguments);
    }
});


//List view for all the campaigns
app.view.CampaignList = Backbone.View.extend({ 
    events: {
        'keyup #searchBox': 'search'
    },
    render: function(data) { 
        console.log('campaignList',$(this.el).html(this.template));
        $(this.el).html(this.template);
        return this;
    },
    renderAll: function(campaigns) { 
        console.log('campList renderAll', campaigns, $('#campaignList'));
        $('#campaignList').html('');
        campaigns.each(function(campaign){ 
            var view = new app.view.CampaignItem({
                model: campaign,
                collection: this.collection
            });
            console.log(view);
            $('#campaignList').append(view.render().el);
        });
        return this;
    },
    initialize: function() {
        console.log('init campList',app);
        this.template = _.template($('#campaignList-tmp').html());
        this.collection.bind('reset', this.render, this);
    },
    search: function(e) {
        console.log('listView search');
        var searchVal = $('#searchBox').val();
        this.renderAll(this.collection.search(searchVal));
    },
    sorts: function() {
        var status = $('#campSorting').find('option:selected').val();
        if(status == '') {
            status = false;
        };
        this.renderAll(this.collection.currentStatus(status));
    }
});

//Item view for single campaign
app.view.CampaignItem = Backbone.View.extend({
    events: {},
    render: function(data){
        console.log('campItem render...', data);
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    initialize: function(){
        console.log('campItem init');
        this.template = _.template( $('#campaignItem-tmp').html());
    }
});

//Router
app.router.Campaign = Backbone.Router.extend({
    routes: {
        '': 'campaigns'
    },
    campaigns: function(){
        this.campListView = new app.view.CampaignList({
            collection: app.collection.campaigns
        });
        $('#container').append(this.campListView.render().el);
        this.campListView.sorts();
    }
});

app.router.campaigns = new app.router.Campaign();
Backbone.history.start();

http://jsfiddle.net/skipzero/xqvrpyx8/

0 个答案:

没有答案