Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
// @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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.