Backbone with handlebar.js

app

app
 ├ Gruntfile.js
 ├ hbs
 │ └ partial.hbs //テンプレート
 └ js 
   ├ views
   │ └ partial.js //テンプレートをレンダリングするView
   ├ collections
   ├ models
   ├ template.js //テンプレートがプリコンパイルされたJS
   ├ namespace.js
　 └ app.js

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({

    //some...

    handlebars: {
      compile: {
        options: {
          namespace: "MyApp.Templates",
          processName: function(filepath) { // input -> app/hbs/partial.hbs
            var pieces = filepath.split("/");
            return pieces[pieces.length - 1].replace(/.hbs$/ , ''); //output -> partial
          }
        },
        files: {
          "app/js/template.js": "app/hbs/*.hbs"
        }
      }
    }
  });

  // Load the plugin.

  //some tasks...

  grunt.loadNpmTasks('grunt-contrib-handlebars');

  // Default task(s).
  grunt.registerTask('default', ['handlebars']);

};

namespace.js

var MyApp = {
  Views: {},
  Collections: {},
  Models: {},
  Templates: {}
}

partial.hbs

{{#each models}}
<ul> 
  <li class="id">{{this.id}}</li> 
  <li class="name">({{this.name}})</li> 
</ul> 
{{/each}}

partial.js

MyApp.Views.partial = Backbone.View.extend({

  //partial.hbsで定義したテンプレート
  tmpl: MyApp.Templates.partial,

  //some...
  
  render: function() {

    this.$el.html(
      this.tmpl({
        models: this.collection.toJSON()
      })
    );

  },

  //some...