Question

我正在努力实现这个非常基本的Firebase Backfire example application。我有一个完全按照精确JavaScript描述的html页面。单击“添加”按钮时，没有任何操作。

我是否遗漏了一些非常明显的内容，或者示例代码中是否存在错误？我没有看到Add按钮的任何类型的onClick处理程序......这怎么可能有效呢？

请注意 - 我用这个帖子替换了我真正的firebase网址 - Firebase网站上的示例肯定有一个错误，因为它试图初始化this.todos = new TodoList（）;但是TodoList并不存在于任何地方.....所以我猜他们的意思是TodoCollection（） - Chrome中没有任何类型的JavaScript错误 HTML：

<div id="todoapp">
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New Todo" />
  <button id="add-todo">Add</button>
</div>

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();
});

Answer 1

Firebase网站上的示例肯定有一个错误，因为它试图初始化this.todos = new TodoList（）;但是TodoList在任何地方都不存在.....所以我把它改成了TodoCollection（）。
按钮没有onClick处理程序，所以我添加了它。
```
events: {
  "click #add-todo"   : "createTodo",
},  
```

Firebase Backfire快速入门指南不起作用

1 个答案: