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 时，您还没有从服务器获取任何东西。因此我们使用您的渲染方法listenTo将视图绑定到集合的事件。sync这将确保在集合与服务器成功同步时调用渲染

于 2013-03-28T19:43:33.743 回答