I have recently developed a small web app using the backbone module and would love to contribute some work back to the project as a complex example module, this is so people can more easily understand how to implement more complex things in backbone. During the development of this web app I found it extremely hard to find documentation or any examples using backbone + drupal so the best place to start documenting this would be in the module itself!

I will provide a patch later today (hopefully) which will add a new example module.

CommentFileSizeAuthor
#6 backbone.js-code.2045387-6.patch17.54 KBclemens.tolboom
#6 interdiff-2045387-3-5.txt4.6 KBclemens.tolboom
#3 2045387-backbone-example-complex-2.patch17.52 KBacbramley
#1 2045387-backbone-example-complex.patch17.58 KBacbramley

Comments

acbramley’s picture

acbramley commented
Status: Active » Needs review
StatusFileSize
new 2045387-backbone-example-complex.patch17.58 KB

First attempt at this, this adds a new module backbone_example_complex which is basically a copy paste of the basic example...with a bit more complex stuff going on. Feel free to take a look, let me know anything you want changed, or go ahead and commit! Cheers

acbramley’s picture

acbramley commented

By the way, this fully supports direct updates from the backend. I.e when a node is added, deleted, or updated all changes are updated on the frontend seamlessly

acbramley’s picture

acbramley commented
StatusFileSize
new 2045387-backbone-example-complex-2.patch17.52 KB

Better patch, removes debug, tidies up some stuff

jlyon’s picture

jlyon commented

+1 for this. Your example code was very helpful, thanks.

acbramley’s picture

acbramley commented

@jlyon thanks :) I'm glad it helped someone!

clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
commented
StatusFileSize
new interdiff-2045387-3-5.txt4.6 KB
new backbone.js-code.2045387-6.patch17.54 KB

Thanks for sharing!

I've fixed some minor issues

acbramley’s picture

acbramley commented

@clemens.tolboom thanks for that, the "javascript '==' into '==='" part I don't quite understand. Especially considering the htmlEncode() function is straight out of the reform library and certainly should not be changed.

EDIT: To reinforce my point above, the SublimeText 2 plugin SublimeLinter actually indicates an error when using == to compare with 0.

clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
commented

@acbramley I just looked up the Drupal javascript standards in https://drupal.org/node/172169#truefalse so a few '===' are according to coding standards but not all.

In #7 is sublimelinter complaining about '==' or '==='?

The htmlEncode() function is old js style (iirc 2007).

I'm indifferent on this '===' versus '==' and just did what netbeans dictated to me. Feel free to change them back like done in https://drupal.org/node/172169#truefalse

We could follow along JSHint https://drupal.org/node/1955232

-enzo-’s picture

-enzo- commented

Hey @acbramley this is a great example.

I have some questions.

1) Model Update?

I remove from backbone_example_complex_app.js the line

setTimeout(pollForContent, Drupal.settings.backbone_example_complex.js_timeout);

And then I update a node listed in the view, but without the timeout the model is not refresh, despite the listen in NodeView

this.listenTo(this.model, 'change', this.render);

That is normal?

2) Pass parameters for filters?

Do you have any idea how to pass parameters to view to filter the view?

3) How to force update the model?

There is way to after load the app, we can execute some js to change some data, like the NID to change the node loaded or similar.

acbramley’s picture

acbramley commented

@-enzo-

1) This is the only way I've been able to get seamless updates from backend to frontend without a page refresh. The listener is there to say "when the model is changed, call this.render" but something needs to trigger the model change, hence the setTimeout call. Maybe there's a better way to do this but I have not found it.

2) I have not looked into this sorry

3) I'm not sure I understand what you want here sorry.

-enzo-’s picture

-enzo- commented

Hello @acbramley

About point #3 I just want to add like a form and use to update some node inside view, do you think that is possible?

acbramley’s picture

acbramley commented

@enzo I believe that would be possible. You'd have to make the form update the node model and then sync the model back to the backend (sync is part of Backbone's library). Unfortunately I have not done anything like this but would be very interested to see it working :)