Question

我正在尝试学习backbone.js（Backbone.js 1.0.0）这是我的样本html页面，其中iam使用集合。 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>

任何帮助将不胜感激

Answer 1

尝试

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
});

Answer 2

var fetching = peopleCollection.fetch({ success: function () { 
             var peopleView = new PeopleView({ collection: peopleCollection });
             $(document.body).append(peopleView.render().el);
 } });

我认为我们可以在成功回调中调用视图渲染

骨干集合。 fetch（）不在mozilla中呈现视图

2 个答案: