Javascript Backbone.js-未捕获引用错误

不久前，我在Stackoverflow上发布了这个问题。基本上，这是我第一次尝试在自己的项目中试用Backbone.js，之前的帖子问题已经解决

但是现在，当加载此页面时，我可以在Chrome控制台窗口中看到以下javascript错误

Uncaught ReferenceError: completed is not defined VM46:6
(anonymous function) VM46:6
_.template.template underscore.js:1308
Backbone.View.extend.render example_addbutton.html:69
Backbone.View.extend.initialize example_addbutton.html:65
Backbone.View backbone.js:1031
child backbone.js:1658
(anonymous function)

花了一个小时排除故障后，我将问题追溯到代码的这一部分

<script id="taskTemplate" type="text/template">
    <span class="<%=completed ? 'completed' : 'incomplete' %>"><%= text %></span>
    <button class="complete"></button>
    <button class="delete"></button>
</script>

---

我做错了什么？？？

终于找到了解决办法

在网上寻找快速解决方案后，我不得不重构所谓的“教程”代码以使应用程序正常工作

事实证明，它的主干视图逻辑编写得不好，因为它试图呈现主应用程序屏幕以及在一段代码中添加的新项。所以我必须把它拿出来，放在另一个主干视图逻辑中，并使用适当的事件侦听器

var TasksView = Backbone.View.extend({
    tagName: 'li',

    template: _.template($('#taskTemplate').html()),

    events: { 
         'click .delete': 'delete',
         'click .complete': 'updateStatus',
         'dblclick span': 'edit'
    },

initialize: function(){
          this.model.on('change', this.render, this);
          this.model.on('remove', this.unrender, this);
          this.render();
    },

    render: function(){
          var markup = this.template(this.model.toJSON());
          this.$el.html(markup);
          return this; 
    },

    unrender: function(){
          this.$el.remove();
    },

    delete: function(){
          this.model.destroy();
          this.$el.remove();
    },

    updateStatus: function(){
          this.model.set('completed', !this.model.get('completed'));
    },

    edit: function(){
          var text = prompt('What should we change your task to?', this.model.get('text'))
          this.model.set('text',text);
    },

});

var AppView = Backbone.View.extend({
    el:'#tasks',

    events: {
        'click .add': 'add',
        'click .clear': 'clearCompleted'
    },

    initialize: function(){
        this.collection = new Tasks();
        this.collection.on('add', this.addOneTask, this);
        this.items = this.$el.children('ul');

    },

    add: function(){
        var text = prompt('What do you need to do?');
        var task = new Task({text: text});
        this.collection.add(task);
    },

    render: function(){

    },

    addOneTask: function(task){
        var view = new TasksView({model:task});
        this.items.append(view.render().el);
    },

    clearCompleted: function(){
        var completedTasks = this.collection.completed();
        this.collection.remove(completedTasks);
    }

});

---

瞧！它起作用了

错误与

template

方法有关，调用模板函数时应传递

completed

属性。您发布的代码与抛出的错误无关。谢谢！在再次阅读代码之后，我意识到在将变量传递给模板引擎进行渲染时，我的主干模型声明和completed属性有问题。我现在正在调查。干杯提示：您可以缩短

任务

集合：由于主干集合中提供了所有下划线集合方法，因此您可以将

已完成的

缩减为

返回此.filter（…）；）提示：考虑实现一个
TasksView
并封装列表呈现（监听集合上的
add
和
remove
）。现在被称为
TasksView
的内容绑定到一个模型，然后将呈现一个
Task
（仅侦听模型上的
change
）。抱歉。。。我不太明白你的意思。在我像上面那样修复它之前，它不是和它的原始代码一样吗？您能否简单地演示如何对您的代码建模？
var TasksView = Backbone.View.extend({
    tagName: 'li',

    template: _.template($('#taskTemplate').html()),

    events: { 
         'click .delete': 'delete',
         'click .complete': 'updateStatus',
         'dblclick span': 'edit'
    },

initialize: function(){
          this.model.on('change', this.render, this);
          this.model.on('remove', this.unrender, this);
          this.render();
    },

    render: function(){
          var markup = this.template(this.model.toJSON());
          this.$el.html(markup);
          return this; 
    },

    unrender: function(){
          this.$el.remove();
    },

    delete: function(){
          this.model.destroy();
          this.$el.remove();
    },

    updateStatus: function(){
          this.model.set('completed', !this.model.get('completed'));
    },

    edit: function(){
          var text = prompt('What should we change your task to?', this.model.get('text'))
          this.model.set('text',text);
    },

});

var AppView = Backbone.View.extend({
    el:'#tasks',

    events: {
        'click .add': 'add',
        'click .clear': 'clearCompleted'
    },

    initialize: function(){
        this.collection = new Tasks();
        this.collection.on('add', this.addOneTask, this);
        this.items = this.$el.children('ul');

    },

    add: function(){
        var text = prompt('What do you need to do?');
        var task = new Task({text: text});
        this.collection.add(task);
    },

    render: function(){

    },

    addOneTask: function(task){
        var view = new TasksView({model:task});
        this.items.append(view.render().el);
    },

    clearCompleted: function(){
        var completedTasks = this.collection.completed();
        this.collection.remove(completedTasks);
    }

});