尝试导航时出现模型方法错误

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- 服务器获取了一组模型，每个模型都显示在一个集合视图中。但是，当我尝试浏览上面模板中的 link 时，问题就来了。路由器来了：

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()));
    }
});

我没有提供此视图的模板，因为它很大，但错误如下：每当我尝试导航到 link 时，都会尝试呈现一个视图，但 returns 我遇到以下错误： Uncaught TypeError: this.model.toJSON is not a function. 我怀疑我在路由器中的 showResume 方法无效，但实际上我不知道如何让它以正确的方式工作。

Answer 1

您正在传递 url 'resumes/:id' 的字符串 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、 tagName、attributes 和 events，用它们扩展视图。

尝试导航时出现模型方法错误

Model method error while trying to navigate

javascript

backbone.js