Today , I just start learning ember.js. I tried one sample application.
Search the result and it will show the list. Click on the link and it will show the result at right sidebar. It's working fine.
However, I want to show home template at first.
When I tried with {{outlet name}} , it can show the home template however it is not working when I click on link. So, is there any way to show default outlet ?
I found about default outlet at here . However, it need to remove my data-templte-name to show default outlet. I don't want to remove the data-template-name.
Current template is like following.
<script type="text/x-handlebars" data-template-name="dictionary">
<div id="left">
<header>
<div id="topheader">
<img src="images/logo.jpg" class="logo">
<i id="search-icon"> </i>
{{input type="text" id="query" placeholder="Search" value=query
action="query"}}
</div>
</header>
<div id="results">
{{#each results}}
{{#link-to "detail" this}}
<section>
<div class='detail'>
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
</section>
{{/link-to}}
{{/each}}
</div>
<footer>
<div id="bottom">
<a href="#" class='btn'>Login</a>
<a href="#" class='btn add'>Add</a>
</div>
</footer>
</div>
<div id="right">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="detail">
<div id="details">
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
<div id="discuss">
</div>
</script>
<script type="text/x-handlebars" id="home">
<div id="homeScreen">
Sample home screen
</div>
</script>
The root template to be rendered is the application template (associated with the root/application level). An empty id/data-template-name is assumed to be the application template. If you want to use a different template for the application root you can create the application view and specify the templateName.
App.ApplicationView = Ember.View.extend({
templateName: 'foo'
});
http://emberjs.jsbin.com/EZocURAR/1/edit
Related
I'm trying to access data two times in my template, once on a list view, and once in a modal view. Upon clicking on the image, the modal will display a lot of the same data, just blown up. I'm having issues. The modal seems to be taking the last set of data, even though it's nested in the each statement. Any ideas? Here's my code...
<div class="row">
{{#each model.products as |product|}}
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="shopify-grid-wrapper">
<div id="#image-wrapper" class="image-wrapper" {{action 'openModal'}}>
<div class="img-overlay">
<p>
Click for More Details
</p>
</div>
{{#each product.images as |image|}}
<img src= {{image.src}} />
{{/each}}
</div>
<div class="description-wrapper">
<span><p>{{product.title}}</p></span>
<p>
{{product.productType}}
</p>
<p>
{{product.tags}}
</p>
</div>
</div>
</div>
{{#if shopifyModal}}
{{#liquid-wormhole class="fullscreen-modal" }}
<div class="left-side">
{{selectedProduct.title}}
</div>
<div class="right-side">
{{buy-button product=product.attrs open="openCart"}}
<div class="Cart {{if model.isCartOpen "Cart--open"}}">
{{shopify-cart close="closeCart"}}
</div>
<p {{action 'closeModal'}}>
Close
</p>
</div>
{{/liquid-wormhole}}
{{/if}}
{{/each}}
</div>
The problem was answered in the comments, but I'm adding this here in case someone finds it.
When looping over a collection in a template, if you have an action inside that loop, you must pass some information to the action handler if you expect the "current" item to be processed by the action handler, like this:
{{action 'openModal' product}}
routes.js
Router.route('/', function () {
this.render('Home');
});
Router.route('wall', function () {
this.render('Wall');
});
landing.html
<template name="home">
...
</template>
drawingApp.html
<body>
{{> wall}}
</body>
<template name="wall">
...
{{> canvas}}
...
</template>
<template name="canvas">
...
</template>
drawingApp.js
...
Template.wall.events({
...
If I include <body> {{> wall}} </body>, the landing page renders below the app. If I delete <body> {{> wall}} </body>, landing page renders properly, but when button is clicked to enter, it opens a non-functioning app. (Edited since first posted trying many things, but core issue remains the same). Any ideas? Thank you.
You need to remove calling wall template from body tags.
So your wall.html will be:
<head>
<title>LKG Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
</body>
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
How about this approach:
router.js
Router.route ( '/', {
name:'home',
layoutTemplate:'index',
});
Router.route('/wall', {
name:'wall',
layoutTemplate:'index',
});
home.html is as is, no changes:
<template name="home">
<div class="container">
<div class="jumbotron">
<h1>Heading</h1>
<p>Some text here.</p>
</div>
<div>
<div class="centerize">
<a class="btn btn-primary btn-lg" href="wall" role="button">Draw</a></div>
</div>
</div>
</template>
wall.html, removed the <body> stuff
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
index.html
<template name="index">
{{> yield}}
</template>
Index.html basically encompasses the other routes that will render in the yield region.
I have normal, basic ember-cli project.
This is my application.hbs:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{render 'sidebar'}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
This is my post.hbs:
{{#each model as |post|}}
{{post.text}}
{{/each}}
This is my sidebar.hbs:
<ul class="nav nav-sidebar">
{{#each model.posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
and everything else is standard.
How to make work {{render 'sidebar'}} with just the title of my categories?
Now it shows nothing.
Updated the answer above me.
// application.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{side-bar}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
// templates/components/side-bar.hbs
<ul class="nav nav-sidebar">
{{#each posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
// components/side-bar.js
// This triggers once the component is called out {{side-bar}}.
init: function() {
// You're extending ember component class here
// This class has its own init function if u dont call
// _super() it means that the component has not yet been
// Initialised and component's not working.
this._super();
// Use your queries or what ever u need here
// e.g query('posts', { user: 1 })
this.set('posts', this.get('store').find(x));
}
I'm not sure why the render helper was not deprecated in Ember 1.13 and removed in 2.0, but you really shouldn't use it any more. The render helper uses a view and a controller that is not at the top level. Views have been removed in 2.0, and controllers not at the top level are deprecated.
Make your sidebar a component.
// application.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{side-bar model=model}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
// templates/components/side-bar.hbs
<ul class="nav nav-sidebar">
{{#each model.posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
In my application.hbs file I have an application wide nav bar.
<div class="row nav">
<div class="large-12 colummns">
<ul class="inline-list top-nav">
<li><h6>{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}</h6></li>
<li><h6>//</h6></li>
<li><h6>CONDITIONS</h6></li>
<li><h6>//</h6></li>
<li><h6>PROGRAMS</h6><li>
<li><h6>//</h6></li>
<li><h6>TESTIMONIALS</h6></li>
</ul>
</div>
</div>
<div class="row subnav">
<div class="large-12 colummns">
{{#if renderAboutSubNav}}
{{render 'about/subnav'}}
{{/if}}
</div>
</div>
{{outlet}}
subnav.hbs:
<ul class="inline-list subnav-list">
<li class="subnav-item">{{#linkTo "about.philosophy"}}philosophy{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">{{#linkTo "about.leadership"}}leadership{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">staff</li>
</ul>
The ABOUT link, when clicked, displays a subnav -- displayed whenever the url contains 'about'. In that subnav are about subpages -- philosophy, leadership, staff. Philosophy is actually the index page of the about section, which is why I am linking ABOUT to about.philosophy:
{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}
When I click ABOUT, the ember app renders /about/philosophy as it is supposed to, and the ABOUT link and philosophy link in the subnav are set to active.
However, when I click 'Leadership' the leadership link on the subnav is active but not the ABOUT link in the main nav, even though the url reads /about/leadership.
I don't understand why it is doing this.
My router looks like this:
Ew.Router.reopen(location: 'history')
Ew.Router.map ->
#.resource "about", ->
#.route "philosophy"
#.route "leadership"
#.resource "staff"
#.route "conditions"
#.route "programs"
#.route "testimonials"
about.hbs:
<div class="row about-bg">
<div class="large-12 columns">
<div class="row">
<h1 class="about-phil">Eskridge & White</h1>
</div>
</div>
</div>
<div class="row philosophy-content">
<div class="large-9 columns about-us">
{{outlet}}
</div>
</div>
<div class="large-3 columns sidebar">
{{partial 'sidebar'}}
</div>
</div>
The problem here is you are linking to about.philosophy, so when you navigate to about.leadership active class won't be applied.
So make your link-to to point about route,
{{#link-to "about"}}ABOUT{{/link-to}}
And from your about.index route, redirect to about.philosophy route,
so that active class will be always applied to about's link-to whenever you are in the child of about route.
A bin for your case.
I am learning ember.js through the official documentation and am having the following html page that contains mustache template:
<section id="main">
<ul id="todo-list">
{{#each controller}}
<li {{bindAttr class="isCompleted:completed"}}>
<input type="checkbox" class="toggle">
<label>{{title}}</label><button class="destroy"></button>
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
However, the problem is that the browser displays the data as:
{{#each controller}}
{{title}}
{{/each}}
without rendering the seed data supplied into the template.
I am having the following javascript declarations just before the end of body tag:
<script src="js/libs/jquery.js"></script>
<script src="js/libs/handlebars.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/application.js"></script>
<script src="js/libs/router.js"></script>
<script src="js/models/store.js"></script>
<script src="js/models/todo.js"></script>
The page loads without any error reported by firebug. Please let me know what I am missing.
I guess you are missing something fundamental - the handlebars script tag around your 'template', the data-template-name should be named depending on the route your are in, I've used here application only for the sake of the example. On the official guides you mentioned if you enable the html panel in embedded jsbin you will see what I mean, right under the body tag is the wrapping script tag named todos.
<script type="text/x-handlebars" data-template-name="application">
<section id="main">
<ul id="todo-list">
{{#each controller}}
<li {{bindAttr class="isCompleted:completed"}}>
<input type="checkbox" class="toggle">
<label>{{title}}</label><button class="destroy"></button>
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
</script>
Hope it helps.