Question

刚开始使用骨干网，几个小时后似乎无法让视图渲染正常工作。我已经在HTML中包含了所有适当的JavaScript文件。这是我的剧本：

(function($) { 
// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    events: {
    //"keypress #new-todo":  "createOnEnter",
},

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log('Render app view');
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
  this.counter++;
  var p = new Paper();
  p.set({
    title: "My title: " + this.counter // modify item defaults
  });
  this.collection.add(p);
    },

    appendOne: function(p) {
    var paperView = new PaperView({
    model: p
  });
  $('ul', this.el).append(paperView.render().el);
}
});

var App = new ListView({el: $('paper_list') });
// App.addOne();

})(jQuery);

请注意，在FF上的控制台中没有出现任何错误 - 但仍未在AppView中显示任何渲染输出。感谢任何帮助。简单的HTML：

<body>
    <div class="container_16">


        <div class="grid_16">
            <div id="paper_list">
                Text...

                <ul class="thelist"></ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

Answer 1

这至少可以让你渲染ListView ......

// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    el: '#paper_list',

    events: {
        "click #add":  "createOnEnter",
    },

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log(this);
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
        this.counter++;
        var p = new Paper();
        p.set({
            title: "My title: " + this.counter // modify item defaults
        });
        this.collection.add(p);
    },

    appendOne: function(p) {
        var paperView = new PaperView({
            model: p
        });
        $('ul', this.el).append(paperView.render().el);
    }
});


$(function(){
    var App = new ListView();
});

一些事情......首先，我在文档内部初始化了ListView.ready 以确保DOM已准备就绪，其次，我在listview中创建了el #paper_list 然后你可以稍后再做$（this.el）。

我至少得到了按钮和“更多文字”以显示...如果有帮助，请告诉我！

骨干视图渲染不创建

1 个答案: