整理一個ribs.js集合？

Question

一個人如何創建一個由id組織的集合（在ribs.js中）。 例如，我認為通常需要按日期，類別，關鍵字和列表類型來組織集合。 就我而言，我正在嘗試尋找一種優雅的方式來組織球員與團隊。

我認為我不需要插件，我的目標只是使用一個干凈的json文件將播放器分組到一個div中，以便我可以有一個很好的組織列表。 同樣理想情況下是很好用這一個JSON文件，結構HTML相似，如何JSON本身在嵌套方面的結構，在我的例子league是一切的父母，然后team是的父players 。

我已經多次閱讀了許多主干教程，並且相當輕松地理解了流程和語法，但是所有教程都與一個集合一起工作，並以沒有特定的順序輸出一個簡單的列表。

基本上，我希望能夠創建一個干凈的json數組，如下所示。 然后將其轉換為組織良好的HTML。

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

}    

因此，這種json結構是有效的，但不是我使用過的嵌套結構，因此訪問模型需要一些不同的技術，我希望了解這種數組是否理想？ 同樣如果我是這樣的話，我怎么說Kobe ， Steve在一個也許叫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數據和ebrian.js，如何為該數組創建可維護的視圖？

最后說明：我能夠使用兩個json文件成功地將玩家分組到團隊中，並分配與團隊ID相匹配的玩家和ID，然后將團隊集合與玩家集合循環到內部，並where進行組織（我想重新思考一下）這個更好）。 對我來說，這沒有利用主干網，這會造成混亂，對我來說似乎是錯誤的。 因此，我再次希望在這里提高自己的知識並變得更好。 我將非常感謝您提供簡潔明了的信息，我真的很難解決這個問題：)

謝謝！！

Answer 1

將您的JSON保持在Backbone友好的結構中，這意味着一旦將模型放入集合中就可以輕松組織它們。

JSON范例

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

考慮到大多數主干集合都是通過RESTful 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()
});

這里的代碼未經測試

Answer 2

首先建立數據的工作模型。 您的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/

一旦結構就位，就可以擔心渲染它。 假設您有這個（下划線）模板

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

您可以更改Team模型以輸出模型的序列化表示形式：

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

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

並渲染您的模板

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

這通常會進入視圖。

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

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/