0

私は最初のbackbone.jsの問題に取り組んでおり、コレクションの使用に問題があります。コンソールから判断すると、問題はコレクションビューをdomに出力することにあるようです。コレクションデータはコンソールで適切にフォーマットされており、ブラウザに表示されません。私は自分が間違っていることを理解できません：

var RegisterModel = Backbone.Model.extend({
    urlRoot: 'api/process.php'
});

var RegisterView = Backbone.View.extend({
    el: "#register",
    template: _.template('<label for="<%= inputName %>"><%= label %></label><input name="<%= inputName %>" type="text" />'),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var RegisterCollection = Backbone.Collection.extend({ 
    model: RegisterModel
});

var RegisterCollectionView = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },  
    addOne: function(registerModel){
        var registerView = new RegisterView({model: registerModel});
        this.$el.append(registerView.render().el);  
    },
    addAll: function(){
        this.collection.forEach(this.addOne, this);
        this.$el.empty();   
    },
    render: function(){
        this.addAll();
        return this;
    }
});


var registerCollection = new RegisterCollection();
var todos = [{inputName: "first_name", label: "First Name"}, {inputName: "last_name", label: "Last Name"}];
registerCollection.reset(todos);


var registerCollectionView = new RegisterCollectionView({collection: registerCollection});
registerCollectionView.render();
4

1 に答える 1

1

ここ：

addAll: function(){
    this.collection.forEach(this.addOne, this);
    this.$el.empty();   
},

empty()各アイテムをレンダリングした後に呼び出しています。私はあなたがそれらの2つの線を交換することを意味したと思います。

addAll: function(){
    this.$el.empty();   
    this.collection.forEach(this.addOne, this);
},

またこれ：

el: "#register",

間違っている。複数のRegisterViewがあるため、その上でIDを使用することは意味がありません。また、これにより、ロジックは、ビューの新しい要素を作成する代わりに、ページに既に存在する要素を検索します。その行を完全に削除する必要があります。

あなたが欲しいのはelオンRegisterCollectionViewです。現在、そのビューは何にもアタッチされていないため、レンダリングされますが非表示になります。

これを追加できるはずです：

el: 'body'
于 2013-01-01T20:37:03.343 に答える