합니까 BackboneFire 지원 비 오토 싱크 컬렉션

Question

기본적으로 내가 원하는이 설정 :

var Game = Backbone.Model.extend({ 
    defaults: { 
    }, 
    autoSync: true 
}); 

var Games = Backbone.Firebase.Collection.extend({ 
    url: 'https://<myapp>.firebaseio.com/games', 
    autoSync: false, 
    model: Game 
}); 

각 게임 자동 동기화 서버 데이터를해야하지만 전체 CHILD_ 듣고 싶어하지 않는

* Firebase 이벤트 제품군. 목표는 전체 목록을 다시 그리는 대신 개별 항목보기를 업데이트하는 것입니다.

종류 밖에 사람과 행복 코딩에 관하여)

Answer 1

당신은 사용할 수 autoSync과 Backbone.Firebase.Collection를 사용하여 개별 항목을 업데이트 할 수 있습니다. 개별 항목을 다시 렌더링하려면 항목에서 변경 이벤트를 발생시킬 때들을 필요가 있습니다. 이 개념은 Firebase 문서의 BackboneFire 빠른 시작에 나와 있습니다.

그러나 빠른 설명에 Backbone.Firebase.Model과 Backbone.Firebase.Collection을 섞을 수는 없습니다.

도도 모델 아래의 샘플에서 & 컬렉션

는 일반 Backbone.Model가 Backbone.Firebase.Collection에서 어떻게 사용되고 있는지 확인할 수 있습니다. 컬렉션의 기본값은 autoSync입니다.

// 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, 
    url: "https://<your-firebase>.firebaseio.com" 
}); 

도도보기

아래의 샘플은 개인 할 일 항목에 대한 도면이다. initialize 함수 안에서 listenTo 메서드는 모델의 change 이벤트를 수신하는 데 사용됩니다. change 이벤트는 모델이 원격 또는 로컬로 업데이트 될 때마다 (변경 사항을 원격으로 유지함) 해고됩니다.

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

목록을 쉽게뿐만 아니라 렌더링 할 수있는 목록을 설정 TodoView와

을 렌더링합니다. 아래 AppView의 initialize 기능에서 collection을 듣고 TodoCollection이됩니다. 항목이 콜렉션에 추가 될 때마다 addOne 기능이 실행됩니다. addOne 함수는 단순히 새 TodoView을 페이지에 추가합니다.

// The view for the entire application 
var AppView = Backbone.View.extend({ 
    el: $('#todoapp'), 
    initialize: function() { 
    this.list = this.$("#todo-list"); // the list to append to 

    // by listening to when the collection changes we 
    // can add new items in realtime 
    this.listenTo(this.collection, 'add', this.addOne); 
    }, 
    addOne: function(todo) { 
    var view = new TodoView({model: todo}); 
    this.list.append(view.render().el); 
    } 
});