一点背景
我正在尝试创建一个类似推特的提要，其中推文/行将在点击时展开，从而显示更多信息。
数据从 JSON 文件中提取（从后端发送到前端）。我使用主干在前端呈现数据。
假设我的提要显示 10 行，每行显示一些信息，然后单击行/div 展开以显示更多信息。描述字段包含相当多的文本，因此我在其上应用了 JavaScript 省略号。我使用 Javascript 省略号，因为简短描述需要多于一行（不要认为 CSS 省略号适用于多行）。
我创建了一个插件，它将截断描述文本并单击我想删除省略号并将其替换为完整描述（因为该行将扩展）。
我创建了一个插件，它将完整的描述（在被截断之前）保存到一个数组中。
问题
我的想法是将单击的行的索引（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;
}
});
然后我创建了一个选项卡视图，它将在单击时显示正确的任务。
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();
}
});