Handlebars template not working in Backbone app

Question

I have the following Todos app in Backbone:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Hello World in Backbone.js</title>
  <style type='text/css'>
    #todoapp ul {
      list-style-type: none;
    }
    #todo-list input.edit {
      display: none;
    }
    #todo-list .editing label {
      display: none;
    }
    #todo-list .editing input.edit {
      display: inline;
    }
  </style>
</head>
<body>

  <section id='todoapp'>
    <header id='header'>
      <h1>Todos</h1>
      <input id='new-todo' placeholder='What needs to be done?'>
    </header>
    <section id='main'>
      <ul id='todo-list'></ul>
    </section>
  </section>

  <script type='text/x-handlebars-template' id='item-template'>
    <div class='view'>
      <input class='toggle' type='checkbox'>
      <label>{{ title }} </label>
      <input class='edit' value='{{ title }}'>
      <button class='destroy'>remove</button>
    </div>
  </script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.amd.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>

  <script type="text/javascript">
    var App = {
      Models: {},
      Collections: {},
      Views: {}
    }

    App.Models.Todo = Backbone.Model.extend({
      defaults: {
        title: '',
        completed: false
      }
    });

    App.Collections.TodoList = Backbone.Collection.extend({
      model: App.Models.Todo,
      localStorage: new Store('backbone-todo')
    });

    App.Views.Todo = Backbone.View.extend({
      tagName: 'li',
      template: Handlebars.compile($('#item-template').html()),
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.input = this.$('.edit');
        return this;
      },
      initialize: function(){
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
      },
      events: {
        'dblclick label': 'edit',
        'keypress .edit': 'updateOnEnter',
        'blur .edit': 'close',
        'click .toggle': 'toggleCompleted',
        'click .destroy': 'destroy'
      },
      edit: function(){
        this.$el.addClass('editing');
        this.input.focus();
      },
      updateOnEnter: function(e){
        if(e.which == 13){
          this.close();
        }
      },
      close: function(){
        var value = this.input.val().trim();
        if(value){
          this.model.save({title: value});
        }
        this.$el.removeClass('editing');
      },
      toggleCompleted: function(){
        this.model.toggle();
      },
      destroy: function(){
        this.model.destroy();
      }
    });

    App.Views.TodoList = Backbone.View.extend({
      el: '#todoapp',
      initialize: function() {
        this.input = this.$('#new-todo')
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
        this.collection.fetch();
      },
      events: {
        'keypress #new-todo': 'createTodoOnEnter'
      },
      createTodoOnEnter: function(e) {
        if(e.which !== 13 || !this.input.val().trim()){
          return;
        }
        this.collection.create(this.newAttributes());
        this.input.val('');
      },
      addOne: function(todo){
        var view = new App.Views.Todo({model: todo});
        $('#todo-list').append(view.render().el);
      },
      addAll: function(){
        this.$('#todo-list').html('');
        this.collection.each(this.addOne, this);
      },
      newAttributes: function(){
        return {
          title: this.input.val().trim(),
          completed: false
        }
      }
    });
    var todoList = new App.Collections.TodoList();
    var todoListView = new App.Views.TodoList({collection: todoList});
  </script>

</body>
</html>

But when I open the html file in my browser, the template placeholders are not populate with the data. It shows {{ title }} instead of the actual title. What am I missing here?

PS: I'm seeing the following 2 errors in the console: 1. Uncaught ReferenceError: define is not defined (in handlebars.amd.js)

Uncaught ReferenceError: Handlebars is not defined (on line
Handlebars.compile($('#item-template').html()))

Answer 1

我正在导入amd版本的车把，我从cdn网址中删除了“ .amd”，从而解决了该问题。

Handlebars template not working in Backbone app

Question

1 answers

solution1
0 2014-03-13 03:47:14

Handlebars template not working in Backbone app

Question

1 answers

solution1 0 2014-03-13 03:47:14

solution1
0 2014-03-13 03:47:14