1

我正在尝试实现这个非常基本的Firebase Backfire 示例应用程序。我有一个与该确切 JavaScript 描述的完全相同的 html 页面。当我单击“添加”按钮时，什么都没有发生。

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

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

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

1 回答 1

1

  1. Firebase 网站上的示例肯定有一个错误，因为它试图初始化 this.todos = new TodoList(); 但是 TodoList 不存在任何地方.....所以我将其更改为 TodoCollection()。

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

    events: {
  "click #add-todo"   : "createTodo",
},
于 2014-10-25T02:48:36.560 回答