1

questionListViewでrender関数を使用しようとしていますが、実行されているように見えますが、ページが更新されていません。

テンプレート：

<script id="myTemplate" type="text/template">
 <p>Test</p>
</script>

JSの一部：

$(function(){

//Test data
var initialListData = [
    { listName: "Sample Questions", listID: 1},
    { listName: "Default questions", listID: 2}
];

// MODELS ----------------------------------------------------
var questionList = Backbone.Model.extend({
    defaults: {
        listName: "Name of the list",
        listID: 0
    }
});

// COLLECTIONS ----------------------------------------------------
var populateList = Backbone.Collection.extend({
    model: questionList
});

// VIEWS ----------------------------------------------------
var questionListView = Backbone.View.extend({
    template: $("#myTemplate").html(),
    render: function () {
        console.log('I can see this, but nothing happens...');
        var tmpl = _.template(this.template);            
        $(this.el).append(tmpl(this.model.toJSON()));
        return this;
    }
});


var AppView = Backbone.View.extend({
  el : $("#content"),
    initialize: function (){
        this.collection=new populateList(initialListData);
        this.render();
    },
    render: function (){
        _.each(this.collection.models, function (item) {
            this.renderSelect(item);
        }, this);
    },
    renderSelect: function(item){
         var populateQuestionList = new questionListView({
             model: item
        });
        this.$el.append(populateQuestionList.render().el);
    }
});

var app = new AppView();

} (jQuery));

ありがとう！

4

1 に答える 1

3

document.readyイベントへのコールバックでこれをトリガーしていますか？そうでない場合は、DOMが実際にロードされて準備が整う前に、コードが実行されている可能性があります。試す：

$(function () {
    var app = new AppView();
});

いくつかのその他のポイント。

  • template: _.template($("#myTemplate").html())テンプレート関数をマイクロ最適化としてキャッシュするために行うことができます
  • バックボーンの最近のバージョンのthis.$el代わりに使用できます。$(this.el)あなたはすでにこれを1つの場所で行っていますが、両方ではありません。
于 2012-05-01T16:51:52.213 に答える