0

我正在尝试通过我的“发现”路由发送一个“点”参数，并将其传递给相应的“发现点视图”函数的模型选择器，以便我可以根据该参数更改视图中的模型。谁能向我解释这不起作用以及为什么不起作用？而且，你会注意到我在路由函数中使用了很多比较逻辑......你能解释一下在视图之间交替的更好方法吗？谢谢！

路线：

App.Router.Main = Backbone.Router.extend({
    routes: {
        //DISCOVER VIGNETTE ROUTES
            'discover': 'discoverView',
            'discover/:point':'discoverPointView',
        },



discoverView: function() {
    var contentDiscover = document.getElementById('discoverWrapper');
    this.hidePages();
    contentDiscover.classList.add('active');

    var discoverView = new AllDiscoverPointsView({collection: allDiscoverPoints});
    $("#discoverWrapper").html(discoverView.render().el);

    //$(".point").removeClass("active");
    //$("#" + point).addClass("active");
},

discoverPointView: function(point) {
    var contentDiscover = document.getElementById('discoverWrapper');
    this.hidePages();
    contentDiscover.classList.add('active');

    var discoverView = new AllDiscoverPointsView({collection: allDiscoverPoints});
    $("#discoverWrapper").html(discoverView.render().el);               

    if(point == "glasselephant"){ 
     var singleDiscoverPointView = new SingleDiscoverPointView({ model: point }); 
     $("#discoverWrapper").append(singleDiscoverPointView.render().el);
     $(".subpage").removeClass("active");
     $(singleDiscoverPointView.el).addClass("active");
    }

    if(point == "carvedstatue"){ 
     var singleDiscoverPointView = new SingleDiscoverPointView({ model: point }); 
     $("#discoverWrapper").append(singleDiscoverPointView.render().el);
     $(".subpage").removeClass("active");
     $(singleDiscoverPointView.el).addClass("active");
    }

},

意见： 

// FULL DISCOVER POINT COLLECTION VIEW 
    var AllDiscoverPointsView = Backbone.View.extend({
        tagName: 'ul',
        render: function() {
            this.collection.each(function(model) {
                var discoverPointView = new DiscoverPointView({ model: model });
                this.$el.append(discoverPointView.render().el);
            }, this);
            return this;
        }
    });

    // SINGLE DISCOVER POINT VIEW
    var DiscoverPointView = Backbone.View.extend({
        tagName:'li',
        className:'point',
        events: {
            "click": "select"
        },
        select: function(){
            $('.point').removeClass('active');
            this.$el.addClass('active');
        },
        template: _.template(template('discoverViewTemplate')),
        render: function(){
            this.id = this.model.get('idWord');
            this.$el.attr('id',this.id).html(this.template(this.model.toJSON()));
            return this;
        }
    });

    // SINGLE DISCOVER POINT VIEW
    var SingleDiscoverPointView = Backbone.View.extend({
        tagName: 'div',
        className:'subpage',
        template: _.template(template('singleDiscoverViewTemplate')),
        render: function(){
            this.id = this.model.get('idWord');         
            this.$el.attr('id',this.id).html(this.template(this.model.toJSON()));
            return this;
        }
    });

模型/系列：

// COLLECTION OF ALL POINTS IN DISCOVER
var AllDiscoverPoints = Backbone.Collection.extend({
    model: DiscoverPoint
});

// MODEL OF A SINGLE DISCOVER POINT
var DiscoverPoint = Backbone.Model.extend({
    defaults: {
        title: 'Glass Elephant',
        imgPath: 'root/public/img/glass-elephant.png',
        caption: 'The Imagists were extreme collectors, scouring countless thrift shops and beyond!',
        link: 'discover/glasselephant',
        misc: 'Any extra info goes here...'
    }
});


// DISCOVER POINT MODEL INSTANCES
var glasselephant = new DiscoverPoint({
    id: 1,
    idWord: 'glasselephant',
    title: 'Glass Elephant',
    imgPath: 'root/public/img/glass-elephant.png',
    caption: 'The Imagists were extreme collectors, scouring countless thrift shops and beyond!',
    link: 'discover/glasselephant',
    misc: 'Any extra info goes here...'
});

var carvedstatue = new DiscoverPoint({
    id: 2,
    idWord: 'carvedstatue',
    title: 'Carved Statue',
    imgPath: 'root/public/img/carved-statue.png',
    caption: 'The Imagists were extreme collectors, scouring countless thrift shops and beyond!',
    link: 'discover/carvedstatue',
    misc: 'Any extra info goes here...'
});
4

0 回答 0