Using meteor, I'm trying to populate a list of tasks within a template. This will render the tasks just fine:
<body>
<div class="container">
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
This is a separate template task.html
<template name="task">
<li>{{text}}</li>
</template>
But once I wrap it in a home template so that I may route it appropriately it no longer shows up:
<template name="home">
<body>
<div class="container">
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
Why is this? Below is the client side js, masterLayout template, and router.js.
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is sk 2" },
{ text: "This is task 3" }
]
});
<template name="masterLayout">
{{> yield region='nav'}}
<div id="content">
{{> yield}}
</div>
{{> yield region='footer'}}
</template>
Router.map(function() {
this.route('home', {
path: '/',
});
this.route('private');
this.route('testing');
});
I figured it out. You need to change the middle word home to the template you are referencing. https://www.meteor.com/tutorials/blaze/templates
Template.home.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is sk 2" },
{ text: "This is task 3" }
]
});
Related
I'm fairly new to Meteor and I can't get my head around how to get a function to work in every iteration of a template independently from the others. I've written a very basic function where I want to display a pop up inside each template on button click, but the pop up always appears at the first generated template instead of being bound to the specific button I click. I've searched around and found that it might have to do with template instances or reactive variables but as of now I'm rather confused.
Could this be on the right track? https://dweldon.silvrback.com/template-instance
My code:
.html
<body>
{{> test}}
</body>
<template name="test">
{{#each tasks}}
<button type="button" id="popup">Click Me!</button>
<div id="pops">Hi</div>
{{/each}}
</template>
.js
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
Template.test.helpers({
tasks: function () {
return Tasks.find({});
}
});
Template.test.events({
'click #popup': function(e, template) {
template.$('#pops').fadeIn();
}
});
}
I haven't written anything in the server code at all.
Thanks!
Don't use IDs, use classes instead. Why? Because you are not allowed to have several elements with the same ID.
Create new template task and render it inside each loop.
HTML:
<body>
{{> test}}
</body>
<template name="test">
{{#each tasks}}
{{> task}}
{{/each}}
</template>
<template name="task">
<button type="button" class="popup">Click Me!</button>
<div class="pops">Hi</div>
</template>
JS:
Template.task.events({
'click .popup': function() {
template.$('.pops').fadeIn();
}
});
try changing your code like this
<template name="test">
{{#each tasks}}
<button type="button">Click Me!</button>
<div id={{_id}}>Hi</div>
{{/each}}
</template>
Template.test.events({
'click button': function(e, template) {
var id = '#'+this._id;
$(id).fadeIn();
}
});
}
I recently started learning polymer and am trying to use iron-ajax iron-list and templates together. For some reason the values are showing blank on screen, but cards are getting created. Taking example from this question, I created two polymer-elements search-list and search card. Search card for showing data and search list for fetching data and populating a list with card. Search list is following:
<link rel="import" href="../search-card/search-card.html">
<dom-module id="search-list">
<template>
<div>
<iron-ajax id="ajax" auto url="/data.json" handle-as="json" last-response="{{data}}"></iron-ajax>
<iron-list items="[[data]]" as="item">
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</iron-list>
</div>
</template>
<script>
(function () {
Polymer({
is: 'search-list',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.items = [];
}
});
})();
</script>
</dom-module>
Search-card is the follwing:
<dom-module id="search-card">
<style>
</style>
<template>
<paper-material style="margin:15px;">
<a href="[[item.profile]]">
<img width="100" height="100" src="[[item.pic]]">
</a>
<div class="">
<div>Name: <span>[[item.name]]</span></div>
<div>Location: <span>[[item.location]]</span></div>
<div>Email: <span>[[item.email]]</span></div>
</div>
</paper-material>
</template>
<script>
(function () {
Polymer({
is: 'search-card',
properties: {
item: {
type: Object,
notify: true,
}
},
ready: function() {
this.item = {}
}
});
})();
</script>
</dom-module>
All the span fields consisting of item data are showing blank. What am I doing wrong ? How to fix it ?
For a start, you have to put the contents of the iron-list element within a template.
<iron-list items="[[data]]" as="item">
<template>
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</template>
</iron-list>
I'm trying to do a list of product items and make them so when you click the image or title it will show a single page/template with the more info, etc.
But, when ever I use {{#each product in model}} the link-to just returns an undefined.
Heres what I have
App.Router.map(function(){
this.route('about', { path: '/aboutus' } );
this.resource('products');
this.resource('product', { path: '/products/:title' } );
this.resource('contacts');
});
App.ProductsRoute = Ember.Route.extend ({
model: function(){
return App.PRODUCTS;
}
});
// Logging out Params from the Route
App.ProductRoute = Ember.Route.extend ({
model: function(params){
return App.PRODUCTS.findBy('title', params.title);
}
});
App.PRODUCTS = [
{
title: 'Flint',
price: 99,
description: 'Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.',
isOnSale: true,
image: 'images/flint.png'
},
{
title: 'Kindling',
price: 249,
description: 'Easily combustible small sticks or twigs used for starting a fire.',
isOnSale: false,
image: 'images/kindling.png'
}
];
when I use this method {{#each product in model}} i get undefined
<script type='text/x-handlebars' data-template-name='products'>
<h1>Products</h1>
<ul class="list-unstyled col-md-8">
{{#each product in model}}
<li class='row m-b'>
{{#link-to 'product' this }}<img {{bind-attr src='product.image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
<div class="col-md-7">
<h2>{{product.title}}</h2>
<p class="product-description">{{product.description}}</p>
<p><button class="btn btn-success">Buy for ${{product.price}}</button></p>
</div>
</li>
{{/each}}
</ul>
</script>
<script type='text/x-handlebars' data-template-name='product'>
<div class="row">
<div class="col-md-7">
<h2>{{title}}</h2>
<p>{{description}}</p>
<p>Buy for ${{price}}</p>
</div>
<div class="col-md-5">
<img {{bind-attr src='image'}} class='img-thumbnail img-rounded' />
</div>
</div>
</script>
but when I use just {{#each}} it returns normally BUT it warns me this: DEPRECATION: Using the context switching form of {{each}} is deprecated. Please use the keyword form ({{#each foo in bar}}) instead.
<script type='text/x-handlebars' data-template-name='products'>
<h1>Products</h1>
<ul class="list-unstyled col-md-8">
{{#each}}
<li class='row m-b'>
{{#link-to 'product' this }}<img {{bind-attr src='image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
<div class="col-md-7">
<h2>{{title}}</h2>
<p class="product-description">{{description}}</p>
<p><button class="btn btn-success">Buy for ${{price}}</button></p>
</div>
</li>
{{/each}}
</ul>
</script>
which one should I use and how do I fix the undefined error? I'm guessing it has to do with the App.ProductRoute but can't figure it out, still new to ember :l
You should use
{{#each product in model}}
and to fix your undefined use the following:
{{#link-to 'product' product }} ...title... {{/link-to}}
When you use {{#each}} the context of this gets switched to each item in the loop, which is sometimes confusing and is being deprecated. When you use the {{#each product in model}} version, the context of each item through the loop is product and this remains whatever it was you entered each
Hi i try to make an simple ember app that's get info form a json file. App is located here:http://www.autoroben.nl/m/. Problem is i need the ember view return back an id (from the li element) which i need for handlebars. so i can pop up car info with the same jsonfile as the car list.
// MODAL
App.OpenModal = Ember.View.extend({
click: function(evt) {
var id = $(".lijst li").attr('id');
alert(id)
$('#modal').addClass('active');
}
});
the template
<script type="text/x-handlebars" id="index">
<header class="bar bar-nav">
<h1 class="title">AUTOROBEN</h1>
</header>
<div class="content">
<ul class="table-view lijst">
{{#each}}
<li class="table-view-cell media" id="{{unbound ID}}">
{{#view App.OpenModal}}
<img src="/wp-content/uploads/{{unbound featured_image.attachment_meta.file}}" class="media-object pull-left" width="80">
{{title}}
<p>{{autoinfo.details.bouwjaar}} | {{autoinfo.details.kmstand}}</p>
{{/view}}
</li>
{{/each}}
</ul>
</div>
<div id="modal" class="modal">
<header class="bar bar-nav">
{{#view App.CloseModal}}
<a class="icon icon-close pull-right nostyle" href="#"></a>
{{/view}}
<h1 class="title">{{title}}</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-divider">DETAILS</li>
<li class="table-view-cell">bouwjaar: {{autoinfo.details.bouwjaar}}</li>
<li class="table-view-cell">kmstand: {{autoinfo.details.kmstand}}</li>
</ul>
</div>
</div>
</script>
json file:
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('http://www.autoroben.nl/wp-json/posts/?type=autos');
}
});
Views in ember js by default get the parent context as its own context. In your case its the context of an single item in the each helper. You can access the ID from the view using the following code.
App.OpenModal = Ember.View.extend({
tagName: 'li',
classNames: ['table-view-cell', 'media'],
click: function(evt) {
alert(this.get('context.ID'));
$('#modal').addClass('active');
}
});
Here is a working bin.
I want button to call removeAlbum function in controller. But it does nothing. When i click the button nothing happens and there are no errors... What should i do to fix that?!
This is my template:
<script type="text/x-handlebars" data-template-name="albums">
{{#if App.albumsController.total}}
<div><h1>Количество альбомов: {{App.albumsController.total}}</h1></div>
{{#each content in App.albumsController}}
<div class='album'>
<div class='image'>
<a {{action showAlbum content href=true}}>
<img {{bindAttr src="content.avatarUrl"}}>
</a>
</div>
<div class='info'>
<h2>
<a {{action showAlbum content href=true}}>
{{content.title}}
</a>
</h2>
<div>{{content.description}}</div>
</div>
<div class='actions'>
<div>
<button {{action removeAlbum content target="App.albumsController"}}>Delete</button>
</div>
</div>
<div class='clear'></div>
</div>
{{/each}}
{{else}}
<div><h1>Loading</h1></div>
{{/if}}
</script>
This is my controller:
App.albumsController = Em.ArrayController.create({
content: [],
total: null,
loadAlbums: function(){
this.set('content', []);
this.set('total', null);
var self = this;
$.post(App.connection.url, {method: 'albums.getAll', params: {user_id: App.connection.userId}}, function(response){
self.set('total', response.albums.total);
response.albums.album.forEach(function(item){
var buf = App.AlbumInList.create({
id: item.id,
title: item.title,
description: item.description,
avatarUrl: item.thumbnail_video.thumbnails.thumbnail[1]._content
});
self.pushObject(buf);
});
});
},
removeAlbum: function(x){
console.log('remove it');
}
});
Try to set your target to controller instead of App.albumsController. Should solve the problem.
<button {{action removeAlbum content target="controller"}}>Delete</button>