骨干网 - 视图未渲染答案

【问题标题】：Backbone - View not rendering骨干网 - 视图未渲染
【发布时间】：2014-07-31 05:48:46
【问题描述】：

我是骨干新手，正在尝试制作图书图书馆应用程序。运行此代码时，它不显示模板。
这是我的 index.html

<html>
<head>
<title>Example</title>
</head>
<body>
<form>
    Name:<input type='text' id='name'/><br>
    Author:<input type='text' id='auth'/><br>
    Keyword:<input type='text' id='keyword'/><br><br>
    <button id="add">Add</button>
</form>
<div id='book_list'>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="script.js"></script>
<script  id="bookTemplate" type="text/template">
    <ul>
        <li><%= name %></li>
        <li><%= auth %></li>
        <li><%= keyword %></li>
    </ul>
    <button class="delete">Delete</button>
</script>
</body>
</html>

这是 script.js

$(function(){
    var bookmodel = Backbone.Model.extend({
    defaults: {
                name:'temp',
                auth:'meee',
                keyword:'nonee'
            },
});
var booklist = Backbone.Collection.extend({
    model:bookmodel
});
var bookview= Backbone.View.extend({
    tagName:'div',
    className: 'bookContainer',
    template: _.template( $('#bookTemplate').html()),
    events:{
        'click .delete':'deleteBook'
    },
    render : function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    deleteBook: function(){
        this.model.destroy();
        this.remove();
    }
});
var library = Backbone.View.extend({
    model: bookmodel,

    initialize: function( initialBooks ) {

        $el='#book_list';
        var one=new bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
        var two=new bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
        var bookcoll= [one,two];
        this.collection = new booklist(bookcoll);
        this.render();
    },

    render:function(){
        this.collection.each(function (item){
        var k= new bookview({model:item});
        this.$el.append(k.render().el);
        },this);

    },
});
var xyz= new library();
})

另外，当我尝试这样编写代码时：

var library = Backbone.View.extend({  
model: bookmodel,  
$el:'#book_list';   
.....  //rest of the code
)};  
var xyz= new library();

然后，它导致：Uncaught TypeError: undefined is not a function, at line
var xyz= new library();

【问题讨论】：

在你的库声明中，分号应该是#book_list之后的逗号
在你的 initialize 函数中你有 $el:"#book_list"; 应该类似于 this.el = "#book_list";
是的，有一个逗号，我在这里放错了，
还是一样的场景.. 模板不渲染。
好的thanx..我在等..

标签： javascript jquery html backbone.js jsfiddle

【解决方案1】：

我运行了您的代码，看起来还不错。我不确切知道 script.js 中的内容，但请尝试将您的模板包含在您的 script.js 文件上方。它可能在运行时找不到您的模板

【讨论】：

【解决方案2】：

通过使用他们的下划线库主干加载器，我能够在 jsfiddle 中重新创建您的错误。这不是您的代码的问题。以下小提琴显示了您的相同错误：

http://jsfiddle.net/32tsA/

虽然这个工作正常：

http://jsfiddle.net/BympL/

问题在于我估计你是如何设置小提琴的。

我确实做了一些小改动来修复大小写和 Backbone 的一些最佳实践：

var Bookmodel = Backbone.Model.extend({
    defaults: {
                name:'temp',
                auth:'meee',
                keyword:'nonee'
    }
});

var Booklist = Backbone.Collection.extend({
    model: Bookmodel
});

var Bookview = Backbone.View.extend({
    tagName:'div',
    className: 'bookContainer',
    template: _.template( $('#bookTemplate').html()),
    events:{
        'click .delete':'deleteBook'
    },
    render : function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    deleteBook: function(){
        this.model.destroy();
        this.remove();
    }
});

var one=new Bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
var two=new Bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
var bookcoll = [one,two];

var mybooks = new Booklist(bookcoll);
var Library = Backbone.View.extend({
    render:function(){
        this.collection.each(function (item){
        var k= new Bookview({model:item});
        this.$el.append(k.render().el);
        },this);
    },
});
var xyz = new Library({collection: mybooks, el: "#book_list"});
xyz.render();

我用大写命名了类，从你的视图中删除了模型的初始化（应该告诉视图它们的模型不创建它们的模型），并从库声明中抽象出 el 声明（这样你就可以在不同的地方）。

【讨论】：

谢谢你的小提琴，它正在工作，但我仍然无法理解为什么它不能早点工作..
这是另一个应该向您证明它与您的代码无关的代码：jsfiddle.net/wUwp8 该小提琴除了对new Backbone.View(); 的一次调用之外什么都没有，但仍然失败。问题出在 jsfiddle 订购下划线、主干和 jquery 的方式上。
感谢您的帮助安迪，我想知道您是否可以提出一些建议以避免将来出现此类问题。
如果你想使用 jsfiddle 作为你的 Backbone 沙箱，那么我会做一个工作的基本设置，你可以从中分叉你的新项目。我能够使我的示例正常工作的方法是在框架下拉列表中使用 JQuery，并在外部资源部分添加下划线然后主干。对于我使用 cdnjs 的链接。随意分叉以下大部分是空的但为骨干游戏工作的小提琴：jsfiddle.net/mY2Rw
如果我想离线开发，意味着使用notepad++之类的编辑器并下载jquer、underscore和backbone的库文件..