CODEWITHSUNDEEP
javascriptbackbone.jsrequirejs
Santiago Rebella
Santiago Rebella

Reputation: 2449

backbone require.js access to models

Im studying require and modular programming with backbone.

My question specifically is how can I access the models I have created in the View module as shown below from the main page, (example from the console), as is allways telling me undefined.

I understand that as its encapsulated in the view module, but is being hard to me to understand where I should create the instances of the model and collection as if I do it in init.js I get them to be undefined in the view module when i define collections or model.

If I instance them from model or collections modules I get a bunch of undefined errors

I have this 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;
});

Then I have mainView.js as:

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

I also have the model and collection modules if that helps you out to help me.

My main purpose would be to be able to access them and then put a listener or an on in the elements to be able to play with the data of those models.

Sorry If I am confused and mixing concepts with the variable scope of the modules using require.js and backbone, but I have read whatever I was able to find in the internet and Im still confused.

EDIT

Should I create and entire module just to instantiate them and then export the values as an object??

Upvotes: 0

Views: 256

Answers (1)

Matt Banister
Matt Banister

Reputation: 36

Should I create and entire module just to instantiate them and then export the values as an object??

Yes. That's one way to accomplish what you are looking to do:

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

Where Carta is the collection module and carta is the object that contains the data.

Upvotes: 1

Related Questions