尝试导航时模型方法错误

Model method error while trying to navigate

本文关键字：方法 错误 模型 导航      更新时间：2023-09-26

我有几个骨干模型呈现在一个集合视图，我也有一个路由，应该呈现该模型的视图。这里是视图

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

我没有为这个视图提供模板，因为它相当大，但错误如下:每当我尝试导航到一个链接时，视图试图渲染，但返回我以下错误:Uncaught TypeError: this.model.toJSON is not a function.我怀疑我的showResume方法在路由器是无效的，但我实际上不能得到如何使它以正确的方式工作。

您正在传递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自动拾取model, collection, el, id, className, tagName, attributes和events，用它们扩展视图。

相关文章：