backbone.js 전체 데이터베이스 테이블로 채우기 방법

Question

Model 및 Collection을 정의했으며 데이터베이스에 이미 레코드가 있으므로 페이지로드시 해당 레코드를 모두 표시하려고합니다.

Backbone.sync을 사용해 보았지만 Chrome 디버깅 모드에서 여전히 빈 컬렉션이 표시됩니다.

내 Backbone.js 코드 :

http://jsfiddle.net/GhaPF/15/

(나는 때문에 템플릿 종속성이 몇 가지 코드를 제거했다). 여기

$(document).ready(function() { 

    var Item = Backbone.Model.extend({ 
     defaults: { "date": "", 
        "text": "default text" 
       }, 
     initialize: function() {  // STEP 3 
      var dateString = giveMeDate(); 
      this.set("date", dateString); 
     }, 
     urlRoot : './items' 
    }); 

    var ItemList = Backbone.Collection.extend({ 
     model: Item, 
     url: './items/', 
     initialize: function() { 
      this.fetch(); 
     } 
    }); 


    //************ VIEW ******************************** 
    var ItemListView1 = Backbone.View.extend({ 
     el: 'body', 
     initialize: function(myitemList) { 
      this.itemlist = myitemList; 
      this.itemlist.bind('add', this.addOneItem, this); 
      this.render(); 
     }, 
     addOneItem: function() { 
      this.render(); 
     }, 
     render: function() {    // STEP 5  this is called because add() is bound to this.render (in initialization of this View) 
      text = this.itemlist.toJSON(); 
      string = JSON.stringify(text); 
      $("#view1").html(''); 
      $.tmpl("itemTemplate", text).appendTo("#view1"); 
      return this; 
     }, 
     events: { 
      "keypress #new-item": "createOnEnter" // STEP 1 
     }, 
     createOnEnter: function(e) { 
      if (e.keyCode != 13) return; 
      if (!$("#new-item").val()) return; 
      this.itemlist.create({"text": $("#new-item").val()}); // STEP 2 
      $("#new-item").val(''); 
     } 
    }); 


    $("#new-item").focus(); 
    var itemlist = new ItemList(); 
    Backbone.sync("read", itemlist); 
    var myitemListView = new ItemListView1(itemlist); 

내가 Backbone.sync 후 컬렉션에서 볼 것입니다 :

d 
_byCid: Object 
_byId: Object 
length: 0 
models: Array[0] 
__proto__: x 

Answer 1

1. 그 방법이 다른 동기화 방법을 덮어 쓸 수 있습니다로 당신은 아마 직접 동기화 호출해서는 안

   (localStorage, IndexedDB, couchdb 또는 기타 지원). 동기화는 "스토리지 드라이버"와 더 비슷합니다.

2. 컬렉션을 채우기 위해 fetch를 호출해야합니다. 그것은 "가난한 스타일"간주

   itemlist.fetch({success: function (models) { 
       console.log("got", models); 
   }); 
   var myitemListView = new ItemListView1({collection: itemList}); 
   

3. 는 오른쪽 페이지로드 후 가져 비동기로 컬렉션을 채우는 : 그래서 코드에서,이 같은해야한다. 일반적으로 페이지와 함께 전송되는 코드로 채워야하며 컬렉션에 대한 후속 업데이트에만 가져 오기를 사용해야합니다. 당신은 비동기 인출하고 주장하는 경우 목록 작성에 빈에서 갈 때 위의 코드 예제에서

, 당신은 (당신이 실제로 불필요한 점멸을 방지하기 위해 채워 컬렉션을 가질 때까지 뷰를 생성 지연 할 수 있습니다 뷰는 콜렉션에 바인드되어 페치가 완료되면 리셋됩니다).