我是Backbone js的新手,但享受框架。 我正在做一個項目,其中有一些列表項目,並在這些列表項目中有一個div將具有模板的某些屬性的HTML模板。 我的HTML是:在Backbone js視圖中分配'this'上下文
<ul class="product-grid">
<li class="product-lists thumbnail-lists">
<div class="inline-block product-item-img-container">
<div class="product-featured-image">
<a href="" data-dtsTooltip data-title="eCommerce Theme" data-price="260"><img src="assets/img/products/pt-1.png" ></a>
<div class="product-caption">
<a href="http://google.com">View</a>
</div>
</div>
<div class="product-featured-title">
<h1 class="entry-title">Go Fast-Transport & Logistics PSD Template</h1>
</div>
</div> <!-- product-item-img-container -->
<div class="inline-block product-description-container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p>
</div>
<div class="inline-block product-price-container text-center">
<h3 class="product_price">Rs.25000 </h3>
</div>
<div class="big-thumbnail-container" style="display:block; width:100%; height:100px; background:#666666;"></div>
</li>
<li class="product-lists thumbnail-lists">
<div class="inline-block product-item-img-container">
<div class="product-featured-image">
<a href="" data-dtsTooltip data-title="eCommerce Theme" data-price="260"><img src="assets/img/products/pt-1.png" ></a>
<div class="product-caption">
<a href="http://google.com">View</a>
</div>
</div>
<div class="product-featured-title">
<h1 class="entry-title">Go Fast-Transport & Logistics PSD Template</h1>
</div>
</div> <!-- product-item-img-container -->
<div class="inline-block product-description-container">
<p>
Sed ut
</p>
</div>
<div class="inline-block product-price-container text-center">
<h3 class="product_price">Rs.25000 </h3>
</div>
<div class="big-thumbnail-container" style="display:block; width:100%; height:100px; background:#666666;"></div>
</li>
</ul>
我想追加.big-thumbnail-container
內.product-description
含量爲每.thumbnail-lists
名單
我在js文件編碼:
var FeaturedThumbnailModel = Backbone.Model.extend({
defaults:{
thumbImg_attr : 'data-dtsTooltip',
data_product_url_container :'.product-caption',
data_title :'.product-featured-title',
data_preview :'previewUrl',
data_description_container : '.product-description-container',
data_price : '.product-price-container'
},
initialize: function(){
this.tooltipFunction();
},
tooltipFunction: function(){
var thumbnailIdentifier = $('[' + this.get('thumbImg_attr') +']'),
parentThumbIdentifier = thumbnailIdentifier.closest('.thumbnail-lists'),
product_url_cont = $(this.get('data_product_url_container')),
product_title = $(this.get('data_title')),
product_Description_container = $(this.get('data_description_container')),
product_price_container = $(this.get('data_price'));
var Featured_Img = parentThumbIdentifier.find(thumbnailIdentifier).children('img').attr('src'),
Product_url = parentThumbIdentifier.find(product_url_cont).children('a').attr('href'),
Product_Title = parentThumbIdentifier.find(product_title).children('.entry-title').text(),
Product_Description = parentThumbIdentifier.find(product_Description_container).children('p').text(),
Product_Price = parentThumbIdentifier.find(product_price_container).children('.product_price').text();
this.set({
data_img : Featured_Img,
data_product_link : Product_url,
data_title : Product_Title,
data_description : Product_Description,
data_price : Product_Price
});
console.log(this);
return this;
}
});
var FeaturedThumbnailView = Backbone.View.extend({
//model : new FeaturedThumbnailModel(),
el:".big-thumbnail-container",
template :_.template("<strong><%= data_description %></strong>"),
initialize: function(){
this.model = new FeaturedThumbnailModel();
this.render();
},
render: function(){
var eles = $(this.$el);
var temp = this.template(this.model.attributes);
_.each(eles, function(element){
$(element).append(temp);
});
//console.log(this.model.get('data_description'))
return this;
}
});
$(document).ready(function(){
var thumbFunc = new FeaturedThumbnailModel({
});
var thumbView = new FeaturedThumbnailView({
el: '.big-thumbnail-container'
});
})
的HTML是追加,但什麼正在發生,因爲HTML中有兩個列表項並且.big-thumbnail-container
位於兩個列表中,所以內容相同的內容正在兩個列表中添加結果data_description
正在重複,而不是data_description
在各自的.big-thumbnail-container
中。我相信我無法分配'this'
上下文。
演示鏈接:http://damiracle.com/practise/theme/html/collection.php
有人可以幫助我嗎? 在此先感謝
感謝@TJ的幫助。我改變了代碼。我在我的路線嗎? 您的評論將高度讚賞
var FeaturedThumbnailModel = Backbone.Model.extend({
defaults:{
thumb_lists : '.thumbnail-lists',
descriptionClass :'.product-description-container',
}
});
var FeaturedThumbnailView = Backbone.View.extend({
initialize: function(){
this.model = new FeaturedThumbnailModel();
},
events : {
'click' :'onDescription'
},
onDescription: function(e){
e.preventDefault();
var Element = this.$el;
var templT = $(this.model.get('descriptionClass'));
console.log(Element);
var html = Element.parent().find(templT).html();
console.log(html)
var descriptionTemplate = _.template(html);
alert(html);
return this;
}
});
var FeaturedThumList = Backbone.View.extend({
render:function(thumbnailContainer){
var targets = $('.thumbnail-lists > .big-thumbnail-container');
_.each(targets, function(thumbnailContainer){
new FeaturedThumbnailView({ el: thumbnailContainer});
}, this);
}
});
$(document).ready(function(){
var featuredThumblist = new FeaturedThumList();
featuredThumblist.render('.thumbnail-lists');
});
謝謝@TJ的幫助。它現在完成了,我已經改變了代碼..我在路上糾正了嗎? –