3

私はBackbone.Marionetteでコレクションを構築しています.David Sulcが彼の著書「A Gentle Introduction to Backbone.Marionette」で提供した例に大きく基づいていますhttps://github.com/davidsulc/marionette-gentle-introduction/commit /175fc9b7bddfa6fea86954eb769c0cfb3e163c1e .

今のところ、私はまだすべてをインラインで行っています:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Marionette Contact Manager</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/application.css" rel="stylesheet">
    <link href="./css/jquery-ui-1.10.0.custom.css" rel="stylesheet">
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <span class="brand">Secret Identities</span>
        </div>
    </div>
</div>

<div id="main-region" class="container">
    //main area
</div>

<script type="text/template" id="contact-list-item">
    <td> <%= lastName %></td><td> <%= firstName %> </td><td> <%= occupation %> </td>
</script>

<script type="text/template" id="contact-list">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Occupation</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</script>

<script src="./js/vendor/jquery.js"></script>
<script src="./js/vendor/json2.js"></script>
<script src="./js/vendor/underscore.js"></script>
<script src="./js/vendor/backbone.js"></script>
<script src="./js/vendor/backbone.marionette.js"></script>

<script type="text/javascript">
    var Application = new Marionette.Application();

    Application.addRegions({
        mainRegion: "#main-region"
    });

    Application.Contact = Backbone.Model.extend({
        urlRoot: "/rest/example/listHeroes"

    });

    Application.ContactCollection = Backbone.Collection.extend({
        model: Application.Contact,
        url: "/rest/example/listHeroes",
        comparator: "firstName"
    });

    Application.ContactItemView = Marionette.ItemView.extend({
        tagName: "tr",
        template: "#contact-list-item"
    });

    Application.ContactsView = Marionette.CompositeView.extend({
        tagName: "table",
        className: "table table-hover",
        template: "#contact-list",
        itemView: Application.ContactItemView,
        itemViewContainer: "tbody"
    });


    Application.on("initialize:after", function () {
        var list = new Application.ContactCollection;
        list.fetch();
        var contactsView = new Application.ContactsView({
            collection: list
        });


        Application.mainRegion.show(contactsView);
    });

    Application.start();
</script>
</body>
</html>


</body>
</html>

rest get によって返される Json 配列は

[{"firstName":"Bruce","lastName":"Wayne","occupation":"Industrialist"},{"firstName":"Steve","lastName":"Rogers","occupation":"Soldier"},{"firstName":"Natasha","lastName":"Romanov","occupation":"spy"},{"firstName":"Clark","lastName":"Kent","occupation":"Reporter"},{"firstName":"Hal","lastName":"Jordan","occupation":"Pilot"}]

どんな助けでも大歓迎です。

4

2 に答える 2

1

モデルフィールド名をコンパレーターとして記述するだけで役立つかどうかはわかりません。代わりに、以下のようなカスタム関数をコンパレーターに記述できます。

comparator : function (m1, m2) {
    var str1, str2;

    str1 = m1.get('firstName');
    str2 = m2.get('firstName');

    if (str1 && str2) {
        str1 = str1.toLowerCase();
        str2 = str2.toLowerCase();

       if (str1 > str2) {
            return 1;
        } else if(str2 > str1) {
            return -1;
        }
    }
}

sortこれにより、モデルをコレクションに追加/削除するか、コレクションメソッドを呼び出すたびにコレクションがソートされます

于 2013-08-07T07:11:09.123 に答える