Question

我是骨干新手并尝试制作图书馆应用程序。在运行此代码时，它没有显示模板这是我的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不是一个函数，在第
一行 var xyz= new library();

Answer 1

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

Answer 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声明（这样你就可以重用视图了一个不同的地方）。

骨干 - 视图不渲染

2 个答案: