Question

此示例来自this网站

main.js

// Models
var Wine = Backbone.Model.extend();

var WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:"api/wines"
});


// Views
var WineListView = Backbone.View.extend({


    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
alert("WineListView");
        _.each(this.model.models, function (wine) {
            this.$el.append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }

});

var WineListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-wine-list-item').html()),

    render:function (eventName) {
        alert("hi" )
        this.$el.html(this.template(this.model.toJSON()));

        return this;
    }

});

var WineView = Backbone.View.extend({

    tagName:'div',
    template:_.template($('#tpl-wine-details').html()),

    render:function (eventName) {
alert("WineView" );
        this.$el.html(this.template(this.model.toJSON()));

        return this;
    }

});


// Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list",
        "wines/:id":"wineDetails"
    },

    list:function () {
        this.wineList = new WineCollection();
        this.wineListView = new WineListView({model:this.wineList});
        this.wineList.fetch();
        $('#sidebar').html(this.wineListView.render().el);
    },

    wineDetails:function (id) {
        this.wine = this.wineList.get(id);
        this.wineView = new WineView({model:this.wine});
        $('#content').html(this.wineView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();

的index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>

<body>

<div id="header"><span class="title">Backbone Cellar</span></div>

<div id="sidebar"></div>

<div id="content">
<!--<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>-->
</div>

<!-- Templates -->
<script type="text/template" id="tpl-wine-list-item">
    <a href='#wines/<%= id %>'><%= name %></a>
</script>

<script type="text/template" id="tpl-wine-details">
    <div class="form-left-col">
        <label>Id:</label>
        <input type="text" id="wineId" name="id" value="<%= id %>" disabled />
        <label>Name:</label>
        <input type="text" id="name" name="name" value="<%= name %>" required/>
        <label>Grapes:</label>
        <input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
        <label>Country:</label>
        <input type="text" id="country" name="country" value="<%= country %>"/>
        <label>Region:</label>
        <input type="text" id="region" name="region"  value="<%= region %>"/>
        <label>Year:</label>
        <input type="text" id="year" name="year"  value="<%= year %>"/>
    </div>
    <div class="form-right-col">
<!--        <img height="300" src="../pics/<%= picture %>"/>-->
        <label>Notes:</label>
        <textarea id="description" name="description"><%= description %></textarea>
    </div>
</script>

<!-- JavaScript -->
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="js/main.js"></script>   

</body>
</html>

在main.js中如果我手动将模型添加到集合中，它可以正常工作。当我使用this.wineList.fetch（）从服务器获取时;如果我将它传递给渲染函数集合是空的。但是如果我在该函数集合中给出警告（“某事”）不会是空的。 this.wineList.fetch（）从服务器获取数据，它不会在集合上调用set函数。会有什么问题？

在后端我使用node.js.前端我正在使用backbone.js。我是骨干技术的新手。请告诉我我错过了什么。

Answer 1

请确保您的api / wines没有语法错误，所有属性都应以逗号分隔。

Answer 2

我已经测试了您的代码及其工作正常。

你在main.js中的

（function（$）{

//添加模型/收藏集/视图/路由器

}（jQuery））;

渲染函数的视图不起作用

2 个答案: