CODEWITHSUNDEEP
requirejsbackbone-relational
bighammer
bighammer

Reputation: 73

How to make Backbone-Relational (0.8.5) work with RequireJS?

After another long research, sth comes out :-) It seems the problem is about the function "getObjectByName". It can not work well with requireJS(ADM). Currently, I have to setup a globel var to fix the problem. I am sure there must be have better solution.

Here is my temp soluton:

(1) setup a global var and setup the search model scope to the global ("APP")

var APP = {};

define(['backbone-relational'], function(){
    Backbone.Relational.store.addModelScope(APP);
})

(2) export your relation model to the global

APP.YourRelationalModel = YourRelationModel;

It works, not good though... I'm really looking forward to a better answer. Thanks.

//------------

test versions:

1.Backbone-Relational 0.8.5 
2.Backbone 1.0.0 and Underscore 1.4.4
3.JQuery 1.8.3
4.RequireJS 2.1.5

Code is very simple: (or see https://github.com/bighammer/test_relational_amd.git)

require.config({

paths : {

    js                    : 'js',
    jquery                : 'js/jquery-1.8.3',
    underscore            : 'js/underscore',
    backbone              : 'js/backbone',
    'backbone-relational' : 'js/backbone-relational'
},

shim : {
    underscore : {
        exports : '_'
    },
    backbone   : {
        deps    : ['underscore', 'jquery'],
        exports : 'Backbone'
    },

    'backbone-relational' : {
        deps: ['backbone']
    }
}

});

define(['backbone', 'backbone-relational'], function (Backbone) {

var Child = Backbone.RelationalModel.extend();
var Parent = Backbone.RelationalModel.extend({
    relations : [
        {
            key          : 'child',
            type         : Backbone.HasOne,
            relatedModel : 'Child'
        }
    ]

});

var test = new Parent();

});

save above code in main.js and included in index.html as follows:

It doesn't work. There is warning message:

Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).

I read the source code of backbone-relational and know there is something wrong with the namespace. Relational-Backbone cannot find the relatedModel defined in "Parent" (i.e. cannot find releatedMode:"Child"). I failed to find the solution to fix this due to my limited knowledge of javascript :-)

Can anyone help me with this?

Before I asked my question, I studied the following solutions:

Backbone.RelationalModel using requireJs
Can't get Backbone-relational to work with AMD (RequireJS)
Loading Backbone.Relational using Use! plugin

None of them worked in this case.

Upvotes: 7

Views: 3476

Answers (2)

Bo Jeanes
Bo Jeanes

Reputation: 6383

The above solution didn't apply to me. I am gradually moving code out of Rails Asset Pipeline (not RequireJS/AMD/CommonJS/anything) into Webpack, starting with dependencies. When I moved requiring backbone-relational into Webpack bundle preparation by my models and relation definitions were still in Rails Asset Pipeline, I started getting a lot of unexplained Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).

In my case, the solution ended up being quite simple, despite taking a long time to discover on my part:

// In a Webpack module, later included into Rails Asset Pipeline
// temporarily to facilitate migration

require('expose?Backbone!backbone') // Exposing just for migration
require('backbone-relational')
Backbone.Relational.store.addModelScope(window)

backbone-relational by default uses its global scope to resolve string-based relatedModels but since it was required without a real global scope, the solution is simply to pass that in using addModelScope so it can search that scope for the specified models.

Upvotes: 0

xzhang
xzhang

Reputation: 562

You don't have to reference relatedModel by string, you can reference it directly, so instead of relatedModel: 'Child', just use: relatedModel: Child.

And since you are using requireJS, you can reference model from other file easily.

define(['backbone', 'models/child', 'backbone-relational'], function (Backbone, Child) {
  var Parent = Backbone.RelationalModel.extend({
    relations : [{
        key          : 'child',
        type         : Backbone.HasOne,
        relatedModel : Child
    }]
  });

  var test = new Parent();
});

Upvotes: 15

Related Questions