如何使用twitter bootstrap.js在列表中显示数据&；从backbone.js中收集的模型数据？_Backbone.js_Twitter Bootstrap_Backbone Views

如何使用twitter bootstrap.js在列表中显示数据&；从backbone.js中收集的模型数据？

backbone.js twitter-bootstrap

如何使用twitter bootstrap.js在列表中显示数据&；从backbone.js中收集的模型数据？,backbone.js,twitter-bootstrap,backbone-views,Backbone.js,Twitter Bootstrap,Backbone Views,我正在尝试使用backbone.js和bootstrap.js创建一个简单的页面。我无法理解如何使用backbone.js视图，因此我的整个模型集合都要在引导中表示为一个列表。我试着在网上搜索很多文章，但找不到我能理解的简单的东西。你能推荐一些关于如何做到以下几点的博客或文章吗： <html> <body> <script> Boys = Backbone.Model.extend({ defaults : {

我正在尝试使用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>


Boys=Backbone.Model.extend({
默认值：{
名称：“”，
年龄：''
}
});
GardeA=Backbone.Collection.extend({
模特：男孩，
网址：http://localhost:8080/getGradeAData,
});
GradeAView=Backbone.View.extend({
el:“.container.span12”，
初始化：函数（）{
等级A=新GardeA（）；
gradeA.fetch（）；
这个。render（）；
},
render:function（）{
//如何在此处指定模型集合
//直接呈现在下面的引导html页面中，请您提供帮助
这是。$el.html（“学生名单”）；
}
});
gradeAView=新的gradeAView（）；
加载
项目：

我已经修复了您的代码（但尚未测试）


Boys=Backbone.Model.extend({
默认值：{
名称：“”，
年龄：''
}
});
GardeA=Backbone.Collection.extend({
模特：男孩，
网址：http://localhost:8080/getGradeAData,
});
GradeAView=Backbone.View.extend({
el:“a级学生名单”，
初始化：函数（）{
this.gradeA=新GardeA（）；
this.gradeA.fetch（）；
this.listenTo（this.gradeA，“sync”，this.render）；
},
render:function（）{
//让我们生成html
html=“”
对于（变量i=0；i”
}
//让我们将该html添加到视图的元素中
这个.$el.html（html）；
}
});
gradeAView=新的gradeAView（）；
加载
项目：

一些要点：

将
```
id
```
添加到您的
```
ul
```
元素中，学生必须前往该元素。每个视图都应该有父元素，因为那里有
```
el
```
```
render
```
方法不是什么神奇的东西。您需要在其中创建html，然后使用
```
.html（）
```
（或者在某些情况下使用
```
.append（）
```
）将其添加到DOM中
如果在
```
fetch
```
之后立即调用
```
render
```
，则无法保证已从服务器获取集合。很可能在调用render时，您还没有从服务器获取任何东西。因此，我们使用
```
listenTo
```
将视图绑定到集合的
```
sync
```
事件和渲染方法。这将确保在集合与服务器成功同步时调用渲染

谢谢！！！它只进行了一次更正，我不得不删除GradeA集合的“this”引用，在我删除它后，它给了我错误。。

<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>