DRY up a common view pattern

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

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>

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>');
});
});