Javascript 在backbone.js中查看错误

我正在使用python创建一个存储JSON数据的虚拟服务器。我正在尝试获取数据以在仪表板中显示它。我一直在

无法读取未定义的html属性

及

无法读取未定义的属性呈现

我错过了什么

我的主干脚本：

// Create a Model
var Dashboard = Backbone.Model.extend({});

// Create a collection
var DashboardCollection = Backbone.Collection.extend({
  model: Dashboard,
  url: 'http://localhost:8889/api/test'
});

// create an instance of the collection object
var jobList = new DashboardCollection();
    jobList.fetch({success:function(){
            test.render();
        }});
        // Create a jobList view
var jobListView= Backbone.View.extend({
    el: $('.jobsList'),
    template: _.template($('#test-template').html()),

    initialize: function(){
        this.render();
        //this.listenTo(this.model, 'change', this.render);
        //this.listenTo(this.model, 'destroy', this.remove);
    },
    render : function(){

        this.$el.html(this.template({'last_name':'test'}));
        return this;
    }
 });

var test = new jobListView;

和我的HTML：

    <main>
       <div class="row">
            <div class="left glass">
                <!--[if lt IE 9]>
                <div class="legacy-ie-fix"></div>
                <![endif]-->
                <h1>Job List</h1>
                <div class ="jobsList">

                </div>
            </div>
            <div class="right glass">
                <!--[if lt IE 9]>
                    <div class="legacy-ie-fix"></div>
                <![endif]-->
                <h1>Metrics</h1>
                <div id="metrics">
                    <div class="row">
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script type="text/template" id="test-template">
    <table class="table striped">
        <thead>
            <tr>
                <th>Data</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td><%= last_name %></td>
            </tr>
        </tbody>
    </table>
</script>

工作清单
韵律学
资料

这似乎是一个订购问题

确保文件准备好了 如果在脚本中使用jQuery从文档中获取元素（如

el:$（'.jobsList'）

），则必须确保HTML已准备就绪。您可以将代码包装在jQuery样式的文档就绪函数中：

$(function() {
    var JobListView = Backbone.View.extend({
        el: $('.jobsList'),
        template: _.template($('#test-template').html()),

        render: function() {

            this.$el.html(this.template({ 'last_name': 'test' }));
            return this;
        }
    });

});

或者只在

的底部加载脚本，但在脚本内部

    <script type="text/template" id="test-template">
       Put the template above the scripts loading and inside the body.
    </script>
    <script src="jquery.js">
    <script src="underscore.js">
    <script src="backbone.js">
    <script src="script/my-app.js">
</body>

请注意，JS自定义类型（类）应该在

PascalCase

中，而不是在

snakeCase

中，这是公认的标准，但这不会导致代码失败

将元素传递给视图 为了能够在不同的视图和模板中轻松重用视图，应该避免对

el

属性进行硬编码

而是将元素传递给视图：

var JobListView = Backbone.View.extend({
    // ... 
});

// ...somewhere else

var view = new JobListView({ el: '.jobsList' });

或者使用主干视图创建的图元

var JobListView = Backbone.View.extend({
    className: 'jobList',
});

// ...inside a parent view's render
var ParentView = Backbone.View.extend({
    template: '<div class="job-list-1"></div><div class="job-list-2"></div>',
    render: function() {
        this.$el.html(this.template);
        this.$('.job-list-1').html(new JobListView().render().el);
        this.$('.job-list-2').html(new JobListView().render().el);
        // ...
        return this;
    }
});

var JobListView=Backbone.View.extend({
类名：“作业列表”，
});
//…在父视图的渲染中
var ParentView=Backbone.View.extend({
模板：“”，
render:function（）{
this.$el.html（this.template）；
这是.$（'.job-list-1'）.html（new JobListView（）.render（）.el）；
这是.$（'.job-list-2'）.html（new JobListView（）.render（）.el）；
// ...
归还这个；
}
});

这将导致：

<div class="job-list-1">
    <div class="jobList"></div>
</div>
<div class="job-list-2">
    <div class="jobList"></div>
</div>

在初始化测试之前调用

test.render（）

。除此之外，您可能希望使用作业列表的

id

选择器或将元素传递到视图。除了。尝试移动

jobList.fetch（…

after

var test=new jobListView

<div class="job-list-1">
    <div class="jobList"></div>
</div>
<div class="job-list-2">
    <div class="jobList"></div>
</div>