Question

我最近开始使用backbone.js进行测试旋转。我有一个小应用程序，它应该从服务器获取数据，将数据转换为表单字段，并将它们插入到表单中。不幸的是，当我去render（）集合视图时，没有任何反应。但是，在页面加载后，如果我键入

fieldCollectionView.render();

进入控制台，神奇地我的字段呈现。

这是我的应用代码。这是我期望工作的倒数第二行，但它没有：

var FieldModel = Backbone.Model.extend({
    defaults: function(){
        return {
            type: "text",
        }
    },
});


var FieldCollection = Backbone.Collection.extend({
    model: FieldModel,
    url: "/register/Backbone/includes/JSONgetRegFields.js",
    //parse: function(response){
    //  return response
    //}

});



var FieldView = Backbone.View.extend({
    tagName: "div",
    className: "field_wrapper",
    id: "field_wrapper1",
    template: _.template( $("#field-template").html() ),
    render: function() {
        var attributes = this.model.toJSON();
        this.$el.html( this.template(attributes) );
        return this;

    }
});


var FieldCollectionView = Backbone.View.extend({
    initialize: function() {
    },
    addOne: function( fieldModel ) {
        var fieldView = new FieldView({model: fieldModel });
        //console.log(fieldView.render().el )
        this.$el.append( fieldView.render().el );
    },
    render: function(){
        this.collection.forEach(this.addOne, this);
        //console.log(this)
    }
});




var fieldCollection = new FieldCollection();
var fieldCollectionView = new FieldCollectionView({ collection: fieldCollection });
fieldCollection.fetch();
fieldCollectionView.render() 
$("#formTarget").html( $(fieldCollectionView.el) );

这就是我回来的json的样子：

[     { "label": "First Name", "fid": "FirstName", "fieldClasses" : "required", "labelClasses" : "requiredLabel"}  
    , { "label": "Last Name", "fid": "LastName", "fieldClasses" : "required", "labelClasses" : "requiredLabel"}  
    , { "label": "Email", "fid": "Email", "fieldClasses" : "required email", "labelClasses" : "requiredLabel"}  
    , { "label": "Confirm Email Please", "fid": "ConfEmail", "fieldClasses" : "required email", "labelClasses" : "requiredLabel"}  
    , { "label": "Fax", "fid": "Fax", "fieldClasses" : "number cdsphone", "labelClasses" : ""}  

 ]

另外我应该注意，如果我使用

setTimeout( function() { fieldCollectionView.render() }, 120)

我的收藏视图也呈现 - 但我觉得这不是一个很好的方法。我在哪里错了？

Answer 1

在集合中的数据到达之前，您几乎肯定会渲染视图。您需要了解骨干的AJAX调用的异步性质并通过事件控制代码流。您没有粘贴FieldCollectionView课程，但需要这样的内容：

var FieldCollectionView = Backbone.View.extend({
  initialize: function () {
    this.listenTo(this.collection, 'sync', this.render);
  }
});

然后您可以确定数据何时到达，视图将重新呈现以显示新数据。

Answer 2

这是一个向您开放的选项，为您的视图集合添加一个侦听器。

var FieldCollectionView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, 'sync', this.render);
    },
    addOne: function( fieldModel ) {
        var fieldView = new FieldView({model: fieldModel });
        //console.log(fieldView.render().el )
        this.$el.append( fieldView.render().el );
    },
    render: function(){
        this.collection.forEach(this.addOne, this);
        //console.log(this)
    }
});

Backbone.js - render（）在我在控制台中输入之前不起作用

2 个答案: