0

backbone.js と bootstrap.js を使用して簡単なページを作成しようとしています。モデルのコレクション全体をブートストラップのリストとして表現できるように、backbone.js のビューを操作する方法を理解できません。ネットでたくさんの記事を検索してみましたが、簡単に理解できるものは見つかりませんでした。以下の方法に関するブログまたは記事を提案してください。

<html>
<body>
    <script>
        Boys = Backbone.Model.extend({
            defaults : {
            Name : '',
            Age : ''
            }
        });

        GardeA = Backbone.Collection.extend({
            model : Boys,
            url : http://localhost:8080/getGradeAData,
        });

        GradeAView = Backbone.View.extend({
            el: '.container .span12',
            initialize: function(){
                gradeA = new GardeA();
                gradeA.fetch();
                this.render();
            },
            render: function(){ 
                //How can I assign the model collection here
                //directly to render in the below bootstrap html page can you please help
                this.$el.html('List of students');
            }
        });
        gradeAView = new GradeAView();
</script>

<div class="container"> 
    <div class="hero-unit">Loading</div>
        <div class="row">
            <div class="span12">
                <h3>Projects: </h3>
                <ul class="nav nav-tabs nav-stacked">
                    <!-- need to show list of students here-->
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

私はあなたのコードを修正しました（まだテストしていません）..

<html>
<body>
    <script>
        Boys = Backbone.Model.extend({
            defaults : {
            Name : '',
            Age : ''
            }
        });

        GardeA = Backbone.Collection.extend({
            model : Boys,
            url : http://localhost:8080/getGradeAData,
        });

        GradeAView = Backbone.View.extend({
            el: '#list-of-grade-a-students',
            initialize: function(){
                this.gradeA = new GardeA();
                this.gradeA.fetch();
                this.listenTo(this.gradeA, "sync", this.render);
            },
            render: function(){ 
                //lets generate html
                html = ""
                for (var i = 0; i < this.gradeA.length; i++) {
                     student = this.gradeA.at(i)
                     html += "<li> student name: " + student.get("name") + " </li> "
                }
                //lets add that html to view's element
                this.$el.html(html);
            }
        });
        gradeAView = new GradeAView();
</script>

<div class="container"> 
    <div class="hero-unit">Loading</div>
        <div class="row">
            <div class="span12">
                <h3>Projects: </h3>
                <ul class="nav nav-tabs nav-stacked" id="list-of-grade-a-students">
                    <!-- need to show list of students here-->
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

いくつかの重要なポイント:

  • 学生のリストが必要な要素に追加idされました。ulすべてのビューには、そこにある親要素が必要ですel

  • renderメソッドは魔法のようなものではありません。その中にhtmlを作成してから、.html()（または場合によっては.append()）を使用してDOMに追加する必要があります

  • render直後に呼び出した場合fetch、コレクションがサーバーから取得されたという保証はありません。render が呼び出されたときに、サーバーから何かを取得していない可能性は十分にあります。そのため、render メソッドでlistenToビューをコレクションのイベントにバインドするために使用します。syncこれにより、コレクションがサーバーと正常に同期されるたびにレンダリングが呼び出されるようになります

于 2013-03-28T19:43:33.743 に答える