1

tl;dr http://jsfiddle.net/fRTBU/2/

野球都市のリストを表示しているマリオネットアプリを用意してください。

window.teams = new MyApp.Models.TeamCollection([
        { League : "AL", City : "Boston"  , TeamId : 1 },
        { League : "AL", City : "Chicago" , TeamId : 2 },
        { League : "NL", City : "Chicago" , TeamId : 3 }
        ]);

リーグごとに分類された都市のリストが必要です。

何かのようなもの ： 

<table>
<tr>
   <td> 
     <h2>AL</h2>
     <ul>
        <li>Boston 1 </li>
        <li>Chicago 2</li>
     </ul>
   </td>
</tr>
<tr>
   <td> 
     <h2>NL</h2>
     <ul>
        <li>Chicago 3 </li>
     </ul>
   </td>
</tr>
</table>

私はそれをレンダリングすることができます。

しかし、新しいチームを追加しようとすると (拡張用:P)

window.teams.push(new MyApp.Models.Team({ League : "NL", 
                                            City : "Washington", 
                                          TeamId : 4 }));

コレクション変更イベントが発生しない ( JSFiddle 内)

http://jsfiddle.net/fRTBU/2/

collectionEvents: {
    "reset": "myFunc"  ,
    "change" : "myFunc", 
    "add" : "myFunc"
},
myFunc: function () {
    Logger('myFunc');
    var grid = window.teams.groupBy(function (row) {
        return row.get("League");
    });
    this.collection = new Backbone.Collection(_.toArray(grid));
}

または私のアプリで（それを取り巻くより多くのロジックがあります）

ReferenceError: TeamId is not defined

アプリのメイン構造

MyApp.Models.Team = Backbone.Model.extend({
    idAttribute: 'TeamId'
});

MyApp.Models.TeamCollection = Backbone.Collection.extend({
    model: MyApp.Models.Team
});

MyApp.Views.ListItemView = Backbone.Marionette.ItemView.extend({
    tagName: 'tr',
    template : '#row-template'
});

MyApp.Views.ListCompositeView = Backbone.Marionette.CompositeView.extend({
    itemView: MyApp.Views.ListItemView,
    template: "#list-template",
    itemViewContainer: "ul",
    initialize: function () {
        this.collection = new Backbone.Collection(
                                  _.toArray(this.model.attributes));
    },
    onRender: function () {
        $(this.$el).find("h2.ListHead")
                   .html(this.collection.models[0].get('League'));
    }
});

MyApp.Views.TableView = Backbone.Marionette.CompositeView.extend({
    itemView: MyApp.Views.ListCompositeView,
    tagName: "table",
    itemViewContainer: "tbody",
    template: "#table-template",
    initialize : function () {
       this.myFunc();
    },
    collectionEvents: {
        "reset": "myFunc"  ,
        "change" : "myFunc", 
        "add" : "myFunc"
    },
    myFunc: function () {
        Logger('myFunc');
        var grid = window.teams.groupBy(function (row) {
            return row.get("League");
        });
        this.collection = new Backbone.Collection(_.toArray(grid));
    }
});

MyApp.Views.ListItemViewそれらが逆に起こっていると私が言うと、コレクションをMyApp.Views.ListCompositeView取得してモデルを取得するように見えます。

JsFiddle リンクの再 http://jsfiddle.net/fRTBU/2/

4

1 に答える 1

2

さて、ここでいくつかの問題があります。イベントが で発生しない理由は、TableViewそのwindow.teamsコレクションをthis.collection = new Backbone.Collection(_.toArray(grid));-- その時点でそのコレクションはもはやwindow.teams.

別の問題は、次のようにモデル化されているかのようにデータを表示しようとしていることです。

Leagues
   |______League
   |         |______Team
   |         |______Team
   |
   |______League
             |______Team
             |______Team
             |______Team

...しかし、データは次のように構造化されています。

  Teams
   |______Team
   |______Team
   |______Team

1 つの解決策はTeamCollection、形式でデータを受け入れる を用意し、リーグごと{ League : "AL", City : "Boston" , TeamId : 1 }に を更新する関数に変更イベントをバインドし、そのコレクションを 2 つのビュー クラスの基礎として使用することです。LeagueTeamsCollectionCompositeViewItemView

于 2013-04-23T23:16:27.670 に答える