Javascript Firebase回火快速启动指南；行不通

我正在努力实现这一非常基本的目标。我有一个html页面，完全按照JavaScript描述。单击“添加”按钮时没有发生任何事情

我是否在这里遗漏了一些非常明显的东西，或者示例代码中是否存在错误？我没有看到添加按钮的onClick处理程序……这怎么可能工作

注 -我从这篇文章中替换了我真正的firebase url -Firebase网站上的示例肯定有一个bug，因为它试图初始化它；但是TodoList在任何地方都不存在……所以我猜他们的意思是TodoCollection（） -chrome中没有任何类型的JavaScript错误 html:

添加

JavaScript:

// A simple todo model
var Todo = Backbone.Model.extend({
    defaults : {
        title : "New Todo"
    }
});
// Create a Firebase collection and set the 'firebase' property
// to the URL of your Firebase
var TodoCollection = Backbone.Firebase.Collection.extend({
    model : Todo,
    firebase : "https://<myfirebaseurl>.firebaseio.com"
});

// A view for an individual todo item
var TodoView = Backbone.View.extend({
    tagName : "li",
    template : _.template("<%= title %>"),
    initialize : function() {
        this.listenTo(this.model, "change", this.render);
    },
    render : function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
});

// The view for the entire application
var AppView = Backbone.View.extend({
    el : $('#todoapp'),
    initialize : function() {
        console.log("AppView initialize")
        this.list = this.$("#todo-list"); // the list to append to
        this.input = this.$("#new-todo"); // the textbox for new todos
        this.addBt = this.$('#add-todo'); // the button to add
        // the data we are syncing from Firebase
        // this is loaded as soon as the new TodoList has been created
        this.todos = new TodoCollection();
        // by listening to when the collection changes we
        // can add new items in realtime
        this.listenTo(this.todos, 'add', this.addOne);
    },
    addOne : function(todo) {
        var view = new TodoView({
            model : todo
        });
        this.list.append(view.render().el);
    },
    createTodo : function(e) {
        if (!this.input.val()) {
            return;
        }
        // create a new location in firebase and save the model data
        // this will trigger the listenTo method above and a new todo view
        // will be created as well
        this.todos.create({
            title : this.input.val()
        });
        this.input.val('');
    }
});
// Create a function to kick off our BackFire app
function init() {
    // The data we are syncing from Firebase
    var collection = new TodoCollection();
    var app = new AppView({
        collection : collection
    });
}
// When the document is ready, call the init function
$(function() {
    init();
});

//一个简单的todo模型
var Todo=Backbone.Model.extend({
默认值：{
标题：“新的待办事项”
}
});
//创建Firebase集合并设置“Firebase”属性
//到Firebase的URL
var TodoCollection=Backbone.Firebase.Collection.extend({
型号：Todo，
火基：https://.firebaseio.com"
});
//单个待办事项的视图
var TodoView=Backbone.View.extend({
标记名：“li”，
模板：u.template（“”），
初始化：函数（）{
this.listenTo（this.model，“change”，this.render）；
},
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
});
//整个应用程序的视图
var AppView=Backbone.View.extend({
el:$（'todoapp'），
初始化：函数（）{
日志（“AppView初始化”）
this.list=this.$（“#待办事项列表”）；//要附加到的列表
this.input=this.$（“#新todo”）；//新todo的文本框
this.addBt=this.$（'#add todo'）；//要添加的按钮
//我们正在从Firebase同步的数据
//创建新的TodoList后，将立即加载此文件
this.todos=newtodocollection（）；
//通过侦听集合何时更改，我们可以
//可以实时添加新项目
this.listenTo（this.todos，'add'，this.addOne）；
},
addOne：函数（todo）{
var视图=新的TodoView({
型号：todo
});
this.list.append（view.render（）.el）；
},
createTodo:函数（e）{
如果（！this.input.val（））{
返回；
}
//在firebase中创建新位置并保存模型数据
//这将触发上面的listenTo方法和一个新的todo视图
//也将创建
这个是.todos.create({
标题：this.input.val（）
});
这个.input.val（“”）；
}
});
//创建一个函数来启动我们的逆火应用程序
函数init（）{
//我们正在从Firebase同步的数据
var collection=newtodocollection（）；
var app=new AppView({
收藏：收藏
});
}
//文档准备好后，调用init函数
$（函数（）{
init（）；
});

Firebase网站上的示例肯定有一个bug，因为它试图初始化它；但是TodoList在任何地方都不存在……所以我将其更改为TodoCollection（）

按钮没有onClick处理程序，所以我添加了它

events: {
  "click #add-todo"   : "createTodo",
},  

---

看起来大卫今天早上已经安排好了。应该马上就到现场了。干杯

events: {
  "click #add-todo"   : "createTodo",
},