BackboneJS - 无法动态更新 Collection URL

Question

我正在尝试为我的应用程序生成模拟数据。根据我的用户的要求，可以设置 json 的大小。为此，我将用户带到新页面并从用户那里获取价值。说 small、medium、large。一旦用户定义了大小，我将像这样更新 collection 的 url link :

var api = "movies"; //default. later setting by dynamic

    var getURL = function( size ){

        console.log('api is', api);

        return api;

    }

    var Theater = {
        Models: {},
        Collections: {},
        Views: {},
        Templates:{}
    }

    Theater.Models.Movie = Backbone.Model.extend({});

    Theater.Collections.Movies = Backbone.Collection.extend({
        model: Theater.Models.Movie,
        urlRoot : getURL(),
        url : function(){
            console.log( "json from",  "scripts/data/" + this.urlRoot+".json" );
            return  "scripts/data/" + this.urlRoot+".json"; //dynamic
        },
        initialize: function(){
            console.log("Movies initialize");
        }
    });

这是视图部分：

 Theater.Templates.simulator = _.template($("#tmplt-simulator").html());
    Theater.Views.Simulator = Backbone.View.extend({
        el: $("#mainContainer"),
        events :{
            "click .radioBtn" : "setDataSize"
        },
        template : Theater.Templates.simulator,
        initialize: function () {
            _.bindAll(this, 'render');
            this.render();
        },
        render: function () {
            this.$el.empty();
            return $(this.el).append(this.template()) ;
        },

        setDataSize : function(e){
            e.preventDefault();
            var size = e.target.value;
            api = size; //updating the URL but not working when go back to home
        }

    })

除了上面的细节，这里是完整的代码：full code

有人帮我处理这种情况吗？

提前致谢。

Answer 1

集合实际上并没有由 Backbone 处理的内置 urlRoot 属性。因此，您定义的是一个自定义属性，它仅在创建集合构造函数时计算一次。

你应该做的是：

url: function(){
    return  "scripts/data/" + getURL() + ".json";
    // ------------------------^ something that is actually dynamic
},

BackboneJS - 无法动态更新 Collection URL

BackboneJS - Not able to update the Collection URL dynamically

backbone.js

backbone.js-collections