Javascript 主干网需要.js访问模型

Javascript 主干网需要.js访问模型,javascript,backbone.js,requirejs,Javascript,Backbone.js,Requirejs,我正在研究主干网的需求和模块化编程 我的问题是如何从主页(控制台示例)访问我在视图模块中创建的模型,如下所示,这一直告诉我未定义 我知道它被封装在视图模块中,但是我很难理解应该在哪里创建模型和集合的实例,就像我在init.js中那样。我在定义集合或模型时,会让它们在视图模块中未定义 如果我从模型或集合模块中引用它们,我会得到一堆未定义的错误 我有这个init.js requirejs.config({ enforceDefine: true, baseUrl: 'js', urlArgs:

我正在研究主干网的需求和模块化编程

我的问题是如何从主页(控制台示例)访问我在视图模块中创建的模型,如下所示,这一直告诉我未定义

我知道它被封装在视图模块中,但是我很难理解应该在哪里创建模型和集合的实例,就像我在init.js中那样。我在定义集合或模型时,会让它们在视图模块中未定义

如果我从模型或集合模块中引用它们,我会得到一堆未定义的错误

我有这个init.js

requirejs.config({
enforceDefine: true,
baseUrl: 'js', 

urlArgs: "bust=" + (new Date()).getTime(),

shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
},  
paths: {
    jquery: 'lib/jquery-1.10.2.min',
    backbone: 'lib/backbone.min',
    underscore: 'lib/underscore.min',
    text: 'lib/require/text',

    Plato: 'app/models/plato',
    Carta: 'app/collections/carta',
    MainView: 'app/views/mainView',
    mainTemplate: 'app/templates/mainTemplate.html'
}   
});

define(['jquery', 'underscore', 'backbone', 'MainView'], function($, _, Backbone, MainView) {  
    console.log(typeof $);
    console.log(typeof _);
    console.log(typeof Backbone);   
    var mainView = new MainView;
});
然后我将mainView.js设置为:

define(['backbone', 'text!mainTemplate', 'Plato', 'Carta'], function(Backbone, mainTemplate, Plato, Carta) {  

var pizza = new Plato({precio:120, nombre:'pizza', foto:'n/a', ingredientes: 'harina, tomate, oregano', diabeticos:false}),
    empanada = new Plato({precio:40, nombre:'empanada', foto:'n/a', ingredientes: 'harina, carne picada', diabeticos:false}),
    lasagna = new Plato({precio:200, nombre:'lasagna', foto:'n/a', ingredientes: 'pasta, queso', diabeticos:false}),
    carta = new Carta([pizza, empanada, lasagna]),

MainView = Backbone.View.extend({

    tagName: 'div',
    id: 'mainView',
    events: {'click td': 'clickAction'},

    collection: carta,

    template: _.template(mainTemplate, this.collection),

    initialize: function() {
        this.render();
    },
    render: function() {
        this.collection.each(function(item) {
            console.log(item.toJSON() + item.get('nombre'));              
            this.$el.append( this.template( item.toJSON() ));          
        }, this);            

        $('#content').html(this.$el);
        return this;
    },
    clickAction: function() {
        alert(this);
    }
});
return MainView;
});
我也有模型和收集模块,如果这有助于你帮助我

我的主要目的是能够访问它们,然后在元素中放置一个侦听器或一个on,以便能够处理这些模型的数据

很抱歉,如果我混淆了使用require.js和backbone的模块的可变范围的概念,并且混淆了这些概念,但是我已经阅读了我在互联网上找到的任何内容,我仍然感到困惑

编辑


我是否应该创建一个完整的模块来实例化它们,然后将值导出为一个对象

我应该创建一个完整的模块来实例化它们,然后 将值导出为对象

对。这是实现您期望的目标的一种方法:

define(['backbone', 'text!mainTemplate', 'Plato', 'Carta', 'carta'], 
    function(Backbone, mainTemplate, Plato, Carta, carta) {
...
});

其中Carta是收集模块,Carta是包含数据的对象。

尝试使用数据对象和其中的所有实例创建名为data的模块,效果非常好。不管怎样,这是一种正确的方法吗?通常对于主干收集,您将从服务器上提取数据(例如从API端点)。因此,您可以传入Carta收集模块,在视图中创建它的实例,并调用fetch()来检索数据。在这种情况下,这将不是一个问题。这个问题实际上是关于如何使您的数据对象可用于AMD模块。如果您粘贴一个示例,说明如何在Carta集合中实例化您的数据对象,我可以对此给出反馈。我认为这是将数据传递到视图中的一种同样有效的方法。