public
Created

  • Download Gist
ViewLayoutTests.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
// @browsertest-depend library.js.rm.models.Model.js
// @browsertest-depend library.js.view.View.js
// @browsertest-depend library.js.view.mixin.Skeleton.js
// @browsertest-depend test.js.library.view.GraphPersonDirectoryFixture.js
// @browsertest-depend test.js.library.view.ViewDemo.html
// @browsertest-depend test.js.library.view.ViewDemo.css
 
module('View.Layout');
 
function defineViews() {
var View = Jecture.get('ViewFactory');
 
// create some base implementations
View.define('BaseView', {
childConfig: {
header: 'HeaderView'
},
construct: function() {
this.bind('childAdded:header', function(child) {
$(child.el).prependTo(this.el);
}, this);
}
});
View.define('BaseListItem', {
className: 'list-item',
render: function() {
$(this.el).html(this.renderSkeleton());
}
}, {
mixins: ['View.Skeleton']
});
 
// set up grid view
View.defineFrom('BaseView', 'GridView', {
el: '#layout-grid'
});
View.defineFrom('BaseListItem', 'GridItemView', {
viewContainer: 'GridView',
skeleton: 'griditem'
}, {
viewModel: 'GraphPerson'
});
 
// set up list view
View.defineFrom('BaseView', 'ListView', {
el: '#layout-list',
childConfig: {
header: 'HeaderView', // deep extend would be useful here
listItems: 'ListItemView'
}
});
View.defineFrom('BaseListItem', 'ListItemView', {
tagName: 'li',
viewContainer: 'ListView',
skeleton: 'listitem'
}, {
viewModel: 'GraphPerson'
});
 
// header view
View.define('HeaderView', {
tagName: 'h3',
content: 'Cool Kids Club'
});
}
 
function defineModels() {
var people = Jecture.get('GraphPersonDirectory'),
indx = 0;
 
Jecture.set(function() {
if (indx === people.length) indx = 0;
 
var person = people[indx++];
person['picture'] = 'https://graph.facebook.com/'
+ person.id + '/picture';
return new rm.models.Model(person);
}, 'GraphPerson', {
creationMethod: 'call'
});
}
 
test('Can attach to html', function() {
defineViews();
defineModels();
 
// Boot up view containers
// (could also be bound to models so we don't have to create)
Jecture.get('GridView');
Jecture.get('ListView');
 
// can override options during instantiation if you want
Jecture.get('HeaderView', {
viewContainer: 'GridView'
});
Jecture.get('HeaderView', {
viewContainer: 'ListView'
});
 
// start model spout
setInterval(function() {
Jecture.get('GraphPerson');
}, 3000);
 
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.