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.
Related
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
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.
Say I had a template that was like:
<script type="text/x-handlebars" id="something">
<div class="thisIsJustAnExample">Something I wanted in the template</div>
{{outlet}}
<div class="thisIsJustAnotherExample">Something else I wanted in the template</div>
</script>
And do the following in another template:
<script type="text/x-handlebars" id="thisThingPutsSomethingInSomething">
<span>
{{#partial "something"}}
<div>Some stuff I want to go into the outlet...</div>
{{/partial}}
</span>
</script>
So the result is:
<div class="thisIsJustAnExample">Something I wanted in the template</div>
<div>Some stuff I want to go into the outlet...</div>
<div class="thisIsJustAnotherExample">Something else I wanted in the template</div>
Is this possible?
Using a view this can be easily accomplished:
Parent Template and View
<script type="text/x-handlebars" data-template-name="foo">
hello {{yield}} world
</script>
App.FooView = Em.View.extend({
layoutName:'foo'
});
Usage
{{#view App.FooView}}
{{item}}
{{/view}}
Example
http://emberjs.jsbin.com/deluxaha/1/edit
Just load the {{partial}} at the place of your {{outlet}}. You can achieve the final output.
Jsbin - Link
Note: Your partial template-name should begin with a "_" refer the link - Partial_naming_convention
What is the cleanest way to get <li class="active"> for the active page in the following Ember app?
index.html
<script type="text/x-handlebars">
<ul class="nav">
<li>{{#linkTo 'ping'}}Ping{{/linkTo}}</li>
<li>{{#linkTo 'pong'}}Pong{{/linkTo}}</li>
</ul>
</script>
app.js
App = Ember.Application.create()
App.Router.map(function() {
this.route("ping", { path: "/ping" });
this.route("pong", { path: "/pong" });
});
This workaround did it for me:
{{#linkTo 'menus.search' tagName='li' href=false}}
{{#linkTo 'menus.search'}}
<i class="icon-search"></i>
{{/linkTo}}
{{/linkTo}}
It creates an li element containing an anchor element. And both will be updated with the "active" class when the route is active.
replace in your template the li tags like so:
index.html
<script type="text/x-handlebars">
<ul class="nav">
{{#linkTo 'ping' tagName="li"}}Ping{{/linkTo}}
{{#linkTo 'pong' tagName="li"}}Pong{{/linkTo}}
</ul>
</script>
the {{linkTo}} with the tagName specified will apply a css class name of 'active' automatically when the application's current route matches the supplied route name.
example, when your app url is at /#/ping the resulting markup would be something like:
...
<li class="active">Ping</li>
...
Or you create a custom view
App.ItemView = Ember.View.extend({
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews.firstObject.active');
}.property()
});
and then use it like so
<script type="text/x-handlebars">
<ul class="nav">
{{#view App.ItemView}}
{{#linkTo 'ping'}}Ping{{/linkTo}}
{{/view}}
{{#view App.ItemView}}
{{#linkTo 'pong'}}Pong{{/linkTo}}
{{/view}}
</ul>
</script>
some css to see it actually working
li a {
color: #000;
}
li a.active {
color: #f00;
}
hope it helps
Just nest the {{link-to}} with a tagName on the outer one. This will set an active class on both the outer <li> and the inner <a> tag.
{{#link-to "ping" tagName="li"}}
{{#link-to "ping"}}ping{{/link-to}}
{{/link-to}}
{{#link-to "pong" tagName="li"}}
{{#link-to "pong"}}pong{{/link-to}}
{{/link-to}}
I'm trying to put together an application using Ember.js
Find the jsfiddle here: http://jsfiddle.net/wprk14/ARbMa/
I think I have the routing / pages / templates working but I can't get my navigation to show up. I think I need to add another outlet for navigation but the documentation isn't really helping me understand what I need to do.
Relevant HTML
<div id="wrapper">
<div id="main-content">
<script type="text/x-handlebars">
{{outlet}}
</script>
</div>
</div>
<footer>
{{outlet nav}}
</footer>
<script type="text/x-handlebars" data-template-name="nav">
<ul id="tab-bar">
<li>{{#linkTo "messages.inbound"}}Inbox{{/linkTo}}</li>
<li>{{#linkTo "messages.outbound"}}Sentbox{{/linkTo}}</li>
<li>{{#linkTo "parking"}}Parking{{/linkTo}}</li>
<li>{{#linkTo "fuel"}}Fuel Tracker{{/linkTo}}</li>
</ul>
</script>
Relevant JS
App.Router.map(function() {
this.route("login");
this.resource('messages', function() {
this.route('inbound');
this.route('outbound');
});
this.route("parking");
this.route("fuel", { path: '/fuel-tracker' });
});
You should add {{render nav}} instead of {{outlet nav}} to render the navigation bar on all the pages, regardless of what is inside the current outlet.