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

Question

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.

Kashakashden

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) – Kashakashden

Answer 1

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

Cohligan

Thanks a lot. It works. Actually, I tried to use Reference one time, but i did not work. Now figure out why it did not work that time. It is caused by my other mistake in the project source code :( – Kashakashden

Answer 2

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.

Penelopepeneplain