backbone require.js访问模型

时间:2013-11-19 18:23:35

标签: javascript backbone.js requirejs

我正在研究需要和骨干的模块化编程。

我的问题具体是如何从主页面(如控制台中的示例)访问我在View模块中创建的模型,因为总是告诉我未定义。

我理解,因为它封装在视图模块中,但我很难理解我应该在哪里创建模型和集合的实例,就好像我在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将模块的可变范围与概念混合在一起,但我已经阅读了我在互联网上找到的任何内容,我仍然感到困惑。

修改


我应该创建和整个模块来实例化它们然后将值导出为对象吗?

1 个答案:

答案 0 :(得分:1)

  

我应该创建和整个模块只是为了实例化它们然后   将值导出为对象??

是。这是实现您的目标的一种方式:

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

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