1

この非常に基本的なFirebase Backfire サンプル アプリケーションを実装しようとしています。その正確なJavaScriptで説明されているとおりのhtmlページがあります。[追加] ボタンをクリックしても何も起こりません。

ここで非常に明白な何かが欠けていますか、それともサンプルコードにバグがありますか? [追加] ボタンの onClick ハンドラーがまったく表示されません...これはどのように機能するのでしょうか?

注 - この投稿から実際の firebase の URL を置き換えました - Firebase Web サイトの例には間違いなくバグがありました。しかし、 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 Web サイトの例には、this.todos = new TodoList(); を初期化しようとしていたため、間違いなくバグがありました。しかし、TodoList はどこにも存在しないので、TodoCollection() に変更しました。

  2. ボタンの onClick ハンドラがないので、追加しました。

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