Why not converted text/ractive to HTML.
This is result in browser:
This is code in page which include template:
This is the template:
This is error in console:
This if instance using the template:
It's a template. You need to load Ractive in the browser and create a new instance using the template:
var ractive = new Ractive({
el: '#your-target-element',
template: '#step-1',
data: yourData
});
Related
This is the routes templateData
this.route('editSession', {
path: '/dashboard/events/:_id/editSession/:_sid',
template: 'editSession',
layoutTemplate: 'dashboard_layout',
data: function () {
var sId = this.params._sid;
var eId = this.params._id;
var templateData = {
session: Sessions.findOne({ _id: sId }),
event: Events.findOne({ _id: eId })
};
return templateData;
}
})
I'm trying to use the events object being passed through the router, but when I use events._id in the template, nothing renders because it is within the #each tags for the session. How can I escape it so I am able to use another data object?
{{#each sessions}}
<h3>Session</h3>
<p>{{name}}</p>
<p>{{description}}</p>
<p>{{startTime}} - {{endTime}}</p>
<button class="btn btn-danger">Edit Session</button>
{{/each}}
Please help. So stuck. Would be really appreciated :)
In spacebars you can use ../ to jump up one context level. Assuming event is in the enclosing context of the #each you can do this:
<a href="/dashboard/events/{{../event._id}}/editSession/{{_id}}">
Note: I'm using the singular event, as specified in your router.
I am new to Ractive JS.I want to know that How to create multiple ractive objects for individual template?
Thanks In Advance
Samir Kahar
Sounds like you want to use a component. See also the extending Ractive tutorial.
You just create multiple Ractive instances. Here's about the simplest possible ractive template used twice on the same page with different data:
<div id="div1"></div>
<div id="div2"></div>
<script type="text/ractive" id="sampleTemplate">
Hello, {{name}}.
</script>
<script>
var ractive1 = new Ractive({
el: '#div1',
template: '#sampleTemplate',
data: { name: 'World' }
});
var ractive2 = new Ractive({
el: '#div2',
template: '#sampleTemplate',
data: { name: 'World 2' }
});
</script>
I'm looking at the Authoring Ractive.js components document on github from Rich-Harris.
It starts with invoking the foo component and including it this way:
<link rel='ractive' href='foo.html' name='foo'>
<p>This is an imported 'foo' component: <foo/></p>
Which I understand as declaring foo.html as a component and calling it on the foo tag, and this would not require doing a ractive.load (although I did not understand yet where the data loading would occur).
As it does not work at all (no loading of the component), I'm wondering if I mis-understood this part.
Has anyone use this and could give me a complete example?
Components themselves are independent of the loading mechanism.
In the simplest form, components can be declared in javascript:
Ractive.components.foo = Ractive.extend({
template: '#foo' // id of script tag, or can be inline string,
// other options
});
var ractive = new Ractive({
template: '<p>This is an main view with a 'foo' component: <foo/></p>'
});
Creating components is covered here in the docs.
There are many ways to package and load components. Using the link tag, as in your example, requires using ractive-load to actually load the components:
<!-- name is optional if same as file name -->
<link rel='ractive' href='foo.html' name='foo'>
<script src='ractive.js'></script>
<script src='ractive-load.js'></script>
<script>
// calling load() with no parameters loads all link tags and
// registers them as global components
Ractive.load().then( function () {
var ractive = new Ractive({
el: 'body',
template: 'I have access to the <foo/> component!',
data: { ... }
});
// or you could instantiate a component via:
var app = new Ractive.components.app({
... /options
});
}).catch( handleError );
</script>
i am farely new to meteor, so it might be obvious.
I am trying to define some routes:
Router.route('/translations', {name:'translation.index'});
Router.route('/translations/:_id', {name:'translation.show'});
I also have defined a Controller which should define how to get the Data:
TranslationIndexController = RouteController.extend({
template: 'TranslationIndex',
data: function () {
return Translations.find();
},
sayHello: function(){
return 'hello';
}
});
I have some Collection that is just fetched and some random tempalte helper. My template looks like this:
<template name="TranslationIndex">
TestOutput:
{{sayHello}}
{{#each data}}
<li>askljdfh</li>
{{/each}}
</template>
But neither my hello nor my collection is shown. PS: I have checked if my collection contains data by using Translations.find().count() in the console.
You need to call the controller in your route, e.g.,
Router.route('/translations', {
name:'translation.index',
controller: TranslationIndexController
});
The data should then be available.
I have a script that executes once a modal is launched. The js to configure the js object is:
var source = $("#print-script").html();
var template = Handlebars.compile(source);
var data = {
image: image,
title: title,
caption: subtitle,
category: template
};
$("#print-template").html(template(data));
All the variables are set above the object declaration and are working. My html reads:
<script id="print-script" type="text/x-handlebars-template">
<div class="print-only" id="print-template">
<img src="{image}"/>
<h2><span class="icon"></span>{category}</h2>
<h3>{title}</h3>
<p class="headline">{caption}</p>
<div class="description">{long_description}</div>
</div>
</script>
I'm getting a Uncaught TypeError: Cannot read property 'image' of undefined. I have confirmed that the object (data) is being populated with content. Thoughts?
I'd guess that the problem is right here:
var template = Handlebars.compile(source);
var data = {
//...
category: template // <------------------- oops
};
Note that template is the compiled template function there so when the template tries to fill in {category}, it will execute the template function. But the template function is expecting some values to fill in the template with and then it is called through {category}, those values won't be there and you'll get a TypeError. Run these two demos with your console open and you should see what's going on:
Error using category: template:
http://jsfiddle.net/ambiguous/9wEyS/
Works using category: function() { return 'string' }:
http://jsfiddle.net/ambiguous/YgfZx/
turns out there needs to be another object in the data:
var data = { print:{
image: featuredImage,
title: title,
caption: subtitle,
category: template
}
};