骨干视图渲染未创建

Question

Just beginning with backbone and after few hours can't seem to get even a view render working correctly. 仅仅从骨干开始，几个小时后，似乎连一个视图渲染都无法正常工作。 I've included all appropriate JavaScript files in HTML. 我已经在HTML中包含了所有适当的JavaScript文件。 Here is my script: 这是我的脚本：

(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);

Note not getting any errors in console on FF - but still not displaying any of the render outputs in AppView). 请注意，在FF的控制台上没有出现任何错误-但仍未在AppView中显示任何渲染输出。 Appreciate any help. 感谢任何帮助。 Simple HTML: 简单的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

This will at least get you rendering the ListView... 这至少会让您呈现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();
});

A couple of things...First, I initialized your ListView inside of a document.ready to make sure that the DOM was ready to go, second, I made the el in the listview simply #paper_list then you can do $(this.el) later. 有两件事...首先， 我在文档中初始化了ListView。准备确保DOM准备就绪，其次，我在listview中将el制作成简单的#paper_list，然后可以执行$（this。 el）之后。

I at least got the button and "more text" to show up...Let me know if that helps! 我至少显示了该按钮和“更多文字” ...让我知道是否有帮助！

骨干视图渲染未创建

问题描述

1 个解决方案

解决方案1
5 2011-11-23 04:01:02

骨干视图渲染未创建

问题描述

1 个解决方案

解决方案1 5 2011-11-23 04:01:02

解决方案1
5 2011-11-23 04:01:02