【问题标题】:After integrating requirejs in backbone app, (view) not working在骨干应用程序中集成requirejs后,(视图)不起作用
【发布时间】:2013-05-13 14:56:52
【问题描述】:

我正在使用 require.js 开发我的主干应用程序。一切都很好。直到我集成路由器。集成路由器后,我收到错误消息:

TypeError: appView is undefined
[Break On This Error]   

that.$el.append(new appView.getView({model:data}).render());

在 view.js 中我无法使用这条线进行路由(我故意评论)

listTrigger:function(){
            myApp.navigate("/student");
        }

我在这里发布我的所有代码......任何人都可以建议或更正我的代码。或者告诉我我在这里做错的原因?

ma​​in.js

require.config({
    baseUrl: 'js/',
    paths:{
        'jquery'        :"lib/jquery.min",
        'underscore'    :"lib/underscore-min",
        'backbone'      :"lib/backbone-min",

        'appModel'      :"app/model/model",
        'appView'       :"app/views/view",
        'appViews'      :"app/views/views",
        'appRoute'      :"app/router/router"
    },
    shim:{
        underscore:{
            exports:"_"
        },
        backbone:{
            exports:"Backbone",
            deps:["jquery","underscore"]
        }
    }
});

require(["appRoute"], function(appRoute) {
    var myApp = new appRoute.getRoute();
    Backbone.history.start();
});

model.js

define("appModel", ['backbone'], function(Backbone){

    "use strict"

    var appModel = Backbone.Model.extend({});

    var appCollection = Backbone.Collection.extend({
            model:appModel,
            initialize:function(){
                // console.log("initialized from collection");
            }
    });

    return {
        model: appModel,
        collect:appCollection
    }

});

view.js

define("appView", ["backbone","appViews"], function(Backbone,appViews){

    "use strict"

    var appView = Backbone.View.extend({
        tagName:"li",
        template:_.template($("#listTemp").html()),
        events:{
            "click" : "listTrigger"
        },
        initialize:function(){
            this.render();
        },
        render:function(){
            return this.$el.html(this.template(this.model.toJSON()));
        },
        listTrigger:function(){
            // myApp.navigate("/student");
        }
    });

    return{
        getView: appView
    }

})

views.js 带有一些 json 数据:

define('appViews', ["backbone","appModel","appView"], function(Backbone,appModel,appView){

    "use strict";

    var students = [
                    {"name":"student1"},{"name":"student2"},
                    {"name":"student3"},{"name":"student4"},
                    {"name":"student5"},{"name":"student6"},
                    {"name":"student6"},{"name":"student8"},
                    {"name":"student9"},{"name":"student0"}]

    var appViews = Backbone.View.extend({
        el:$("#app").find('ul'),
        initialize:function(){
            this.collection = new appModel.collect(students);
            this.collection.on('reset', this.renderAll);
            this.renderAll();
        },
        render:function(){
            console.log("render called from views");
        },
        renderOne:function(){
            console.log("render one")
        },
        renderAll:function(){
            var that = this;
            this.collection.each(function(data,i){
                that.$el.append(new appView.getView({model:data}).render());
            })
        }
    });


    return {
        appViews : appViews
    }


})

router.js

define('appRoute', ["backbone","appModel","appView","appViews"], function(Backbone,appModel,appView,appViews){

    var appRouter = Backbone.Router.extend({
        routes:{
            "":"initiate"
        },
        initialize:function(){
            // console.log("called from routersssss");
        },
        initiate:function(){
            new appViews.appViews();
        }
    })


    return {
        getRoute : appRouter
    }

})

在使用路由器之前,所有这些都正常工作。在我没有得到结果之后。我是不是用错了路由器?

【问题讨论】:

  • 奇怪的是你调用的构造函数没有括号,不应该是 new appView().getView(...) 吗?另外,如果 appView 未定义,则 appView 可能存在运行时错误或模块由于某种原因无法加载。

标签: backbone.js requirejs backbone-routing


【解决方案1】:

@TomasKirda:new-up 可以不带括号,但我不推荐!另外,see here

话虽如此,您已经确定了本例中的问题!

这段代码:

new appView.getView(...);

正在尝试创建一个新的appView.getView,它不是对构造函数的引用(如果appView 构造函数具有属性getView)。

所以在这种情况下,括号是必需的:

new appView().getView(...);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-18
    相关资源
    最近更新 更多