Backbonejs 中的模型和视图

Posted 2023-02-26

【中文标题】Backbonejs 中的模型和视图

【英文标题】：Models & Views in Backbonejs

【发布时间】：2013-06-24 20:30:20

【问题描述】：

有人可以帮我让这个主干视图渲染工作吗？控制台告诉我“未捕获的 ReferenceError：未定义应用程序”，我正在运行的 javascript 如下：

(function() 
    var App = 
        Router: ,
        Model: ,
        View: 
    ;

    /**
    ** Set states adding and removing classes (show and hide view)
    ** @Helper Template
    **/
    function template( id ) 
        return $('#' + id).html();
    

    /**
    ** Set states adding and removing classes (show and hide view)
    ** @Router Main
    **/
    App.Router.Main = Backbone.Router.extend(
        routes: 
            '':'vignetteNavView',
            'discover': 'discoverView',
            'artists': 'artistsView',
            'milestones': 'milestonesView',
            'archive': 'archiveView',
            'about': 'aboutView'
        ,

        hidePages: function() 
            var contentAll = $('.page');
                contentAll.removeClass('active');
        ,

        vignetteNavView: function()
            var contentVignetteNav = document.getElementById('vignetteNavWrapper');
                this.hidePages();
                contentVignetteNav.classList.add('active');
        ,

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

        artistsView: function() 
            var contentArtists = document.getElementById('artistsWrapper');
                this.hidePages();
                contentArtists.classList.add('active');
        ,

        milestonesView: function() 
            var contentMilestones = document.getElementById('milestonesWrapper');
                this.hidePages();
                contentMilestones.classList.add('active');
        ,

        archiveView: function()
            var contentArchive = document.getElementById('archiveWrapper');
            this.hidePages();
            contentArchive.classList.add('active');
        , 

        aboutView: function()
            var contentAbout = document.getElementById('aboutWrapper');
            this.hidePages();
            contentAbout.classList.add('active');

        

    );

    var mainRouter = new App.Router.Main();
    Backbone.history.start();


    /**
    ** Define the Data Model for An Artist
    **/

    //Artist

    App.Model.Artist = Backbone.Model.extend(
        defaults: 
            "firstName":"Jim",
            "lastName":"Nutt",
            "bio":"Born in Pittsfield, Massachusetts in 1938, Jim Nutt spent his childhood moving around the United States with his family, including a brief stop in the Chicago suburbs during high school. In 1957, after finishing high school, Nutt spent a year and a half studying architecture at the University of Pennsylvania before transferring to the School of the Art Institute of Chicago in 1960 to study painting. Soon after his arrival at SAIC he met fellow student Gladys Nilsson, and the two married one year later, in 1961. Nutt received his BFA in 1965.",
            "work":"A, B, C, etc...",
            id:1 
        
    );



    App.View.ArtistView = Backbone.View.extend(
        render: function()
            console.log(this.model.get('firstName'));
        
    ); 

    app.view.artistsView = new App.View.ArtistsView(model:App.Model.Artist);

    app.view.artistsView.render();


)();

我知道在学习 Backbone/mvc 框架的同时尝试学习 javascript 不一定是理想的，但我仍然在尝试......所以如果这是一个相当明显的问题，请原谅......并且......谢谢！

现在我正在尝试下面的代码并收到相同的错误：

(function() 
    /**
    ** @Namespacing
    **/
    var App = 
        Router: ,
        Model: ,
        View: 
    ;

    /**
    ** Set states adding and removing classes (show and hide view)
    ** @Helper Template
    **/
    function template( id ) 
        return $('#' + id).html();
    

    /**
    ** Set states adding and removing classes (show and hide view)
    ** @Router Main
    **/
    App.Router.Main = Backbone.Router.extend(
        routes: 
            '':'vignetteNavView',
            'discover': 'discoverView',
            'artists': 'artistsView',
            'milestones': 'milestonesView',
            'archive': 'archiveView',
            'about': 'aboutView'
        ,

        hidePages: function() 
            var contentAll = $('.page');
                contentAll.removeClass('active');
        ,

        vignetteNavView: function()
            var contentVignetteNav = document.getElementById('vignetteNavWrapper');
                this.hidePages();
                contentVignetteNav.classList.add('active');
        ,

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

        artistsView: function() 
            var contentArtists = document.getElementById('artistsWrapper');
                this.hidePages();
                contentArtists.classList.add('active');
        ,

        milestonesView: function() 
            var contentMilestones = document.getElementById('milestonesWrapper');
                this.hidePages();
                contentMilestones.classList.add('active');
        ,

        archiveView: function()
            var contentArchive = document.getElementById('archiveWrapper');
            this.hidePages();
            contentArchive.classList.add('active');
        , 

        aboutView: function()
            var contentAbout = document.getElementById('aboutWrapper');
            this.hidePages();
            contentAbout.classList.add('active');

        

    );

    var mainRouter = new App.Router.Main();
    Backbone.history.start();


    /**
    ** Define the Data Model for An Artist
    **/

    //Artist

    App.Model.Artist = Backbone.Model.extend(
        defaults: 
            "firstName":"Jim",
            "lastName":"Nutt",
            "bio":"Born in Pittsfield, Massachusetts in 1938, Jim Nutt spent his childhood moving around the United States with his family, including a brief stop in the Chicago suburbs during high school. In 1957, after finishing high school, Nutt spent a year and a half studying architecture at the University of Pennsylvania before transferring to the School of the Art Institute of Chicago in 1960 to study painting. Soon after his arrival at SAIC he met fellow student Gladys Nilsson, and the two married one year later, in 1961. Nutt received his BFA in 1965.",
            "work":"A, B, C, etc...",
            id:1 
        
    );

    var artist = new App.Model.Artist();



    App.View.ArtistView = Backbone.View.extend(
        render: function()
            console.log(this.model.get('firstName'));
        
    ); 

    artistsView = new App.View.ArtistsView(model:artist);

    artistsView.render(); 


)();

【问题讨论】：

顶部声明的App的定义大写，底部的用法是app - 不大写。

我也将视图大写，但我得到了同样的错误。

【参考方案1】：

要能够保存到对象中，您必须创建它。在App 定义下方添加此内容。

var app = 
    router: ,
    model: ,
    view: 
;