단추를 사용하여 json에서 백본 컬렉션을 채우는 방법

검색 기능을 통해 검색하는 json 개체의 커다란 컬렉션이 있지만 검색 문자열에 따라 출력이 달라질 수 있습니다. 명부. 모바일 환경에서 터치 모브를 추가하고 각 객체에 터치 시작 및 터치를 추가하면 번거롭고 메모리 소비가 발생합니다. backbone.js를 사용하여 객체를 표시하는 최소한의 방법이 있으며 버튼과 같은 트리거를 사용하면 강력해질 수 있다는 솔루션을 발견했습니다. 나는 그걸 가지고 앞으로 나아갈 방법을 모르지만. 이것은 버튼이없는 작동 예제입니다. 그리고 내가 어떻게 소리를 지르는거야? 내가 당신을 잘 이해하면단추를 사용하여 json에서 백본 컬렉션을 채우는 방법

<script> 
    //model - define value objects. 
    var Client = Backbone.Model.extend({ 
     defaults: { 
      name: 'cole', 
      age: '12' 
     } 
    }); 
    //collection - load json 
    var ClientCollection = Backbone.Collection.extend({ 
     defaults: { 
      model: Client 
     }, 
     model: Client, 
     url: './json/test.json', 
    //override parse due to json format. point to "items" 
     parse: function (response, xhr) { 
      return response.items; 
     } 
    }); 
    //view. init collection. listen for data to be loaded. render. 
    var ClientView = Backbone.View.extend({ 
     initialize: function() { 
      this.collection = new ClientCollection(); 
      this.collection.bind("reset", this.render, this); 
      this.collection.fetch(); 
     }, 
     render: function() { 
      //append to html here ... 
      //alert(this.collection.at(0).get("name")); 
      //alert(this.collection.length) 
      for (var i = 0; i < this.collection.length; i++) { 
       $('#append-el').append('<li>' + this.collection.at([i]).get("name") + '; ' + this.collection.at([i]).get("age") + '</li>') 
      } 

     } 
    }); 
    var clientView = new ClientView(); 

</script> 

<div id = "append-el"></div>

출처

2012-10-30 syarul

은 버튼을 가리키는보기에 이벤트 리스너를 추가 이 방법을 만들고이 같은 collection.fetch을 트리거하십시오.

,fillCollection: function(){ 
    this.collection.fetch(); 
}

출처

2012-10-30 10:00:13

모델 데이터가 서버 [fetch] (http://backbonejs.org/#Collection-fetch) – mumu2

에서 반환되면 this.render()가 this.collection.fetch()를 호출하여 "재설정"이벤트가 트리거됩니다. 맞습니다 ... 나는 그것을 감독했다. –

예, 해결책은 fetch()와 함께 이벤트 리스너를 갖는 것이고, fetch는 json에서 데이터를 검색하는 작업을 수행합니다. 감사 – syarul

다음이 작동합니다 : 이벤트가,이

,events { 
    "click #buttonID" : "fillCollection"// <- this is a method name 
}

같은 해시와

var ClientView = Backbone.View.extend({ 
    el: '#append-el', 
    events: { 
     'click button': 'onButtonClick' 
    }, 
    initialize: function() { 
     _.bindAll(this); 
     this.collection = new ClientCollection(); 
     this.collection.bind("reset", this.renderClients); 
     this.render(); 
    }, 
    render: function() { 
     //append to html here ... 
     this.$el.append('<button type="button">Fetch clients</button><ul class="clients"></ul>'); 
    }, 
    renderClients: function() { 
     var $ul = this.$('ul.clients').empty(); 
     this.collection.each(function(client) { 
      $ul.append('<li>' + client.get("name") + '; ' + client.get("age") + '</li>'); 
     }); 
    }, 
    onButtonClick: function(e) { 
     this.collection.fetch(); 
    } 
});

출처

2012-10-30 09:57:06 mumu2

예,이 솔루션은 속임수를 사용했지만 el : 'div # append-el'은 전체 함수를 트리거하지 않습니다. el로 변경하면 'body'전체 스크립트가 작동하지만 조금 우둔합니다. 그걸로. – syarul

한 번에 수천 개의 항목을 가져 오지 않을 것을 제안합니다. 100 최대 200으로 제한하십시오. 그런 다음 목록을 스크롤하는 것을 듣기 시작하여 필요한 나머지 항목을 가져옵니다 (사용자가 스크롤 영역의 끝에 접근하거나 맨 아래에 "추가로드"버튼을 놓으면 자동으로로드 할 수 있습니다) .

Backbone 용으로 여러 개의 페이징 플러그인이 있거나 단순히 render() 함수에서 렌더링 된 요소 수를 제한 할 수 있습니다.

출처

2012-10-30 10:42:31 nxtwrld

단추를 사용하여 json에서 백본 컬렉션을 채우는 방법

답변

관련 문제