But it looks like it is getting to big.
How can I break this up into smaller pieces?
In general this seems messy and I'm trying to make it more readable.
/******************************************************************************************************************(120)
** BVFave
** - renders favorites using underscore templates
**
**
*/
var BVFave = Backbone.View.extend({
Name: 'BVFave',
path: $A.Reg.get('path_favicons'),
E: {},
initialize: function () {
this.ns = this.el.id + '_';
this.addArc();
this.el_arcmarks = $A.el('#' + this.el.id + '_arcmarks');
this.el_tags = $A.el('#' + this.el.id + '_tags');
this.tags = {};
this.listenTo(this.collection, 'sync', this.render);
},
addArc: function (){
if (this.id) {
var arc_string = '' + this.composeArc(this.id);
var arc_string1 = '' + this.composeArcTop(this.id);
this.el_fave_hold = $A.el('#fave_hold');
this.el_arc_hold = $A.el('#arc_hold');
$A.appendHTMLAsElement(arc_string, this.el_fave_hold);
// $A.appendHTMLAsElement(arc_string1, this.el_arc_hold);
this.el = $A.el('#' + this.id);
} else {
}
},
render: function () {
var tag_string = '',
page_string = '',
current_id,
previous_id;
this.obj = this.collection.toJSON();
// parse the json data
_.each(this.obj, function (val) {
previous_id = current_id;
current_id = this.ns + val.tag;
if ((previous_id !== current_id) || (previous_id === undefined)) {
this.tags[current_id] = this.composeTitle(current_id);
tag_string += this.composeTag(current_id);
page_string += this.composePage(current_id);
}
this.tags[current_id] += this.composeFavorite(val);
}, this);
// actual render
if (!_.isEmpty(this.tags)) {
this.el_arcmarks.innerHTML = page_string;
this.el_tags.innerHTML = tag_string;
this.renderFavorites();
this.initializeTags();
}
},
// insert favorite from memory into the DOM
renderFavorites: function () {
$A.someChild(this.el_arcmarks, function (val) {
if (val.id) {
val.innerHTML = this.tags[val.id.slice(0, -5)];
}
}, this);
},
// make the tags clickable, note that jQuery handles spaces differently in the selector
initializeTags: function (tag_el) {
var self = this;
if(!tag_el){
_.each(this.tags, function (val, key) {
var id = '#' + key;
var el = $A.el(id);
// self.E[id]=el;
$(el).on("click", function () {
self.flip(this);
});
}, this);
var test = $A.el('#' + $A.oneKey(this.tags));
this.flip(test);
} else {
$(tag_el).on("click", function () {
self.flip(this);
});
}
},
flip: function (tag_el) {
// get elements
var page_el = $A.el('#' + tag_el.id + '_page');
// turn off
if (this.prev_tag_el && (tag_el !== this.prev_tag_el)) {
$A.toggleClass(this.prev_page_el, 'toggle_page_lazy');
$A.toggleClass(this.prev_tag_el, 'toggle_tag_lazy');
}
// turn on
if (this.prev_tag_el !== tag_el) {
$A.animate(page_el, {time: 810});
$A.toggleClass(page_el, 'toggle_page_active');
$A.toggleClass(tag_el, 'toggle_tag_active');
}
// save previous
this.prev_page_el = page_el;
this.prev_tag_el = tag_el;
},
// id, favicon_local, url, title
insertFavorite: function (obj_fav) {
if (typeof obj_fav === 'string') {
obj_fav = JSON.parse(obj_fav);
}
var tag_id = this.ns + obj_fav.tag;
var title_el = $A.HTMLToElement(this.composeTitle(tag_id));
var div_el = $A.HTMLToElement(this.composeFavorite(obj_fav));
var page_el = $A.el('#' + tag_id + '_page') || this.insertTagAndPage(tag_id);
var tag_el = $A.el('#' + tag_id);
$A.someChild(page_el, function (iter) {
if (iter === null) {
page_el.appendChild(title_el);
return page_el.appendChild(div_el);
}
if (iter.children[1] && (obj_fav.title < iter.children[1].innerHTML)) {
return page_el.insertBefore(div_el, iter);
}
if (iter === page_el.lastChild) {
return page_el.appendChild(div_el);
}
});
this.flip(tag_el);
return div_el;
},
// id
insertTagAndPage: function (tag_id) {
var tag_el = $A.HTMLToElement(this.composeTag(tag_id));
var page_el = $A.HTMLToElement(this.composePage(tag_id));
$A.insertChildById(this.el_arcmarks, page_el);
$A.insertChildById(this.el_tags, tag_el);
this.initializeTags(tag_el);
return page_el;
},
// id
composeArcTop: function (current_id) {
var self = this;
return _.template($('#arc_item-arcTop').html(), {
id: current_id,
tag: current_id.slice(self.ns.length)
});
},
// id
composeArc: function (current_id) {
var self = this;
return _.template($('#arc_item-arc').html(), {
id: current_id
});
},
// id
composeTag: function (current_id) {
var self = this;
return _.template($('#arc_item-tag').html(), {
id: current_id,
tag: current_id.slice(self.ns.length)
});
},
// id
composePage: function (current_id) {
return _.template($('#arc_item-page').html(), {
page: current_id + '_page'
});
},
// id
composeTitle: function (current_id) {
var self = this;
return _.template($('#arc_item-title').html(), {
id: current_id + '_title',
tag: current_id.slice(self.ns.length)
});
},
// id, favicon_local, url, title
composeFavorite: function (val) {
return _.template($('#arc_item-arcmark').html(), {
id: this.ns + val.id,
ida: this.ns + val.id + 'a',
idb: this.ns + val.id + 'b',
src: this.path + val.favicon_local,
href: val.url,
title: val.title
});
}
});
Here is what it renders: