Last active
December 21, 2015 14:39
-
-
Save dburles/6321059 to your computer and use it in GitHub Desktop.
Meteor route/template ideas #2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// for the sake of clarity | |
Blogs = new Meteor.Collection('blogs'); | |
// Basic main app routes domain.com/* | |
// No first parameter name passed here, so assume the main routes | |
RouteController.add({ | |
layout: 'layout', | |
map: [ | |
{ name: 'home', root: true }, // could set 'root' to define the / route if we skipped 'path' for other routes | |
{ name: 'about' }, // we could assume path /about/ from name | |
{ name: 'contact' } // we could assume path /contact/ from name | |
] | |
}); | |
/* | |
<template name="layout"> | |
<h1>my awesome website</h1> | |
{{yield}} | |
</template> | |
<template name="home"> | |
<h2>home</h2> | |
</template> | |
<template name="about"> | |
<h2>about</h2> | |
</template> | |
<template name="contact"> | |
<h2>contact</h2> | |
</template> | |
*/ | |
// Route domain.com/admin/ | |
// Set controller name to 'admin' | |
RouteController.add('admin', { | |
layout: 'layout', | |
map: [ | |
{ | |
name: 'home', | |
root: true, | |
events: {}, | |
helpers: {} | |
} | |
] | |
}); | |
/* | |
<template name="home" controller="admin"> | |
<p>main admin page</p> | |
</template> | |
<template name="layout" controller="admin"> | |
<h1>admin interface</h1> | |
<ul> | |
{{yield 'nav'}} | |
</ul> | |
{{yield}} | |
</template> | |
*/ | |
// Route domain.com/admin/blog/ | |
// Set controller name to 'blog' | |
RouteController.add('blog', { | |
// define parent controller for layout template inheritance | |
// and also other potential settings defined on the admin controller | |
// also used for building route path, /admin/blog/ | |
// ^ parent | |
parent: 'admin', | |
// layout: '' can set, will overwrite parent (possibly) | |
renderTemplates: { | |
'nav': { to: 'nav' } | |
}, | |
map: [ | |
{ name: 'overview', root: true }, | |
{ name: 'add' }, | |
{ | |
name: 'edit', | |
path: 'edit/:_id', | |
helpers: { | |
blog: function() { | |
return Blogs.findOne(this.params._id); | |
} | |
}, | |
events: { | |
'submit form': function(event, template) { | |
event.preventDefault(); | |
console.log('form submit'); | |
} | |
} | |
} | |
] | |
}); | |
/* | |
<template name="nav" controller="blog"> | |
<li><a href="{{pathFor 'blog.overview'}}">overview</a></li> | |
<li><a href="{{pathFor 'blog.add'}}">add</a></li> | |
</template> | |
<template name="overview" controller="blog"> | |
<h2>list of blogs</h2> | |
<ul> | |
{{#each blogs}} | |
<li>{{title}}</li> | |
{{/each}} | |
</ul> | |
</template> | |
<template name="add" controller="blog"> | |
<h2>add blog post</h2> | |
... | |
</template> | |
<template name="edit" controller="blog"> | |
<h2>edit blog post</h2> | |
<form> | |
<input type="submit" value="save"> | |
</form> | |
</template> | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
possibly bad for reusablity tying templates to a specific controller
perhaps then just don't use a controller for reusable templates!