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>

我想在每个.product-description列表的.big-thumbnail-container内附加.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位于两个列表中，因此内容相同的内容作为结果附加在两个列表中{ {1}}正在重复，而不是每个data_description中的data_description。我确定我无法指定的.big-thumbnail-container上下文。

演示链接：http://damiracle.com/practise/theme/html/collection.php

有人能帮助我吗？提前致谢

感谢@TJ的帮助。我已经更改了代码。我的路线是对的吗？ 您的评论将受到高度赞赏

'this'

Answer 1

el选项应该是/匹配特定元素。

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

$('.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'上下文

1 个答案: