在 Backbone js 视图中分配“this”上下文

Question

我是 Backbone js 的新手，但很喜欢这个框架。我正在做一个项目，其中有一些列表项，在这些列表项中有一个 div，它将具有带有模型某些属性的 html 模板。我的 Html 是：

<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>

我想在每个 .thumbnail-lists 列表的 .big-thumbnail-container 中附加 .product-description 内容

我已经在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 重复了两个列表中的内容，而不是每个 .big-thumbnail-container 中的 data_description。我确定无法分配 'this' 上下文。

演示 link：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');
});

Answer 1

el 选项应该 be/match 一个特定的元素。

您需要迭代 .big-thumbnail-container 并使用特定的 el 创建 FeaturedThumbnailView 的新实例，例如：

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

另外，模型是用来存储数据的，而不是用来存储jQuery选择器或tooltipFunction方法之类的东西的，它们应该是视图的一部分。而且你不应该做 $(this.$el).

这样的事情

在 Backbone js 视图中分配“this”上下文

Assigning ' this' context in Backbone js view

javascript

jquery

backbone.js