backbone.js 컬렉션을 구성 하시겠습니까?

Question

id로 구성된 컬렉션 (backbone.js)을 만드는 방법은 무엇입니까? 예를 들어, 컬렉션이 날짜, 카테고리, 키워드, 유형별로 정리되어야한다는 것이 꽤 일반적이라고 생각합니다. 필자의 경우 나는 선수를 팀으로 구성하는 우아한 방법을 찾고있다.

나는 이것을 위해 플러그인이 필요하다고 생각하지 않는다. 나의 목표는 하나의 깨끗한 json 파일을 사용하면서 div로 그룹화되도록 선수들을 조직하는 것이다. 그래서 나는 훌륭한 조직 목록을 가질 수있다. 다시 한번 이상적으로 이것에 대해 하나의 json 파일을 사용하고, json 자체가 중첩의 관점에서 구조화 된 것과 유사한 HTML을 구조화하는 것이 좋을 것입니다. 예를 들어 이 모든 것의 부모가 되려면 team은 players의 부모입니다.

많은 백본 자습서를 여러 번 거쳤으며 흐름과 구문을 매우 편안하게 이해했지만 모든 자습서는 특정 순서없이 간단한 목록을 출력하는 하나의 컬렉션으로 작동합니다.

기본적으로 아래처럼 깨끗한 json 배열을 만들 수 있기를 바랍니다. 그런 다음 그것을 잘 조직 된 HTML로 바꾸십시오.

{ 
    "league": 
     [{ 
     "team":"Lakers", 
     "players": [ 
       { 
        "name": "Kobe" 
       }, 
       { 
        "name": "Steve" 
       } 
     ] 
     }, 
     { 
     "team":"Heat", 
     "players": [ 
       { 
        "name": "LeBron" 
       }, 
       { 
        "name": "Mario" 
       } 
     ] 
     }] 

}  

그래서이 JSON 구조는 유효하지만 그렇게 모델에 접근, 나는 그것이 조금 더 중첩 된 것 사용하고 하나의 아니다 약간 다른 기술을 필요로, 나는 배열의 이런 종류의 이상적인 경우 배울 바라고? 또한 그렇다면 어떻게 그룹화할까요? Kobe, Steve은 div에 아마도 Lakers이라는 단어가 붙어있는 반면 분명히 LeBron과 Mario은 div 내에서 그 둘을 아마도 Heat 클래스로 유지합니다.

또 다른 예제는 영화 배우에게 배우가 될 것 같은데, json 형식의 이상적인 것 (나처럼 보인다)은 분명히 배우를 존경받는 영화와 그룹화합니까? 나는 멋지고 깔끔한 것을 출력하기 위해 템플릿이나 템플릿으로 깨끗한 뷰나 뷰를 만드는 것에 대한 몇 가지 팁을 크게 감사 할 것입니다.

{ 
    "movies": 
     [{ 
     "title":"Prisoners", 
     "actors": [ 
       { 
        "name": "Hugh Jackman" 
       }, 
       { 
        "name": "Jake Gyllenhaal" 
       } 
     ] 
     }, 
     { 
     "title":"Elysium", 
     "actors": [ 
       { 
        "name": "Matt Damon" 
       }, 
       { 
        "name": "Jodie Foster" 
       } 
     ] 
     }] 

} 

이 json 데이터 및 backbone.js를 다시 사용하면이 배열에 대한 유지 관리 가능보기를 어떻게 만듭니 까?

최종 참고 : 나는 수 있었다 성공적으로이 개 JSON 파일을 사용하고, 팀 ID를 일치 선수와 ID를 할당 팀 그룹 플레이어, 다음을 구성 할 where를 사용하여 내부 플레이어 컬렉션 팀 수집을 반복합니다 (나는 이것을 더 잘 생각하고있다). 나에게 이것은 백본을 이용하지 않고, 혼란스러워 할 수 있으며, 나에게 잘못된 것처럼 보인다. 다시 한번 저는 여기서 지식을 향상시키고 나아지기를 바랍니다. 나는 엄청나게 명확한 간결한 정보를 평가할 것이고, 나는이 주제에 대해 내 머리를 싸우기 위해 정말로 투쟁한다. :)

고맙습니다!

Answer 1

시작 안된이다. JSON은 계층 구조를 제안합니다. 각 계층에는 플레이어 컬렉션이 포함되어 있습니다. 가능한 구현은 다음과 같습니다.

var Player = Backbone.Model.extend(); 
var Players = Backbone.Collection.extend({ 
    model: Player 
}); 
var Team = Backbone.Model.extend({ 
    constructor: function(data, opts) { 
     // I like my subcollections as attributes of the model 
     // and not on the settable properties 
     this.players = new Players(); 

     Backbone.Model.call(this, data, _.extend(opts, {parse: true})); 
    }, 
    parse: function(data) { 
     // Players are handled in a subcollection 
     if (_.isArray(data.players)) 
      this.players.reset(data.players); 

     // They are removed from the model properties 
     return _.omit(data, 'players'); 
    } 
}); 
var Teams = Backbone.Collection.extend({ 
    model: Team, 
    parse: function(resp) { 
     return resp.league; 
    } 
}); 

