0

我已经创建了自己的版本，基本上是：todomvc dependency-example，但我是通过查看这个Modular Backbone Example来构建它的。我正在尝试将基本模板中的硬编码 html 移动到它自己的模板文件中。我计划创建多个页面并想要一个最小的基本模板。但是，当我在视图中加载并插入模板时，createOnEnter 的按键事件停止工作。clearCompleted其他所有功能仍然有效，其中包括事件 ( )中列出的其他事件。

见：this.$el.append(notesTemplate);。

浏览器永远不会实现该功能createOnEnter()。

我的应用视图：

define([
  'jquery',
  'underscore',
  'backbone',
  'models/notes/NoteModel',
  'collections/notes/NoteCollection',
  'views/notes/NotesListView',
  'text!templates/notes/statsTemplate.html',
  'text!templates/notes/notesTemplate.html'
], function($, _, Backbone, NoteModel, NoteCollection, NotesListView, statsTemplate, notesTemplate){
  'use strict';

  var NotesView = Backbone.View.extend({

    el: $("#page"),

    events: {
      "keypress #new-note":  "createOnEnter",
      "click #clear-completed": "clearCompleted"
    },

    initialize: function() {

      var onDataHandler = function(collection) {
          this.render();
      }

      this.$el.append(notesTemplate);

      this.model = new NoteCollection();
      this.model.fetch({ success : onDataHandler, dataType: "jsonp"});


      this.input = this.$("#new-note");
      this.allCheckbox = 0;

      this.listenTo(this.model, 'add', this.addOne);
      this.listenTo(this.model, 'reset', this.addAll);
      this.listenTo(this.model, 'all', this.render);

      this.footer = this.$('footer');
      this.main = $('#main');

      this.model.fetch();
    },

    render: function() {
      var done = this.model.done().length;
      var remaining = this.model.remaining().length;

      if (this.model.length) {
        this.main.show();
        this.footer.show();
        this.$('footer').show();
        this.footer.html(_.template(statsTemplate, {done: done, remaining: remaining}));
      } else {
        this.main.hide();
        this.footer.hide();
      }

      this.allCheckbox.checked = !remaining;
    },

    addOne: function(note) {
      var view = new NotesListView({model: note});
      $("#notes-list").append(view.render().el);
    },

    addAll: function() {
      this.model.each(this.addOne);
    },

    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      if (!this.input.val()) return;
      this.model.create({title: this.input.val()});
      this.input.val('');
    },

    clearCompleted: function() {
      _.invoke(this.model.done(), 'destroy');
      return false;
    },

    toggleAllComplete: function () {
      var done = this.allCheckbox.checked;
      this.model.each(function (note) { note.save({'done': done}); });
    }

  });

  return NotesView;
});

解决了！

我没有提供足够的信息让任何人找到问题。这是 ID 元素中的拼写错误#new-note。上面的代码工作得很好。

4

1 回答 1

0

我通过template在视图中设置选项来完成加载模板，如下所示：

template: _.template(notesTemplate),

然后在我的render函数调用中：

this.$el.html(this.template());

实际渲染它。这可确保事件被正确委派。

于 2013-07-09T04:02:27.207 回答