I have 3 models currency, income and income_operations. I wanna to render them on some route. What is the right way to do it? How can i render three models on one page?
UPD: This models don't have any associations between them.
route.js.coffee
#route 'addincome', { path: 'operations/addincome' }
EmberMoney.AddincomeRoute = Ember.Route.extend
model: ->
EmberMoney.IncomeOperation.find()
templates/addincome.handlebars
<div class="row container-bg"><br>
<div class="span6">
<ul>
{{#each operation in controller}}
<li>{{operation.sum}}</li>
{{/each}}
</ul>
</div>
<div class="span6">
{{outlet}}
</div>
</div>
// I want to render here more models! For example:
<ul>
{{#each income in incomes}}
<li>{{income.name}}</li>
{{/each}}
</ul>
Not tested, but in the route's setupController you could:
# excuse the coffeescript...
setupController: (controller) ->
controller.set('incomes', App.Income.find());
then in your template:
<ul>
{{#each income in controller.incomes}}
<li>{{income.name}}</li>
{{/each}}
Related
I have my index page where i show a list of invoices where the user can click to create and edit them, i am using DS.FixtureAdapter in my adapter
The problem is that i get this error
Error while processing route: index Assertion Failed: Unable to find fixtures for model
If in my model i reopen the class like this, everything works fine
Invoice.reopenClass({
FIXTURES: [
{
id : '1',
name : 'Invoice num 1',
transactions: [1]
}
]
});
So i assume that i am doing something wrong in my template where i am saying if there are not invoices show me "no invoices..."
<div class="row">
<div class="large-6 columns">
<h3>View Invoices</h3>
<ul class="invoices-listing">
{{#each invoice in model}}
<li>
{{#link-to "invoices.show" invoice}}
{{invoice.name}}
{{/link-to}}
</li>
{{else}}
<li>no invoices… :(</li>
{{/each}}
</ul>
</div>
<div class="large-6 columns">
<h3>Edit Invoices</h3>
<ul class="invoices-listing">
{{#each invoice in model}}
<li>
{{#link-to "invoices.edit" invoice}}
{{invoice.name}}
{{/link-to}}
</li>
{{else}}
<li>no invoices… :(</li>
{{/each}}
</ul>
</div>
<div class="large-12 columns">
Invoices: {{InvoicesCount}}
</div>
<div class="large-12 columns">
{{#link-to "Invoices.create" class="create-btn"}} Add Invoice {{/link-to}}
</div>
</div>
Routes Index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.find('fattura');
}
});
This looks like a problem only when i start the ember server because for instance if i start creating and deleting invoices and i want to delete all of them the index page shows correctly "no invoices..."
You'll always need to set up fixtures even if you want to start with no records. Ember still needs somewhere to go look for them and will error if you don't at least have a fixture with an empty array.
So you can just start your project with this in your model:
Invoice.reopenClass({
FIXTURES: []
});
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
Here is the app i am learning to build.
categories has many products.
Accordion of category - heading and products as body is in categories template
router.js
MyApp.Router.map(function () {
this.resource('categories', {path: '/'}, function () {
this.resource('category', { path: '/:category_id'}, function () {
this.resource('product', {
path: '/:product_id'
});
});
});
});
My categories handlebar
<div class="panel-group" id="accordion1">
{{#each category in model}}
{{view MyApp.AccordionView context=category}}
{{/each}}
</div>
and my accordion view
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
{{#view MyApp.AccordionTitleView }}{{name}} {{/view}}
</h4>
</div>
<div {{bind-attr id=id}}class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tbody>
{{#each products itemController="product"}}
<tr><td>{{#link-to 'category.product' category content }}{{content.name}}{{/link-to}}</td></tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
U P D A T E S
my issue got resolved by changing
{{#link-to 'category.product' category content }} in my accordion view to
{{#link-to product' category content }}
but as per ember guides
Ember guides
I can pass two model like this sample code
<p>
{{#link-to 'photo.comment' 5 primaryComment}}
Main Comment for the Next Photo
{{/link-to}}
</p>
i dont understand if its because my router hierarchy. but in any case i think it should give some nice error. I an a noob wonder what experts think on this
You have to use 'product' in your link-to instead of 'category.product'.
This is because in MyApp.Router.map() you made product a resource, not a route.
Resources' route names are unprefixed, whereas routes' route names are prefixed with their parent resource.
See http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources
I've got an ember app where my routing looks like this:
App.Router.map(function() {
this.resource('works', {path: '/works'}, function(){
this.route('work', {path:':work_id'})
});
});
I want to be able to link each of my work in my index template, for my naviguation. I tried this but it didn't work:
<script type="text/x-handlebars" data-template-name='application'>
<header id="header">
<nav id="main-nav" role="navigation">
<div class="item-container">
{{#link-to 'works' tagName='div' classNames="navItem work" }}
<p>Works</p>
{{/link-to}}
<ul>
{{#link-to 'work' works work}}{{work.title}}{{/link-to}}
</ul>
</div>
</nav>
</header>
<main id="main">
{{outlet}}
</main>
</script>
If you need more info just let me know.
Your index route definitions should look like this (assuming you are using Ember Data):
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('work');
}
});
Then in your index template go through {{each}} of the App.Work records and link to the works.work route:
<ul>
{{#each}}
<li>{{#link-to 'works.work' this}}{{title}}{{/link-to}}</li>
{{/each}}
</ul>
When linking to a route, you do resource.route
{{#link-to 'works.work' work}}{{work.title}}{{/link-to}}
In this case I'm assuming work is a property that is a model, if not, you'll need to show your router.
first,i can watch the data in blogs template.
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</script>
then , build a new template "blogs/index" , to render into the blogs, but now, there nothing on my page.
<script type="text/x-handlebars" id="blogs/index">
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
{{ outlet }}
</div>
</script>
i don't know where take mistake and how to do
Route:
App.Router.map(function(){
this.resource('blogs', { path: '/'});
});
App.BlogsIndexRoute=Em.Route.extend({
model: function(){
return App.Blog.find();
}
});
enter link description here
<----------------------------------------------------------------------------------------->
i want build a blog pag, the left is blogscategory, right is blog list, when i first into page, use 'blogs/index' to Initialization 'blogs', when click the blogscategory the blogs content will change by the category.
Have a look here at your working jsbin.
Basically I've changed BlogsIndexRoute to BlogsRoute and renamed the blogs template to application. Now it correctly renders the blogs/index template into the application template. I hope this is what you where trying to achieve.
Hope it helps.