Geek asks and answers

Asynchronous loading of templates and actions after rendering using Backbone

I use a basic template to render my templates, its fetchTemplate method caches processed templates.

I would like to run some additional code on the displayed content, for example, initialize accordions, etc., but using a compiled async template to do this is more difficult than I thought.

Here is an example:

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      $(view.el).html( tmpl({duels: view.collection.toJSON()}) );
      view.postrender();
    });
    return this;
  },
  postrender: function() {
    $('#duel-new').each(function() {
      console.log('Found something')
    });
  }
});

In addition to the above, I use the view handler described in http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

This I do something like

var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view)

it causes

$('#content').html(view.render().el)

, , , postrender . , , , postrender, view.el DOM, $(this.el) , $( '# duel-new'). each() "void".

, postrender viewHandler, , . , postrender , , .

, ? , , , , , $('#tabs').tabs()?

fetchTemplate :

fetchTemplate: function(path, done) {
  window.JST = window.JST || {};

  // Should be an instant synchronous way of getting the template, if it
  // exists in the JST object.
  if (JST[path]) {
    return done(JST[path]);
  }

  // Fetch it asynchronously if not available from JST
  return $.get(path, function(contents) {
    var tmpl = jade.compile(contents,{other: "locals"});
    JST[path] = tmpl;

    return done(tmpl);
  });
},
+3
4

.

fetchTemplate jQuery promise. , , jQuery Deferreds Promises, , . ;)

promises, , : initialize . , , :

Duel.Views.Home = Backbone.View.extend({
    initialize: function () {
       this.templateFetched = statusapp.fetchTemplate(this.template);

    },
    ...

    render: function () {
        var view = this;
        this.templateFetched.done(function (tmpl) {
            view.$el.html( tmpl({duels: view.collection.toJSON()}) );
            ... // All your UI extras here...
        });
    }
});

, , done . , , , $el , .. view.templatedFetched.done(...).

+5

, - . , , , , , , . , , , .NET( Zombies). , - :

// in showView method of viewHandler
if (this.currentView) {
    this.currentView.close();
}

this.currentView = view;
this.elem.html( this.currentView.render().el );
if ( this.currentView.onAddToDom )  // THIS IS THE IMPORTANT PART.
    this.currentView.onAddToDom();

onAddToDom, dom. postrender(), postrender() onAddToDom(). , . ? .

:

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      $(view.el).html( tmpl({duels: view.collection.toJSON()}) );
    });
    return this;
  },
  onAddToDom: function() {
    $('#duel-new').each(function() {
      console.log('Found something')
    });
  }
});

, -

var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view);


$('#content').html(view.render().el)
if(view.onAddToDom)
    view.onAddToDom();

( ) postrender().

.

. , ( , onAddToDom - postrender()? - ), view.render() viewHandler('selector').showView, onAddToDom . , , - , render(). , , .

+2

:

view.$el - , $(view.el), Backbone 0.9.0+

$('#duel-new') , $('#duel-new', this.$el) , , DOM.

,

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      view.$el.html( tmpl({duels: view.collection.toJSON()}) ); // change this
      view.postrender();
    });
    return this;
  },
  postrender: function() {
    $('#duel-new', this.$el).each(function() { // change this
      console.log('Found something')
    });
  }
});
0

  • Backbone ?

  • jQuery, zepto - ? ?

  • , ? , jsfiddle?

  • , ?

  • , $(this.el) - , $('# duel-new'). each() "void"

    , " " "void". - , jQuery $( this.el ) jQuery 1. jQuery $( '#duel-new' ).each() jQuery, 0.

    As mentioned in @ 20100, if your version of Backbone supports it, you better use this.$elinstead $( this.el ).

  • it causes

     $('#content').html(view.render().el)

    jQuery.html() is only documented as accepting a string argument, so I don't think this is a good idea when using jQuery.

  • This I do something like

     var view = Duel.Views.Home({model: mymodel})
 viewHandler('#content').showView(view)

    Shouldn't it be new Duel.Views.Home( { model : mymodel } )? Otherwise, it thiswill be inside the constructor Duel.Views.

0
source

More articles: