How to wire a Backbone View to a meteor handlebars template?

Question

Looks like Backbone.view, meteor and handlebars have overlap functionality when it comes to manipulating a section of the DOM. I looked at the ToDo app which is suppose to use B

Answer 1

It's very easy and no more work than using the Underscore template. Here's an example .html file:

<template name="user_list">
<ul>
  {{#each users}}
  <li>{{name}}</li>
  {{/each}}
</ul>
</template>

And here's an example .js file:

Users = new Meteor.collection("users");

if (Meteor.is_client) {
  Template.user_list.users = function() {
    return Users.find();
  }

  window.UserView = Backbone.View.extend({
    initialize: function() {
      _.bindAll(this, 'render');
    },
    template: function() {
      Meteor.ui.render(function() {
        return Template.user_list();
      });
    },
    render: function() {
      $(el).empty().append(this.template());
    }
  });
}

You can then use a Router or another View to manage when you want to display the UserView just like you would in any other Backbone.js app.

The key is to use the Meteor.ui.render or other Meteor.ui method to render the HTML so that it's reactive.