Backbone, not “this.el” wrapping

by

You can take advantage of view.setElement to render a complete template and use it as the view element.

setElement view.setElement(element)
If you’d like to apply a Backbone view to a different DOM element, use setElement, which will
also create the cached $el reference and move the view’s delegated
events from the old element to the new one

Two points you have to account for:

  1. setElement calls undelegateEvents, taking care of the view events, but be careful to remove all other events you might have set yourself.
  2. setElement doesn’t inject the element into the DOM, you have to handle that yourself.

That said, your view could look like this

var FullTemplateView = Backbone.View.extend({

    render: function () {
        var html, $oldel = this.$el, $newel;

        html = /**however you build your html : by a template, hardcoded, ... **/;
        $newel = $(html);

        // rebind and replace the element in the view
        this.setElement($newel);

        // reinject the element in the DOM
        $oldel.replaceWith($newel);

        return this;
    }
});

And a working example to play with http://jsfiddle.net/gNBLV/7/

More Related Contents:

  1. Backbone js .listenTo vs .on
  2. Webpack ProvidePlugin vs externals?
  3. How do I trigger the success callback on a model.save()?
  4. Backbone.js event after view.render() is finished
  5. Backbone: Refresh the current route
  6. Backbone.js – change not triggering while the name change
  7. Proper way of doing view mixins in Backbone
  8. Underscore template throwing variable not defined error
  9. Explanation of …
  10. Best way to iterate over an array without blocking the UI
  11. How to override Backbone.sync?
  12. Backbone.js Empty Array Attribute
  13. How to use if statements in underscore.js templates?
  14. Trying to parse `request.body` from POST in Django [duplicate]
  15. Error: getaddrinfo ENOTFOUND in nodejs for get call
  16. “Single-page” JS websites and SEO
  17. Backbone.js and pushState
  18. Backbone: event lost in re-render
  19. Backbone.js model.get() returning ‘undefined’ even though I can see the attributes in console.log
  20. Backbone.js get and set nested object attribute
  21. Backbone 0.9.9: Difference between listenTo and on
  22. In Javascript, what does this underscore mean?
  23. The collection nested inside firebase collection’s model doesn’t have add function
  24. Delete multiple records using REST
  25. Accessibility and all these JavaScript frameworks
  26. start javascript code with $(function, etc
  27. What is the purpose of backbone.js?
  28. Extending React.js components
  29. Uncaught SyntaxError: Failed to execute ‘querySelector’ on ‘Document’
  30. Super in Backbone

Leave a Comment