Events

[gdaybrice]

Hey Keith, great idea and thanks for sharing the code. Not sure if you can help but I was wondering what would be the best way to bind custom events to the view. As the $main element doesn't exist when the page is first created on the server, events can't be bound.

If you have some ideas, any help or direction would be great.

Thanks!
Brice

[keithnorm]

Hey Brice,

Here's what I was thinking about that back when I was working on "the
pipedream".

So, to take a step back, here's the flow of a typical backbone app:

1. layout loads
2. scripts load
3. models request data via ajax
4. views render templates into layout

And here's what happens in a "pipedream" app

1. models request data (via http request or whatever) then full layout +
   views render on server
2. browser renders full page
3. scripts load
4. models request data via ajax (since the same Model.fetch that ran on the
   server is now running on the client)
5. on dom ready, views render templates into layout (again)

So, in that default scenario, your Backbone app should "just work" the same
on the client as if the HTML wasn't already fully rendered on the server.
The benefit you get is that you get SEO support for your Backbone rendered
stuff, and you could "turn off" the client side experience for older
browsers and fall back to full page reloads (for IE 7 or something).

So, you can write your views with your custom events the same way you would
if they were client only, and on the server it won't bind the events, but
when the views get re-initialized on the client they will get bound. Feel
free to send me some code if you have a case where that isn't happening.

Thanks!

On Wed, Jun 19, 2013 at 3:45 AM, Brice Lechatellier <
notifications@github.com> wrote:

Hey Keith, great idea and thanks for sharing the code. Not sure if you can
help but I was wondering what would be the best way to bind custom events
to the view. As the $main element doesn't exist when the page is first
created on the server, events can't be bound.

If you have some ideas, any help or direction would be great.

Thanks!
Brice

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2
.

[gdaybrice]

Keith, thanks for the reply, really appreciate it.

I've followed your example (re-did in JavaScript and added external templates for the views) but I think I'm missing step (5).

This what my Index view looks like.

var Backbone = require('backbone');

var IndexView = Backbone.View.extend({
    el: '#main',

    template: 'index',

    events: {
        'click h1': 'test'
    },

    toHTML: function () {
        return this.getTemplate(this.template).render();
    },

    render: function () {
        var self = this;

        return this.$el.fadeOut('fast', function () {
            self.$el.html(self.toHTML());
            return self.$el.fadeIn();
        });
    },

    test: function () {
        alert('test');
    }
});

module.exports = IndexView;

The getTemplate function is a prototype function that returns the rendered mustache template. When the server renders the view, I get an error as the $el element doesn't exist yet as being rendered on the server when initializing the view.

TypeError: Cannot call method 'off' of undefined
    at _.extend.undelegateEvents (node_modules/backbone/backbone.js:1078:16)

I hope it makes sense, thanks again for your help.
Brice

PS: did you give up the pipedream in the end?

[gdaybrice]

I've actually managed to get a step forward with this. I've simply removed the silent: true to trigger the initial route again on the client router and removed the delegateEvents method on the server router. It seems a bit of an overhead as the HTML is already rendered but I'll work around this for now.

Brice

[keithnorm]

Yeah that sounds right, delegateEvents should be a no-op on the server. I
might have missed that in the demo app. I've spent some time thinking about
that whole double render on the client inefficiency but don't have a great
solution yet. If you have any thoughts let me know! I think the pipedream
concept is still awesome and doable, I just haven't worked on it much
lately. I'd love to hear more about your use case and how far you can take
it. I never built a full app this way.

On Wed, Jun 19, 2013 at 8:07 PM, Brice Lechatellier <
notifications@github.com> wrote:

I've actually managed to get a step forward with this. I've simply removed
the silent: true to trigger the initial route again on the client router
and removed the delegateEvents method on the server router. It seems a
bit of an overhead as the HTML is already rendered but I'll work around
this for now.

Brice

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-19728474
.