backbone.handlebars icon indicating copy to clipboard operation
backbone.handlebars copied to clipboard

Handlebars cannot see the added view helpers

Open revelfire opened this issue 11 years ago • 4 comments

The view sample presented isn't working for me.

here's my test:

var User = Backbone.Model.extend(); var HelloView = Backbone.HandlebarsView.extend({ template: 'Hello {{name}}' }) var AppView = Backbone.HandlebarsView.extend({ template: '

Hello

{{view "HelloView" model=this}}' }); var app = new AppView({model: new User({name: 'Foli'})}); console.log(app.render().$el.html());

I am using the current version of the plugin, the latest backbone and jquery. I am using requirejs. Here's the entire code dump:

https://gist.github.com/revelfire/5881952

revelfire avatar Jun 28 '13 02:06 revelfire

Hi, looks to be an issue with the latest versions of Handlebars: your example works for me with Handlebars 1.0.0-rc.3. Can you confirm me that you encounter this issue with a newer version (1.0.0.rc.4 or 1.0.0)?

In the meantime, I'm gonna investigate. Thanks for reporting!

loicfrering avatar Jul 04 '13 20:07 loicfrering

Yep! Thanks for your response.

#Snippet:

Handlebars.VERSION = "1.0.0";
Handlebars.COMPILER_REVISION = 4;

Handlebars.REVISION_CHANGES = {
    1: '<= 1.0.rc.2', // 1.0.rc.2 is actually rev2 but doesn't report it
    2: '== 1.0.0-rc.3',
    3: '== 1.0.0-rc.4',
    4: '>= 1.0.0'
};

revelfire avatar Jul 05 '13 02:07 revelfire

Loicfrering, thanks for any support :)

Additional research here. Per you comment I punted back to 1.0.0-rc3. It 'partially' works. Result is:

Hello

testTemplate.html:54 GET http://localhost:8080/js/HelloView.js 404 (Not Found) require-with-comments.js:1872 Uncaught Error: Script error for: HelloView http://requirejs.org/docs/errors.html#scripterror require-with-comments.js:163

So it seems to partially work - we get through the first render but die trying to get HelloView inserted in the subview render.

Given that result I thought maybe something weird was happening with the AMD/require stuff, so I did a trimmed down version. Same code, but no AMD. Technically same result - cannot find HelloView.

<script type="text/javascript">
    $(function() {
        var User = Backbone.Model.extend();
        var HelloView = Backbone.HandlebarsView.extend({
            template: 'Hello {{name}}'
        })
        var AppView = Backbone.HandlebarsView.extend({
            template: '<h1>Hello</h1>{{view "HelloView" model=this}}'
        });
        var app = new AppView({model: new User({name: 'Fool'})});
        console.log(app.render().$el.html());
    });

</script>

RESULT: Uncaught Error: Cannot resolve view "HelloView" backbone.handlebars.js:65

This example is still pretty much exactly what is in the docs so I'm not sure what's going on.

Thanks, Chris

revelfire avatar Jul 05 '13 21:07 revelfire

The HelloView must be accessible outside of your module pattern function in order to be resolved by Backbone.Handlebars, you can either:

  • attach it to the window global object: window.HelloView = ...
  • attach it to some sort of global namespace: App.HelloView = ... and then {{view "App.HelloView" ...}}
  • if Backbone.Handlebars detects require.js, it will try to load the HelloView module, so you just have to declare this HelloView in a dedicated module

FYI, here is the view resolution related code.

loicfrering avatar Jul 06 '13 18:07 loicfrering