So I've been porting my app over to ractive. I'm currently serving up each page from Express using Swig... to render out a ractive template client side. This seems a bit nuts when I could serve up one page and use ractive to do all the client side rendering.
I understand that Ractive doesn't ship with a router, and indeed leaves one out by design (to give flexibility etc - it makes sense). I've googled, and trawled through Stack overflow and see a number of third party router libraries are recommended...
However, I can't find any tutorials or advise on best practice regarding routing with rative. So my question is - are there any available?
Thanks
** EDIT **
Following on from martypdx comment - here are the routes I need:
/home <!-- a static page -->
/list <!-- a list of items -->
/list/:itemID <!-- a link to an items detail page -->
/contact <!-- a static contact page -->
In express I've built a simple api that handles all the db stuff.. all the basic CRUD stuff. I'm using socket.io to send all the data back and forth.
Ractive.js and routing? It's pretty simple actually, no magic needed.
<!-- main.js -->
{{# route('/') }}<home />{{/}}
{{# route('/about') }}<about />{{/}}
{{# route('/404') }}<not-found />{{/}}
<script>
component.exports = {
data: {
route: function(path){
// Your pattern matching algorithm here. Return true if match.
// You can use location.pathname, location.search and location.hash
}
},
components: {
home: /* home constructor */,
about: /* about constructor */,
'not-found': /* not-found constructor */,
}
};
</script>
You have other options, like computed properties:
{{# isHome }}<home />{{/}}
{{# isAbout }}<about />{{/}}
{{# isNotFound }}<not-found />{{/}}
<script>
function router(path){
return function(){
// Your pattern matching algorithm here. Return true if match.
// You can use location.pathname, location.search and location.hash
}
}
component.exports = {
computed: {
isHome: router('/'),
isAbout: router('/about'),
isNotFound: router('/404'),
},
components: {
home: /* home constructor */,
about: /* about constructor */,
'not-found': /* not-found constructor */,
}
};
</script>
As for passing down the data, you also have a lot of options. You can use oninit that runs when the component is created and ready to render (or in this case, when a section becomes truthy, ie. {{# isHome }} when isHome is true). Here's an example of <home /> fetching data oninit:
<!-- home.js -->
<h1>Home</h1>
<div>{{someDynamicData}}</div>
<script>
var SomeDataStore = require('stores/some-data-store');
component.exports = {
oninit: function(){
// Let's say your data comes from an AJAX call
$.get(...).then(function(response){
this.set('someDynamicData', response);
}.bind(this));
// Or say it's from a listenable data store (like Reflux)
SomeDataStore.listen(function(){
this.set('someDynamicData', SomeDataStore.getSomeDynamicData());
});
}
}
</script>
Or you can have the routing component fetch and pass it down (and the routing component "owns" the data). This works well with the computed approach since you can observe computed values and fetch when the appropriate view appears.
<!-- main.js -->
{{# isHome }}<home data="{{homeData}}" />{{/}}
{{# isAbout) }}<about data="{{aboutData}}" />{{/}}
{{# isNotFound }}<not-found data="{{notFoundData}}" />{{/}}
<script>
component.exports = {
...
oninit: function(){
this.observe('isHome', function(isHome){
if(!isHome) return;
// still the same here, you can use any data source, as long as you
// set to a data property in the end
this.get(...).then(function(response){
this.set('homeData', response);
}.bind(this));
});
this.observe('isAbout', function(isAbout){
if(!isAbout) return;
...
});
}
};
</script>
Related
I've completed the basic leaderboard app and read further documentation and finally decided to make my own app using this tutorial as a guide: http://meteorcapture.com/publishing-data-from-an-external-api/
my current code seems to work up until the point of passing data back to the client. I can't seem to get data from the server. Even though I have my subscribe and publish all set up.
I've cut down and simplified my code but to reduce points of error:
MyMp = new Mongo.Collection('mymp');
if (Meteor.isClient) {
Session.setDefault('searching', false);
Tracker.autorun(function(){
if(Session.get('postcode')){
var twfyHandle = Meteor.subscribe('twfySearch', Session.get('postcode'));
Session.set('searching', ! twfyHandle.ready());
}
});
Template.searchForm.events({
'submit form': function(event, template) {
event.preventDefault();
var postcode = template.$('input[type=text]').val();
if (postcode) {
Session.set('postcode', postcode);
}
}
});
Template.body.helpers({
mymp: function() {
return MyMp.find();
},
searching: function() {
return Session.get('searching');
}
});
}
if (Meteor.isServer) {
Meteor.publish('twfySearch', function(postcode){
console.log(postcode); // this received ok
var self = this;
var mp = {first_name: 'Test Name', party: 'Labour'}
self.added('mymp', Random.id(), mp);
self.ready();
});
}
Templates in my HTML file:
<body>
<h1>Get Details on your MP and Constituency</h1>
<h2>Enter your post code below</h2>
{{> searchForm }}
{{#if searching }}
<p>Searching...</p>
{{else}}
<div class="">
{{> twfyResults }}
</div>
{{/if}}
</body>
<template name="twfyResults">
{{ mp.first_name }}
</template>
<template name="searchForm">
<form>
<input type="text" name="postcode" id="postcode" />
<input type="submit" value="Search" />
</form>
</template>
I'm passing a postcode to the server and the server populates a basic JSON object 'mp' under a publish method and makes it ready().
This is where it fails. Although my console.log() calls show that the server is getting the postcode fine and creating the mp object. The client is not getting anything back!
UPDATE:
I have managed to manually run in the browser console MyMp.findOne() and it returns the object the server created. However, this object seems inaccesible to my template. Also the 'mp' object itself doesnt exist.
I've realised THREE errors in my code.
I assumed the template object used to access the data sent back had the same name on the frontend as it did in the server (mp). Instead I should have been trying to access the helper name "mymp".
This was fixed by changing the twfyResults template to reference the helper method:
<template name="twfyResults">
{{ mymp.first_name }}
</template>
My helper for the twfyResults was in the wrong context. So I rewrote my helpers like so:
Template.body.helpers({
searching: function() {
console.log(this);
return Session.get('searching');
}
});
Template.twfyResults.helpers({
mymp: function() {
return MyMp.findOne();
}
});
But the above alone wasn't enough. I also had to change the "mymp" helper to return just one result as in this case only one result would ever be returned. That way I could access my objects variables in the above way. So my helper was changed to findOne() instead of just find as seen above.
They way I'm testing this is a simple for loop in the template to run through the elements available to the client and display them in a list.
I insert the elements through a text input identified by #query.
When I enter an element, it displays for a brief instant, and a console log that prints out Links.find().fetch() shows that the element exists, and then shortly afterwards, the element is seemingly automagically removed making any successive calls to Links.find().fetch() yield an empty list. Is this a bug within Meteor? Or is it expected behaviour and bad implementation?
UPDATE
Another weird development, I added setTimeout(function(){Links.find().fetch()},3000); to the server side to try and track what was going on. With this line, the inserts work correctly for a while, and then crashes with these errors: http://i.imgur.com/CUYDO67.png
. What is going on?
Below is my template file myapp.html
<head>
<title>myapp</title>
</head>
<body>
{{> search_bar}}
<br>
{{> list_of_links}}
</body>
<template name="search_bar">
<h1>Playlist</h1>
<input id="query" type="text" placeholder="Enter Query Here"/>
</template>
<template name="list_of_links">
<ul id="item-list">
{{#each my_playlist}}
{{> link_item}}
{{/each}}
</ul>
</template>
<template name="link_item">
<li class="link">
<div class="link-title">{{youtube_link}} {{sess}}</div>
</li>
</template>
And here follows myapp.js
//Setting up a collection of urls
Links = new Meteor.Collection("links");
if (Meteor.isClient) {
//"Subscribing" to server's published data
Deps.autorun( function(){
Meteor.subscribe( "links", Meteor.default_connection._lastSessionId);
});
//Nuke database helper function -- debugging
Template.list_of_links.clean = function(collection) {
if(collection) {
// clean items
_.each(collection.find().fetch(), function(item){
collection.remove({_id: item._id});
});
}
}
//Songs from session
Template.list_of_links.my_playlist = function () {
return Links.find();
};
Template.search_bar.events({
//http://stackoverflow.com/a/13945912/765409
'keypress #query' : function (evt,template) {
// template data, if any, is available in 'this'
if (evt.which === 13){
var url = template.find('#query').value;
//Find a nicer way of clearing shit.
$("#query").val('');
Links.insert({sess:Meteor.default_connection._lastSessionId,youtube_link:url});
var cursor = Links.find();
cursor.rewind();
console.log(cursor.fetch());
//Add to database.
}
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
Meteor.publish("links", function( sess ) {
return Links.find({sess: sess}); //each client will only have links with that _lastSessionId
});
//Making sure permissions are correct
Links.allow({
insert: function (userId, doc) {
return true;
}
});
});
}
That kind of behavior is expected when user doesn't have enough privileges to create a document. The insert function creates a local copy of the doc instantly (thanks to latency compensation), and then sync it with the result of server operation. If that operation fails, the temporary document is purged from client's Minimongo.
Have you created proper rules with Collection.allow? That's the first place to look for the cause.
I am using meteor along with meteor-router for client and server side routing. I'm wondering what a good way to handle site notifications, specifically "flash" type ones.
In the global layout.html I can have a handlebars output a message if a "message" session variable is set, but the message shouldn't stick around once the app is routed to a new url with Meteor.Router.to().
What's a good solution to having "flash" notifications? Or, how can I automatically clear a session variable after routing to a new URL.
layout.html:
<head>
<title>Meteor App</title>
</head>
<body>
{{> global-layout}}
</body>
<template name="global-layout">
{{#if message}}
<div class="message">{{message}}</div>
{{/if}}
{{renderPage}}
</template>
then in layout.js
Template['global-layout'].message = function () {
return Session.get('message');
};
I'm using a Meteor.Router.filter for this. This filter will be applied to all routes, therefore all flashes will be cleared on all url changes.
routes.js
Meteor.Router.filters({
// clearSeenMessages filter clears all seen messages.
// This filters is applied to all pages
clearSeenMessages: function (page) {
flash.clear();
return page;
},
});
// applies to all pages
Meteor.Router.filter('clearSeenMessages');
Here's the rest of the implementaion, aspects were borrowed from telesc.pe
client/views/flashes/flash_item.html
<template name="flashItem">
{{#if show}}
<div class="alert-box {{type}}">
{{message}}
<a class="close" href="">×</a>
</div>
{{/if}}
</template>
client/views/flashes/flash_item.js
// When the template is first created
Template.flashItem.created = function () {
// Get the ID of the messsage
var id = this.data._id;
Meteor.setTimeout(function () {
// mark the flash as "seen" after 100 milliseconds
flash.Flashes.update(id, {$set: {seen: true}});
}, 100);
}
client/views/flashes/flashes.html
<template name="flashes">
{{#each flashes}}
{{> flashItem}}
{{/each}}
</template>
client/views/flashes/flashes.js
Template.flashes.flashes = function () {
return flash.Flashes.find();
}
client/views/app.html
<body>
<!-- add the flashes somewhere in the body -->
{{> flashes}}
</body>
client/lib/flashes.js
// flashes provides an api for temporary flash messages stored in a
// client only collecion
var flash = flash || {};
(function (argument) {
// Client only collection
flash.Flashes = new Meteor.Collection(null);
// create given a message and optional type creates a Flash message.
flash.create = function (message, type) {
type = (typeof type === 'undefined') ? 'error' : type;
// Store errors in the 'Errors' local collection
flash.Flashes.insert({message: message, type: type, seen: false, show: true});
};
// error is a helper function for creating error messages
flash.error = function (message) {
return flash.create(message, 'error');
};
// success is a helper function for creating success messages
flash.success = function (message) {
return flash.create(message, 'success');
};
// info is a helper function for creating info messages
flash.info = function (message) {
return flash.create(message, 'info');
};
// clear hides viewed message
flash.clear = function () {
flash.Flashes.update({seen: true}, {$set: {show: false}}, {multi: true});
};
})();
Usage
flash.success('This is a success message');
flash.error('This is a error message');
flash.info('This is a info message');
You can now use the router-with-flash package available on atmosphere to handle flash notifications. If you use meteorite (which you should), you can do mrt add router-with-flash in the root directory of your project. Then, to display an alert you need to -
Meteor.Router.to("/", { alert: "Some alert..." });
Meteor.Router.notification("alert");
This will display the alert until the next call to Meteor.Router.to().
I've got a setup like this in Ember:
App.ListObject = Ember.Object.create({
knownThings: function() {
var ot = this.openThings.get('content');
var ct = this.closedThings.get('content');
var kt = ot.concat(ct);
var known = Ember.ArrayController.create({content: kt});
return known;
}.property(),
openThings: Ember.ArrayController.create({
content: []
}),
closedThings: Ember.ArrayController.create({
content: []
}),
})
Basically, known things is the combined arrays of openThings and closedThings. I can't seem to figure out how to iterate over knownThings in the template. Just doing
{{#each App.ListObject.knownThings }}
Does not work as the property needs to be accessed like App.ListObject.get('knownThings') but that doesn't work in the template unless I'm doing something terribly wrong. Iterating over the other attributes in the template does work (open and closed things)
So, how would you iterate over knownThings in the template?
Slight Modifications needed...
Firstly,
knownThings: function() {
//use get to retrieve properties in ember, Always !
var ot = this.get('openThings').get('content');
//var ot = this.get('openThings.content') if you are using latest ember
var ct = this.get('closedThings').get('content');
//var ot = this.get('closedThings.content') if you are using latest ember
var kt = ot.concat(ct);
var known = Ember.ArrayController.create({content: kt});
return known;
//Add dependencies to keep your knownThings in sync with openThings & closedThings if at all they change in future
}.property('openThings', 'closedThings')
Coming to Handlebars iterate using
//you forgot content property, and in handlebars you don;t need to use get, dot operator is enough
{{#each App.List.knownThings}}
Let me know if this works...
Update
Working Fiddle...
Unless I didn't understand what you're saying, I think you should have ListObject extending Em.ArrayController instead of Em.Object. Also, if your property depends on content, it should be .property('content.#each'). If you're using the router, your template should look like {{#each thing in controller.knownThings}} and you use {{thin.something}}, if not using router, then {{#each item in App.listObject.knownThings}}. Also, openThings and closedThings don't seem to be correct and the way you're accessing them is wrong too.
I didn't write a fiddle for this specific case cause I don't really know what you're trying to do, but take a look at this fiddle, specifically at App.ResourcesController and the template 'resources-view':
Controller:
// ...
App.ResourcesController = Em.ArrayController.extend({
content: [],
categories: ['All', 'Handlebars', 'Ember', 'Ember Data', 'Bootstrap', 'Other'],
categorySelected: 'All',
filtered: function() {
if(this.get('categorySelected') == "All") {
return this.get('content');
} else {
return this.get("content")
.filterProperty(
"category",
this.get('categorySelected')
);
}
}.property('content.#each', 'categorySelected'),
filteredCount: function() {
return this.get('filtered').length;
}.property('content.#each', 'categorySelected'),
hasItems: function() {
return this.get('filtered').length > 0;
}.property('filteredCount')
);
// ...
Template:
<script type="text/x-handlebars" data-template-name="resources-view">
<h1>Ember Resources</h1>
{{#view Bootstrap.Well}}
The following is a list of links to Articles, Blogs, Examples and other types of resources about Ember.js and its eco-system.
{{/view }}
{{view Bootstrap.Pills contentBinding="controller.controllers.resourcesController.categories" selectionBinding="controller.controllers.resourcesController.categorySelected"}}
<i>{{controller.filteredCount}} Item(s) Found</i>
{{#if controller.hasItems}}
<ul>
{{#each resource in controller.filtered}}
<li>
<a {{bindAttr href="resource.url"
target="resource.target"
title="resource.description"}}>
{{resource.htmlText}}
</a>
</li>
{{/each}}
</ul>
{{else}}
{{#view Bootstrap.AlertMessage type="warning"}}
Couldn't find items for {{controller.categorySelected}}
{{/view}}
{{/if}}
</script>
I would like the ability to load templates dynamically without explicitly specifying the template.
As an example:
<template name="foo">
</template>
where 'foo' is the template, I would like the ability to load it dynamically by calling some method:
Meteor.render(Meteor.loadTemplate('foo'));
Is this possible?
Here's how to dynamically render templates, as of Meteor 0.9.4 - 1.0. All other answers were obsolete at the time of this writing.
Let's say you're editing a bunch of records, or creating a new one, and want to render either the update template, or the new template, based on some Session variables.
There are two ways to do this:
1) This is the officially recommended method for Meteor 0.9.4 or newer - it uses Template.dynamic:
<template name="records">
{{> Template.dynamic template=whichOne}}
</template>
<template name="recordUpdate">
...
</template>
<template name="recordNew">
...
</template>
Template.records.helpers({
whichOne: function () {
return Session.get('edit') ? 'recordUpdate' : 'recordNew'
// note that we return a string - per http://docs.meteor.com/#template_dynamic
}
});
2) This works in various Meteor versions, but isn't recommended officially because it's unclear that the template is chosen dynamically:
<template name="records">
{{> whichOne}}
</template>
{{! Note how "whichOne" is indistinguishable from a constant template name... }}
{{ ...like "recordUpdate" or "recordNew" below. }}
<template name="recordUpdate">
...
</template>
<template name="recordNew">
...
</template>
Template.records.helpers({
whichOne: function () {
return Session.get('edit') ? Template.recordUpdate : Template.recordNew
// note that we return a Template object, not a string
}
});
To pass a data context to the template, use:
{{> Template.dynamic template=whichOne data=myData}}
Meteor 0.9.x New API
Dan Dascalescu pointed out Meteor now has built-in dynamic templates! This is nice because you do not need to include the extra code as seen in previous versions.
{{> Template.dynamic template=template [data=data] }}
For Meteor 0.8.x Legacy
Dynamic Template Without Data: Boris Kotov's updated Blaze (0.8.0) answer is on the right track (taken from the latest docs), but it doesn't work as-is for me. I got the following to work:
{{> dynamicTemplate name=myDynName}}
<template name="dynamicTemplate">
{{#with chooseTemplate name}}
{{> template}}
{{/with}}
</template>
Template.dynamicTemplate.chooseTemplate = function (name) {
return { template: Template[name] };
};
I hope there is a simpler solution, but I needed to wrap the Template in a JSON as shown. Maybe this will help someone else to move forward.
Dynamic Template With Data: If you have and want data to be dynamic, be sure to make a helper method that can react. Be sure to do a Session.set() somewhere to see the effect.
// Inside "myContainingTemplate"
{{> dynamicTemplateWithData name=myDynName data=myDataHelper}}
<template name="dynamicTemplateWithData">
{{#with chooseTemplate name}}
{{#with ../data}}
{{> ..}}
{{/with}}
{{/with}}
</template>
Template.dynamicTemplateWithData.chooseTemplate = function (name) {
return Template[name];
};
Template.myContainingTemplate.helpers({
myDataHelper: function () {
Session.get('myReactiveKey');
}
});
You have found Meteor.render but what you are missing is the template loading.
In the docs it mentions that you can call Template.foo() to return the HTML for a template.
http://docs.meteor.com/#template_call
Putting that together you access the template foo or any other using bracket access so:
var templateName = "foo";
var fragment = Meteor.render( function() {
return Template[ templateName ](); // this calls the template and returns the HTML.
});
Then fragment is your Reactive fragment, so that your template can continue to receive live updates. Your fragment now needs placing in the web page (I use jQuery, so this example does as well):
$("#htmlnode").html( fragment );
$("#htmlnode") is just a node in your DOM where you want the template rendered. And you now have the rendered content in your web page.
I'm just doing it like this, no jQuery required:
EDITED
Template.mainContent.showContentFromRouter = function() {
return Template[Meteor.Router.page()]();
};
In this case I'm using the Meteor Router, and return whatever template that I choose to (from the Router), but you could just do this:
Template.mainContent.showDynamicContent = function() {
return Template['someTemplateYouveDefined']();
};
Update for blaze:
https://github.com/meteor/meteor/wiki/Using-Blaze#templatefoo-is-not-a-function-and-does-not-return-a-string
Dynamically render a template with a given data context
Old:
{{dynamicTemplate name="templateName" data=dataContext}}
Template.foo.dynamicTemplate = function (opts) {
return Template[opts.name](opts.data);
};
New: (Notably, in Blaze, keyword arguments to inclusion or block helpers are bundled into a single object which becomes the new data context)
{{> dynamicTemplate name="templateName" data=dataContext}}
<template name="dynamicTemplate">
{{#with chooseTemplate name}}
{{#with ../data}} {{! original 'data' argument to DynamicTemplate}}
{{> ..}} {{! return value from chooseTemplate(name) }}
{{/with}}
{{/with}}
</template>
Template.dynamicTemplate.chooseTemplate = function (name) {
return Template[name];
}
By the way, I don't really played with it, but this is what I took from the new blaze docs. So I think it should be the way to do it ;)
From https://github.com/meteor/meteor/wiki/Using-Blaze
{{> post}}
Template.foo.helpers({
post: function () {
return Template[this.postName];
}
});
Template inclusions now search the namespace of helpers and data for template objects, so it's easy to programmatically choose which template to use. This is a powerful feature, and will allow patterns like assigning one template as a helper of another so that it can be overridden.
Meteor 0.8.x Legacy
Using Joc's answer as a guide,
I've achieved similar using http://docs.meteor.com/#template_call, but using a helper instead, as suggested by the docs:
When called inside a template helper, the body of Meteor.render, or other settings where reactive HTML is being generated, the resulting HTML is annotated so that it renders as reactive DOM elements
My client.js looks a bit like this:
Template.myPageTemplate.helpers({
dynamicTemplate: function() {
// conditional logic can be added here to determine which template to render
return Template.myDynamicTemplate();
}
});
and my html looks like this:
<template name="myPageTemplate">
<h1>My Template</h1>
{{{dynamicTemplate}}}
</template>
<template name="myDynamicTemplate">
<h1>My Dynamic Template</h1>
</template>
Based on hillmark's answer, this is the easiest it could get:
Template.main.template = function() {
if (some_condition) {
return Template.A();
} else {
return Template.B();
}
};
With the corresponding .html
<body>
{{> main}}
</body>
<template name="main">
{{{template}}}
</template>
<template name="A">
<h1>Template A</h1>
</template>
<template name="B">
<h1>Template B</h1>
</template>
Edit
Doesn't work in Meteor 0.8.0
for me the easiest way was to just create a function get_dynamic_template, so something like:
var a= get_dynamic_template(template_name,data);
which returns what can be rendered as a normal variable {{a}}
The code for this function is quite simple:
var get_dynamic_template = function(template_name,data)
{
return function(){
return new Handlebars.SafeString(
UI.toHTML(
Template[template_name].extend({data: function () { return data; }}))
);
};
}
This would handl dynamic templates both with and without data:
(requires Blaze/ Meteor 0.8)
{{> dynamicTemplate name=templateName}}
<template name="dynamicTemplate">
{{#with chooseTemplate name }}
{{#if ../data}}
{{#with ../data }}
{{> .. }}
{{/with}}
{{else}}
{{> this}}
{{/if}}
{{/with}}
<template name="dynamicTemplate">
template javascript:
Template.dynamicTemplate.chooseTemplate = function (name) {
return Template[name];
};