Backbone：删除省略号onclick

Question

一点背景

我正在尝试创建一个类似于Twitter的推文，其中推文/行将展开，显示更多信息。

数据从JSON文件（从后端发送到前端）中提取。我使用骨干来渲染前端的数据。

假设我的Feed显示10行，每行显示一些信息，然后点击row / div展开以显示更多信息。描述字段包含大量文本，因此我在其上应用javascript省略号。我使用Javascript省略号，因为简短描述需要多行（不要认为CSS省略号适用于多行）。

我创建了一个插件，它将截断描述文本并onclick我想删除省略号并将其替换为完整描述（因为行将展开）。
我创建了一个插件，可以将完整的描述（在被截断之前）保存到数组中。

问题

我的想法是将单击的行的索引（currentTarget）与保存的行的索引（在数组中）进行比较，然后用完整描述替换省略号文本，然后使用jQuery animate展开div。

我不确定是否有办法从主干“点击事件”中获取索引（为了将其与保存在数组中的索引进行比较）？

如果有更好的方法来解决这个问题，请随时告诉我。

提前致谢

这是我的代码：

截断并保存原始文本功能

/**
 * Plugins
 */
var arr = [];

$.fn.truncate = function(){
    return this.each(function(index,element){
        var elementText = $(element).text();
        if(elementText.length > 165){
            var truncated = elementText.trim().substring(0, 165).split(" ").slice(0, -1).join(" ") + "…";
        }
        $(element).text(truncated);
    });
};

$.fn.getText = function(){
    return this.each(function(index,element){
        arr.push({
            i: index,
            v: $(element).text()
        });
    });
};

骨干模型和集合

/**
 * Model
 */
var Task = Backbone.Model.extend();

/**
 * Collections
 */
var RecentTasksList = Backbone.Collection.extend({
    model: Task,
    url: 'json/recentTasks.json'
});

骨干视图

/**
 * Views
 */
var RecentTasksView = Backbone.View.extend({
    el: '.taskList',
    template: _.template($('#recentTasksTemplate').html()),
    render: function(){
        _.each(this.model.models, function(data){
            this.$el.append(this.template(data.toJSON()));
        }, this);

        $('.description').getText();
        $('.description').truncate();

        return this;
    }
});

var FullTaskView = Backbone.View.extend({
    el: '.taskContainer',
    events: {
        'click .task': 'showFullDetails'
    },
    showFullDetails: function(e){
        var eTarget = $(e.currentTarget);
        var $desc = $('.description');

        if(eTarget.hasClass('expanded')){
            eTarget.animate({
                'height': '80px'
            },
            function(){
                eTarget.removeClass('expanded');
            });
        }
        else{
            console.log($(eTarget).find($desc).html());

            eTarget.animate({
                //doesn't work lesser IE 8
                'height': eTarget[0].scrollHeight
            },
            function(){
                eTarget.addClass('expanded');
            });     
        }
    }
});

var AppView = Backbone.View.extend({
    el: 'body',
    initialize: function(){
        //Recent Tasks
        var recentTasksList = new RecentTasksList();
        var recentTasksView = new RecentTasksView({
            model: recentTasksList
        });
        recentTasksList.bind('reset', function(){
            recentTasksView.render();
        });
        recentTasksList.fetch();

        //Full Task Details
        var fullTaskView = new FullTaskView();
    }
});

var appView = new AppView();

下划线模板

<script id="recentTasksTemplate" type="text/template">
    <div class="task clearfix">
        <div class="image">
            <img src="<%= image %>" />
        </div>
        <div class="details">
            <h3 class="title"><%= title %></h3>
            <div class="description">
                <%= description %>
            </div>
        </div>
    <div>
</script>

HTML

<div class="taskContainer">
    <div class="taskList"></div>
</div>

编辑

最后一个问题。我在页面中添加了一个标签（类似的号召性用语）。将显示相同类型的信息（我使用相同的模板）。例如，我现在有RecentTask和PopularTask。我为包含点击事件的标签创建了一个视图。我是否需要每次都实例化模型并查看和获取数据，还是可以重用已经初始化的数据？

我为第二个标签创建了一个新视图。从服务器抓取JSON文件：

var PopularTasksList = Backbone.Collection.extend({
    model: Task,
    url: 'json/popularTasks.json'
});

var PopularTasksView = Backbone.View.extend({
    el: '.taskList',
    render: function(){
        $('.taskList').empty();
        _.each(this.model.models, function(model){
            var taskView = new TaskView({model: model});
            this.$el.append(taskView.render().el);
        }, this);
        return this;
    }
});

然后我创建了一个选项卡视图，它将显示正确的任务onclick。

var TabsView = Backbone.View.extend({
            el: 'body',
            events:{
                'click .tabRecent': 'fetchDataRecentTasks',
                'click .tabPopular': 'fetchDataPopularTasks'
            },
            fetchDataRecentTasks: function(){
                var recentTasksList = new RecentTasksList();
                var recentTasksView = new RecentTasksView({
                    model: recentTasksList
                });
                recentTasksList.bind('reset', function(){
                    recentTasksView.render();
                });
                recentTasksList.fetch();
            },
            fetchDataPopularTasks: function(){
                var popularTasksList = new PopularTasksList();
                var popularTasksView = new PopularTasksView({
                    model: popularTasksList
                });     
                popularTasksList.bind('reset', function(){
                    popularTasksView.render();
                });
                popularTasksList.fetch();
            }
        });