이제 루트 컬렉션을 만들 수 있습니다. 데이터로 인스턴스화하는 대신 fetch 수 있습니다.

// teams list 
var teams = new Teams(data, {parse: true}); 

// for example, to get all players in all teams 
var allplayers = _.flatten(teams.map(function(team) { 
    return team.players.models; 
})); 
console.log(_.invoke(allplayers, 'get', 'name')); 

그리고 데모 : 당신은 장소에 구조를 일단 http://jsfiddle.net/8VpFs/

, 당신은 그것을 렌더링에 대해 걱정할 수 있습니다. 템플릿

var tpl = _.template($('#tpl').html()); 
var html = tpl({ 
    teams: teams.toJSON() 
}) 
$('body').append(html); 

이를

var Team = Backbone.Model.extend({ 
    // ... as before 

    toJSON: function() { 
     var json = Backbone.Model.prototype.toJSON.call(this); 
     json.players = this.players.toJSON(); 
     return json; 
    } 
}); 

및 렌더링 : 당신은 출력하여 Team 모델을 사용하면 모델의 직렬화 표현을 변경할 수의 당신이 (밑줄) 템플릿

<ul> 
    <% _(teams).each(function(team) { %> 
     <li><strong><%= team.team %></strong> 
     <ul> 
      <% _(team.players).each(function(player) { %> 
       <li><%= player.name %></li> 
      <% }); %> 
     </ul> 
    </li> 
    <% }); %> 
</ul> 

을 상상하자 보통보기로 들어갑니다. fetch

var teams = new Teams(); 
teams.fetch().then(function() { 
    var tpl = _.template($('#tpl').html()); 
    var html = tpl({ 
     teams: teams.toJSON() 
    }); 
    $('body').append(html); 
}); 

http://jsfiddle.net/8VpFs/2/

Answer 2

JSON을 백본 친화적 인 구조로 유지하면 모델을 컬렉션에 배치 한 후에도 쉽게 구성 할 수 있습니다.

JSON 예제

[ 
    { league : 1, team : 'lakers', player : 'kobe' } 
    { league : 1, team : 'lakers', player : 'steve' } 
    // And so on 
] 

대부분의 백본 모음이 모음에 직접 가져가 용이하고 분류 될 것이다 편안한 JSON API를 통해 내장되어 있음을 고려한다.컬렉션에 대한 comparator() 함수는 컬렉션에 모델을 추가 할 때마다 또는 실행을 요청할 때마다 실행됩니다.

백본 수집 예

var Players = Backbone.Collection.extend({ 

    initialize : function() { 
     // Grab the JSON from the API 
     // this.fetching is now a deferred object 
     this.fetching = this.fetch(); 
    } 

    // Comparator example one, as a string 
    comparator : 'team', 

    // Comparator example two, as a function 
    comparator : function(model) { 
     return model.get('team'); 
    } 

}); 

함수 접근법으로서 비교기는 달리 문자열 접근법으로서 비교기 나을 분명히 더 복잡한 정렬 알고리즘에 더 적합하다. 함수 접근법은 비록 문자열이 반환 될 수 있지만 (위와 같음), -1 또는 1은 정렬 위치를 나타내는 더 좋은 반환 값입니다. 팀의 다음 선수의 이름으로, 마지막 예제를 사용하는 경우 모델 비교 모델이 그것으로 정렬 된 컬렉션에 추가됩니다 이제 때마다

comparator : function(modelA, modelB) { 
    var teamA = modelA.get('team'), 
     playerA = modelA.get('player'), 
     teamB = modelB.get('team'), 
     playerB = modelB.get('player'); 

    if (teamA < teamB) { // string comparison 
     return 1; 
    } else if (playerA < playerB} { 
     return 1; 
    } else { 
     return -1; 
    } 
} 

와

비교기의 예는, 정확한 위치입니다.

var ViewExample = Backbone.View.extend({ 

    el : "#example-container", 

    render : function() { 

     var self = this; 

     // Use the deffered object to make sure models are 
     // all available in the collection before we render 
     this.collection.fetching.done(function() { 

      self.collection.each(function(model) { 

       self.$el.append('<p>' + model.get('player') + '</p>'); 

      }); 

     }); 

     return this; 
    } 
}); 

// Create the view and pass in the collection 
// that will immediately fetch it's models 
var view = new ViewExample({ 
    collection : new Players() 
}); 

코드 여기에 컬렉션을 사용

간단한 예를 들어보기는 데이터의 작업 모델을 구축하여