thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

DRY up a common view pattern

Browse source 
Define a Whisper.View base class that automatically parses and renders
templates and attributes defined by the subclass. This saves us a good
number of lines of code as well as some marginal memory overhead, since
we are no longer saving per-instance copies of template strings.
This commit is contained in:
lilia 2015-03-05 15:25:49 -08:00
parent 7c9ad975bb
commit 1bb480f6ea
16 changed files with 109 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
conversation.html
View file

@ -134,6 +134,7 @@
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>

1
index.html
View file

@ -88,6 +88,7 @@
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>

12
js/views/attachment_preview_view.js
View file

@ -17,15 +17,11 @@ var Whisper = Whisper || {};
(function () {
'use strict';
Whisper.AttachmentPreviewView = Backbone.View.extend({
Whisper.AttachmentPreviewView = Whisper.View.extend({
className: 'attachment-preview',
initialize: function() {
this.template = $('#attachment-preview').html();
Mustache.parse(this.template);
},
render: function() {
this.$el.html(Mustache.render(this.template, {source: this.src}));
return this;
template: $('#attachment-preview').html(),
attributes: function() {
return {source: this.src};
}
});
})();

6
js/views/conversation_list_item_view.js
View file

@ -20,17 +20,15 @@ var Whisper = Whisper || {};
'use strict';
// list of conversations, showing user/group and last message sent
Whisper.ConversationListItemView = Backbone.View.extend({
Whisper.ConversationListItemView = Whisper.View.extend({
tagName: 'div',
className: 'contact',
events: {
'click': 'select'
},
template: $('#contact').html(),
initialize: function() {
this.template = $('#contact').html();
Mustache.parse(this.template);
this.listenTo(this.model, 'change', this.render); // auto update
this.listenTo(this.model, 'destroy', this.remove); // auto update
},

14
js/views/conversation_view.js
View file

@ -17,18 +17,18 @@
'use strict';
window.Whisper = window.Whisper || {};
Whisper.ConversationView = Backbone.View.extend({
Whisper.ConversationView = Whisper.View.extend({
className: function() {
return [ 'conversation', this.model.get('type') ].join(' ');
},
template: $('#conversation').html(),
attributes: function() {
return { group: this.model.get('type') === 'group' };
},
initialize: function() {
this.listenTo(this.model, 'destroy', this.stopListening); // auto update
this.template = $('#conversation').html();
Mustache.parse(this.template);
this.listenTo(this.model, 'destroy', this.stopListening);
this.$el.html(Mustache.render(this.template,
{ group: this.model.get('type') === 'group' }
));
this.render();
this.fileInput = new Whisper.FileInputView({
el: this.$el.find('.attachments')

14
js/views/key_verification_view.js
View file

@ -18,12 +18,9 @@
window.Whisper = window.Whisper || {};
Whisper.KeyVerificationView = Backbone.View.extend({
Whisper.KeyVerificationView = Whisper.View.extend({
className: 'key-verification',
initialize: function(options) {
this.template = $('#key-verification').html();
Mustache.parse(this.template);
},
template: $('#key-verification').html(),
events: {
'click .back': 'goBack'
},
@ -37,12 +34,11 @@
});
},
render: function() {
this.$el.html(Mustache.render(this.template, {
attributes: function() {
return {
your_key: this.splitKey(this.model.your_key),
their_key: this.splitKey(this.model.their_key)
}));
return this;
};
}
});
})();

5
js/views/message_detail_view.js
View file

@ -18,11 +18,10 @@
window.Whisper = window.Whisper || {};
Whisper.MessageDetailView = Backbone.View.extend({
Whisper.MessageDetailView = Whisper.View.extend({
className: 'message-detail',
template: $('#message-detail').html(),
initialize: function(options) {
this.template = $('#message-detail').html();
Mustache.parse(this.template);
this.view = new Whisper.MessageView({model: this.model});
this.conversation = options.conversation;
},

7
js/views/message_view.js
View file

@ -33,12 +33,9 @@
});
var ContentMessageView = Backbone.View.extend({
var ContentMessageView = Whisper.View.extend({
tagName: 'div',
initialize: function() {
this.template = $('#message').html();
Mustache.parse(this.template);
},
template: $('#message').html(),
className: function() {
if (this.model.get('delivered')) { return 'delivered'; }
},

20
js/views/new_conversation_view.js
View file

@ -30,16 +30,14 @@ var Whisper = Whisper || {};
model: Whisper.Conversation
});
Whisper.ContactPillView = Backbone.View.extend({
Whisper.ContactPillView = Whisper.View.extend({
tagName: 'span',
className: 'recipient',
events: {
'click .remove': 'removeModel'
},
template: $('#contact_pill').html(),
initialize: function() {
this.template = $('#contact_pill').html();
Mustache.parse(this.template);
var error = this.model.validate(this.model.attributes);
if (error) {
this.$el.addClass('error');
@ -49,11 +47,8 @@ var Whisper = Whisper || {};
this.$el.trigger('remove', {modelId: this.model.id});
this.remove();
},
render: function() {
this.$el.html(
Mustache.render(this.template, { name: this.model.getTitle() })
);
return this;
attributes: function() {
return { name: this.model.getTitle() };
}
});
@ -61,12 +56,11 @@ var Whisper = Whisper || {};
itemView: Whisper.ContactPillView
});
Whisper.NewConversationView = Backbone.View.extend({
Whisper.NewConversationView = Whisper.View.extend({
className: 'new-conversation',
template: $('#new-conversation').html(),
initialize: function() {
this.template = $('#new-conversation').html();
Mustache.parse(this.template);
this.$el.html($(Mustache.render(this.template)));
this.render();
this.$group_update = this.$el.find('.new-group-update-form');
this.$buttons = this.$el.find('.buttons');
this.$input = this.$el.find('input.new-message');

9
js/views/new_group_update_view.js
View file

@ -18,16 +18,13 @@
window.Whisper = window.Whisper || {};
Whisper.NewGroupUpdateView = Backbone.View.extend({
Whisper.NewGroupUpdateView = Whisper.View.extend({
tagName: "div",
className: "new-group-update-form",
template: $('#new-group-update-form').html(),
initialize: function(options) {
if (this.$el.html().length === 0) {
this.template = $('#new-group-update-form').html();
Mustache.parse(this.template);
this.$el.html(
Mustache.render(this.template, this.model.attributes)
);
this.render();
}
this.avatarInput = new Whisper.FileInputView({
el: this.$el.find('.group-avatar')

5
js/views/phone-input-view.js
View file

@ -17,12 +17,11 @@ var Whisper = Whisper || {};
(function () {
'use strict';
Whisper.PhoneInputView = Backbone.View.extend({
Whisper.PhoneInputView = Whisper.View.extend({
tagName: 'div',
className: 'phone-input',
template: $('#phone-number').html(),
initialize: function() {
this.template = $('#phone-number').html();
Mustache.parse(this.template);
this.render();
},

3
js/views/toast_view.js
View file

@ -17,10 +17,9 @@ var Whisper = Whisper || {};
(function () {
'use strict';
Whisper.ToastView = Backbone.View.extend({
Whisper.ToastView = Whisper.View.extend({
className: 'toast',
initialize: function() {
Mustache.parse(this.template);
this.$el.hide();
},

35
js/views/whisper_view.js Normal file
View file

@ -0,0 +1,35 @@
/* vim: ts=4:sw=4:expandtab
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.View = Backbone.View.extend({
constructor: function() {
Backbone.View.apply(this, arguments);
Mustache.parse(_.result(this, 'template'));
},
attributes: function() {
return _.result(this.model, 'attributes', {});
},
render: function() {
var attrs = _.result(this, 'attributes', {});
var template = _.result(this, 'template', '');
this.$el.html(Mustache.render(template, attrs));
return this;
}
});
})();

1
options.html
View file

@ -102,6 +102,7 @@
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
<script type="text/javascript" src="js/options.js"></script>
</body>

2
test/index.html
View file

@ -129,6 +129,7 @@
<script type="text/javascript" src="../js/chromium.js"></script>
<script type="text/javascript" src="../js/views/whisper_view.js" data-cover></script>
<script type="text/javascript" src="../js/views/list_view.js" data-cover></script>
<script type="text/javascript" src="../js/views/group_update_view.js"></script>
<script type="text/javascript" src="../js/views/attachment_view.js"></script>
@ -139,6 +140,7 @@
<script type="text/javascript" src="../js/views/conversation_view.js" data-cover></script>
<script type="text/javascript" src="../js/views/new_conversation_view.js" data-cover></script>
<script type="text/javascript" src="views/whisper_view_test.js"></script>
<script type="text/javascript" src="views/group_update_view_test.js"></script>
<script type="text/javascript" src="views/message_view_test.js"></script>
<script type="text/javascript" src="views/list_view_test.js"></script>

34
test/views/whisper_view_test.js Normal file
View file

@ -0,0 +1,34 @@
describe('Whisper.View', function() {
it('renders a template with attributes', function() {
var viewClass = Whisper.View.extend({
template: '<div>{{ variable }}</div>',
attributes: {
variable: 'value'
}
});
var view = new viewClass();
view.render();
assert.strictEqual(view.$el.html(), '<div>value</div>');
});
it('renders a template with no attributes', function() {
var viewClass = Whisper.View.extend({
template: '<div>static text</div>'
});
var view = new viewClass();
view.render();
assert.strictEqual(view.$el.html(), '<div>static text</div>');
});
it('renders a template function with attributes function', function() {
var viewClass = Whisper.View.extend({
template: function() { return '<div>{{ variable }}</div>'; },
attributes: function() {
return { variable: 'value' };
}
});
var view = new viewClass();
view.render();
assert.strictEqual(view.$el.html(), '<div>value</div>');
});
});