javascript - Backbone 集合。 fetch() 不在 mozilla 中呈现 View

标签 javascript jquery backbone.js

我正在尝试学习 backbone.js(Backbone.js 1.0.0)这是我使用集合的示例 html 页面。 fetch() 方法获取集合,并使用 View 显示它。我正在获取结果 谷歌浏览器,但在 mozilla 中没有任何显示。我不知道确切的原因。

虽然我指的是 backone 网站 http://backbonejs.org/#Collection-fetch

有人说:

请注意,不应使用 fetch 在页面加载时填充集合——加载时需要的所有模型都应该已经引导到位。 fetch 旨在为不需要立即使用的界面延迟加载模型:例如,包含可以打开和关闭的笔记集合的文档。

这与我的问题有关吗?

这是我的示例 html 页面

<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/underscore.js" type="text/javascript"></script> 
<script src="js/backbone.js" type="text/javascript"></script> 
</head>
<body>

<div class="list"></div>

<script id="personTemplate" type="text/template">
<td>  <strong><%= name %></strong></td>
 <td>(<%= age %>) </td>
<td> <%= occupation %> </td>  
</script>
<script type="text/javascript">
//Person Model
var Person = Backbone.Model.extend({
    defaults: {
        name: 'Guest User',
        age: 30,
        occupation: 'worker'
    }
});
// A List of People
var PeopleCollection = Backbone.Collection.extend({
    model: Person,
    initialize: function(){
        alert("intialise")
    },
    url:'/RestFul/rest/members/info',

});
// View for all people
var PeopleView = Backbone.View.extend({
    tagName: 'table',
    render: function(){
        this.collection.each(function(person){
            var personView = new PersonView({ model: person });
            this.$el.append(personView.render().el); // calling render method manually..
        }, this);
        return this; // returning this for chaining..
    }
});
// The View for a Person
var PersonView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template($('#personTemplate').html()),
       //////////   initialize function is gone from there. So we need to call render method manually now..

    render: function(){
        this.$el.html( this.template(this.model.toJSON()));
        return this;  // returning this from render method..
    }
});
var peopleCollection = new PeopleCollection();
//peopleCollection.fetch();
peopleCollection.fetch({ success: function () { console.log("collection fetched");  } });
//peopleCollection.fetch({context:collection}).done(function() {
    //  console.log(this.length)
//  })
//console.log(peopleCollection.toJSON())
alert(JSON.stringify(peopleCollection));
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el);   // adding people view in DOM
</script>
</body>
</html> 

任何帮助将不胜感激

最佳答案

尝试

var fetching = peopleCollection.fetch({ success: function () { console.log("collection fetched");  } });

$.when(fetching).done(function(){
    var peopleView = new PeopleView({ collection: peopleCollection });
    $(document.body).append(peopleView.render().el);   // adding people view in DOM
});

关于javascript - Backbone 集合。 fetch() 不在 mozilla 中呈现 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21773649/

相关文章:

javascript - Angular ngfor循环显示菜单

javascript - 按下按钮时传递值

javascript - 隐藏()与隐藏 ("slow")

javascript - 如何去掉某个div下的某个class

javascript - 在 backbone.js Facebook 应用程序中添加历史状态(在 iframe 中)

php - 如何从 LDAP 获取用户名?

javascript - 加载内容和单独的内容V/S加载iframe?

javascript - 可编辑的动态目标值

javascript - 使用 Marionette.CompositeView 进行单元测试

javascript - 将项目插入 backbone.js 集合