0

我最近开始使用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)

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

4

2 回答 2

2

您几乎可以肯定在集合中的数据到达之前呈现您的视图。您需要了解主干的 AJAX 调用的异步性质并通过事件控制代码流。你没有粘贴你的FieldCollectionView课程，但这需要这样的东西：

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

然后您可以确定当数据到达时，视图将重新渲染以显示新数据。

于 2013-07-01T20:33:51.197 回答
1

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

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)
    }
});
于 2013-07-01T20:26:01.510 回答