型号和; Backbone Js中的视图

时间:2013-06-24 20:30:21

标签: javascript backbone.js views models

有人可以帮助我让这个骨干视图渲染工作吗?控制台告诉我“未捕获的ReferenceError:app未定义”,我正在运行的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并不一定是理想的,但我仍在尝试。如果这是一个相当明显的问题,请原谅我...并且...谢谢!< / p>

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

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


})();

1 个答案:

答案 0 :(得分:0)

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

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