'diesen' Kontext in Backbone zuweisen js view

Question

Ich bin neu bei Backbone js, aber genieße den Rahmen. Ich mache ein Projekt, wo es einige Listenelemente gibt und in diesen Listenelementen gibt es ein div, das die HTML-Vorlage mit einigen Attributen eines Modells haben wird. Meine Html ist:

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' 

}); 
}) 

Die html ist anhängt, aber was:

<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 &amp; 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 &amp; 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> 

I .product-description Inhalt im .big-thumbnail-container für jede .thumbnail-lists Listen

I codiert haben in js Datei angehängt werden soll passiert, dass, da es zwei Listenelemente im HTML gibt und die .big-thumbnail-container in den beiden Listen sind, der Inhalt derselbe Inhalt ist, wird in beiden Listen als Ergebnisangehängtwiederholen sich anstelle von data_description in jeweils .big-thumbnail-container. Ich bin mir sicher, dass der 'this' Kontext ich nicht zuordnen kann.

Die Demo-Link: http://damiracle.com/practise/theme/html/collection.php

Kann mir jemand helfen? Vielen Dank im Voraus

Danke @TJ für Ihre Hilfe. Ich habe den Code geändert. Bin ich richtig in meiner Route? Ihr Kommentar

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'); 
}); 

Answer 1

el Option sollte sehr geschätzt werden, um ein bestimmtes Element sein/entsprechen.

Sie müssen über .big-thumbnail-container s laufen und neue Instanz von FeaturedThumbnailView mit spezifischen el, so etwas wie erstellen:

$('.thumbnail-lists .big-thumbnail-container').each(function(thumbnailContainer){ 
    // You need to save reference to view instance for future clean up 
    new FeaturedThumbnailView({el: thumbnailContainer}); 
}); 

Auch Modell ist zum Speichern von Daten, nicht für Dinge wie jQuery Selektoren oder Methoden wie tooltipFunction Speicherung sollten sie Teil der Sicht sein. Und Sie sollten Dinge wie $(this.$el) nicht tun.