主干:从JSON错误中创建集合
Backbone: Create collection from JSON error
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":"艾尔'arab"、"hotelAddress":"艾尔'arab街","hotelStars":"5","hotelRoomsCount":"100","hotelPicture":"hotel3.jpg"、"hotelCity":"6","idCity":"6","某个":"迪拜"},{"idHotel":"3","hotelName":"Kinpinski"、"hotelAddress":"ul.Bistur Pqsuk N: 4"、"hotelStars":"5","hotelRoomsCount":"130","hotelPicture":"hotel1.jpg"、"hotelCity":"4","idCity":"4","某个":"瓦尔纳"},{"idHotel":"2","hotelName":"LeFleour"、"hotelAddress":"bul.VitoshkaN: 3"、"hotelStars":"4"、"hotelRoomsCount":"23"、"hotelPicture":"hotel2.jpg"、"hotelCity":"1","idCity":"1","某个":"索菲亚"}]
结束它给出错误this。集合未定义
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>
回调中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);
},
相关文章:
- Lodash从集合创建集合
- 使用Undercore创建对象集合
- 使用System从C#集合创建JSON数组.网状物剧本序列化
- 骨干和轨道集合.创建等待
- 在 Forerunner 数据库集合中创建主键时,key 属性是否可以位于集合对象的对象内部
- Meteor:如何使用空格键创建包含两个集合数据的树列表
- 从筛选的模型创建集合
- MongoDB 的集合构造函数是否仅在集合不存在时才创建集合
- 如何动态创建集合名称(取决于用户信息)
- 骨干.js:有没有办法在创建集合时为集合中的所有模型设置属性
- 角度 ng 重复 - 动态创建集合
- 需要将 JQuery 与 Shopify 一起使用的示例来创建集合并使用返回的 ID 添加产品
- 在 JavaScript 中创建集合(相同类型的唯一元素)时,习惯上用作键的值
- 如何根据url在Meteor中创建集合的新副本
- AngularJS使用ng选项来创建集合
- 主干:从JSON创建集合
- 主干:从JSON错误中创建集合
- 主干创建集合,然后视图-异步
- BackboneJs:从嵌套对象中创建集合中的多个模型
- Lodash从重复的对象键创建集合