Question

jQuery(function() {

var Hotel = Backbone.Model.extend({
        defaults: {
            idHotel:"",
            hotelName:"RIU Pravets",
            hotelAddress:"Ezeroto N:1",
            hotelStars:"3",
            hotelRoomsCount:"120",
            hotelPicture:"img/placeholder.png",
            cityName:"Pravets"
        },
    });

var Hotels = Backbone.Collection.extend({
    model:Hotel,
    url: './hotels'
});

var HotelView = Backbone.View.extend({
    tagName:"div",
    className:"hotelContainer",
    template:$("#hotelTemplate").html(),

    render:function () {
        var tmpl = _.template(this.template); //tmpl is a function that takes a JSON object and returns html
        this.$el.html(tmpl(this.model.toJSON())); //this.el is what we defined in tagName. use $el to get access to jQuery html() function
        return this;
    },

    events: {
        "click .delete": "deleteBook"
    },

    deleteBook:function () {
        //Delete model
        this.model.destroy();

        //Delete view
        this.remove();
    }
});

var HotelsView = Backbone.View.extend({
    el:$("#hotels"),

    initialize:function(){
        this.collection = new Hotels();
        this.collection.fetch().done(function () {
            console.log(this.collection.fetch())
        })
        .fail(function() {
            console.log(this.collection.fetch())
          throw 'Something went wrong while fetching the todos';
        });;
        this.render();

        this.collection.on("add", this.renderHotel, this);
        this.collection.on("remove", this.removeHotel, this);
        this.collection.on("reset", this.render, this);
    },

    render: function() {
        var that = this;
        _.each(this.collection.models, function(item) {
            that.renderHotel(item);
        }, this);
    },

    addHotel: function(e) {
        e.preventDefault();//Preventing the form from submiting and reloading the page

        var formData = {};

        $("#addHotel").find("input").each(function(i, el){
            if ($(el).val() !== "") {
                formData[el.id] = $(el).val();
            }
        });

        hotels.push(formData);

        this.collection.add(new Hotel(formData));
    },

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

    renderHotel:function(item){
        var hotelView = new HotelView({
            model: item
        });
        this.$el.append(hotelView.render().el);
    }
});

var hotelsView = new HotelsView();

});

./hotels上的JSON

[{“idHotel”：“8”，“hotelName”：“Al'arab”，“hotelAddress”：“Al'arab street”，“hotelStars”：“5”，“hotelRoomsCount”：“100”， “hotelPicture”： “hotel3.jpg”， “hotelCity”： “6”， “idCity”： “6”， “的cityName”： “迪拜”}，{ “idHotel”： “3”， “hotelName”：“Kinpinski “，”hotelAddress“：”ul.Bistur Pqsuk N：4“，”hotelStars“：”5“，”hotelRoomsCount“：”130“，”hotelPicture“：”hotel1.jpg“，”hotelCity“：”4“， “idCity”：“4”，“cityName”：“瓦尔纳”}，{“idHotel”：“2”，“hotelName”：“LeFleour”，“hotelAddress”：“bul.Vitoshka N：3”，“hotelStars” ： “4”， “hotelRoomsCount”： “23”， “hotelPicture”： “hotel2.jpg”， “hotelCity”： “1”， “idCity”： “1”， “的cityName”： “索菲亚”}]

结束它会给出错误this.collection未定义

这是HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="screen.css">
    </head>
    <body>
    <?php
        session_start();
        $_SESSION['currentPage'] = 'index.php';
        include_once('hotels.php');
        include_once('header.php');
    ?>
    <div id="hotels">
        <script id="hotelTemplate" type="text/template">
            <img src="img/<%= hotelPicture %>"/>
            <ul>
                <li><%= hotelName %></li>
                <li><%= hotelAddress %></li>
                <li><%= hotelStars %></li>
                <li><%= hotelRoomsCount %></li>
                <li><%= cityName %></li>
            </ul>
        </script>
    </div>
    <script src="http://localhost:8889/js/jquery.js"></script>>
    <script src="http://localhost:8889/js/underscore.js"></script>
    <script src="http://localhost:8889/js/backbone.js"></script>
    <script src="http://localhost:8889/js/app.js"></script>
    </body>
    </html>

Answer 1

回调is not what you think中this的值。尝试将代码更改为：

initialize:function(){
    var that = this;
    this.collection = new Hotels();
    this.collection.fetch().done(function () {
        console.log(that.collection.fetch())
    })
    .fail(function() {
        console.log(that.collection.fetch())
        throw 'Something went wrong while fetching the todos';
    });;
    this.render();

    this.collection.on("add", this.renderHotel, this);
    this.collection.on("remove", this.removeHotel, this);
    this.collection.on("reset", this.render, this);
},

Backbone：从JSON错误创建集合

1 个答案: