导航

Question

我在集合视图中渲染了几个Backbone模型，而且我还有一条应该渲染该模型视图的路径。所以，这里有观点

resume.js

// this renders a single model for a collection view
var ResumeView = Backbone.View.extend({
    model: new Resume(),
    initialize: function () {
        this.template = _.template($('#resume').html());
    },
    render: function () {
        this.$el.html(this.template(this.model.toJSON));
        return this;
    }
});

#resume template

<section id="resume">
    <h1><%= profession %></h1>
    <!-- !!!!! The link for a router which should navigate to ShowResume view -->
    <a href="#resumes/<%= id %>">View Details</a>
</section>

收藏视图：

var ResumeList = Backbone.View.extend({
    initialize: function (options) {
        this.collection = options.collection;
        this.collection.on('add', this.render, this);
        // Getting the data from JSON-server
        this.collection.fetch({
            success: function (res) {
                _.each(res.toJSON(), function (item) {
                    console.log("GET a model with " + item.id);
                });
            },
            error: function () {
                console.log("Failed to GET"); 
            }
        });
    },
    render: function () {
        var self = this;
        this.$el.html('');
        _.each(this.collection.toArray(), function (cv) {
            self.$el.append((new ResumeView({model: cv})).render().$el);
        });
        return this;
    }        
});

上面的代码完美无缺，完全符合我的需要 - 从我的本地JSON服务器获取模型数组，每个模型都显示在集合视图中。但是，当我尝试浏览上面模板中的链接时，麻烦就开始了。这是路由器：

var AppRouter = Backbone.Router.extend({
    routes: {
        '': home,
        'resumes/:id': 'showResume'
    },
    initialize: function (options) {
        // layout is set in main.js
        this.layout = options.layout
    },
    home: function () {
        this.layout.render(new ResumeList({collection: resumes}));
    },
    showResume: function (cv) {
        this.layout.render(new ShowResume({model: cv}));
    }
});

最后是ShowResume视图：

var ShowResume = Backbone.View.extend({
    initialize: function (options) {
        this.model = options.model;
        this.template = _.template($('#full-resume').html());
    },
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

我没有为此视图提供模板，因为它非常大，但错误如下：每当我尝试导航到链接时，视图都会尝试渲染，但会返回以下错误：{ {1}}我怀疑路由器中的Uncaught TypeError: this.model.toJSON is not a function.方法无效，但我实际上无法让它以正确的方式运行。

Answer 1

您正在传递网址id的字符串'resumes/:id'作为视图模型。

这应该解决它。

showResume: function (id) {
   this.layout.render(new ShowResume({
       model: new Backbone.Model({ 
           id: id,
           profession: "teacher" // you can pass data like this 
       })
   }));
}

但您应该获取控制器中的数据并在视图中做出相应的反应。

var AppRouter = Backbone.Router.extend({
    routes: {
        '*otherwise': 'home', // notice the catch all
        'resumes/:id': 'showResume'
    },
    initialize: function(options) {
        // layout is set in main.js
        this.layout = options.layout
    },
    home: function() {
        this.layout.render(new ResumeList({ collection: resumes }));
    },
    showResume: function(id) {
        // lazily create the view and keep it
        if (!this.showResume) {
            this.showResume = new ShowResume({ model: new Backbone.Model() });
        }

        // use the view's model and fetch
        this.showResume.model.set('id', id).fetch({
            context: this,
            success: function(){
                this.layout.render(this.showResume);
            }
        })

    }
});

另外，this.model = options.model;不需要Backbone automatically picks up model，collection，el，id，className，{{ 1}}，tagName和attributes，用它们扩展视图。