In my code below I am trying to load the 'home' route template as my index route?
how do I do this? go to mysite.com then the home route template must load only?
I don't want to see the application template and use its {{outlet}}.
Thanks for your help
var App = Ember.Application.create();
App.Router.map(function(){
this.resource('home', {path: ''} );
//this.resource('home', {path: '/h'} );
this.resource('about', {path: '/a'} );
this.resource('contact', {path: '/c'} );
});
App.ApplicationRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('contact');
}
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('home');
}
});
App.HomeRoute = Ember.Route.extend({
});
App.AboutRoute = Ember.Route.extend({
});
App.ContactRoute = Ember.Route.extend({
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
</head>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/attempt1.js"></script>
<script type="text/x-handlebars">
<div>
page - Application
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="home">
<div>
page - Home
</div>
</script>
<script type="text/x-handlebars" id="about">
<div>
page - About
</div>
</script>
<script type="text/x-handlebars" id="contact">
<div>
page - Contact
</div>
</script>
</body>
</html>
change id for data-template-name :
<script type="text/x-handlebars" data-template-name="home">
<div>
page - Home
</div>
</script>
Related
I am trying to create a backbone application having login page and one dashboard page called home so for that I have created router having two routes.
After login, I am redirecting to the dashboard page
But I am not seeing anything at all when I run index file.
In the console also, no error is being shown.
var AppRoute = Backbone.Router.extend({
routes: {
"": "login", // #search/kiwis
"home": "home"
},
login: function(){
var loginTemplate = _.template($('#loginPage_template').html());
$('#htmlBodyContent').html(loginTemplate({}));
$('#somlogin').click(function(e) {
var loginData= {};
loginData.userName=document.getElementById('userName').value;
loginData.password=document.getElementById('password').value;
console.log(loginData);
if(loginData.userName==='admin' && loginData.password==='admin' ){
console.log("login successfull")
window.location.hash="#home";
}else{
console.log("do not match")
}
})
}
home: function() {
console.log("welcom to home")
}
});
var router = new Router();
Backbone.history.start();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="htmlBodyContent">
</div>
<script type="text/template" id="loginPage_template">
<div class="container">
<form class="login">
<h6>dawai<h6>
<input type="userName" class="form-control" id="userName" name="userName">
<input type="password" class="form-control" id="password" name="password">
<br>
<button type="button" class="btn-sm" id="loginBtn" >login</button>
</form>
</div>
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="scripts/main.js"</script>
</body>
</html>
I see you use window.location to navigate your application, that is the problem. You need to use Backbone router api to navigate:
login: function() {
//...
this.navigate('home', {trigger: true});
//...
}
I am writing first program in EmberJs as "Hello World" printing, but getting errors. Can someone help me out?
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' }, function() {});
this.resource('hi', { path: '/hi' }, function() {});
});
</script>
<script type="text/x-handlebars" data-template-name='index'>
<p>index!</p>
<p>{{#linkTo hi}}hi{{/linkTo}}</p>
</script>
<script type="text/x-handlebars" data-template-name='hi'>
hello world!
</script>
</head>
<body>
</body>
</html>
ERROR
You need to include ember-template-compiler instead of handlebars:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember-template-compiler.js"></script>
You also can't use linkTo helper because it's deprecated and that's why you get another error. Here's working fiddle.
I am trying to trigger an event from an Ember.js controller. I throws an error saying "ember.min.js:3 Uncaught Error: Nothing handled the action 'clicked'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.". Also I am not clear on how the event system works on itself for the targeted action. C an someone help me with this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="github-app">
</div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Hello from Ember!</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is a github explorer for all the users.</p>
<ul>{{#each dev in controller}}
<li>{{dev}}</li>
{{/each}}
</ul>
<p>
<button class="btn btn-success" {{action "clicked"}}>Click Me</button>
</p>
<p>{{renderedOn}}</p>
</script>
<script type="text/javascript">
App = Ember.Application.create({
rootElement:"#github-app"
});
App.IndexRoute=Ember.Route.extend({
model:function(){
return [
"Sam",
"Sandy",
"Samudh"
];
}
});
App.IndexController = Ember.ArrayController.extend({
renderedOn : function(){
return new Date();
}.property(),
actions : {
clickMe(){
alert("I been clicked");
}
}
});
</script>
</body>
</html>
Also available at http://jsbin.com/cuxajiyuqa/edit?html,output
You don't have an action with the name 'clicked', and you tell your code to look for an action 'clicked' on clicking the button. Change
{{action "clicked"}}
into
{{action "clickMe"}}
or change the
clickMe(){
action into
clicked(){
and everything should be fine.
Check https://guides.emberjs.com/v2.4.0/templates/actions/ for the documentation on actions
I got an error when I want try to add a component into a div DOM in another component.
Uncaught Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.
here is my JSBin
App = Ember.Application.create();
App.MyListComponent= Ember.Component.extend({
layoutName:'my-list',
actions:{
addItem:function(){
console.log("add item action");
App.MyListItemComponent.create().appendTo("#holder");
},
},
});
App.MyListItemComponent= Ember.Component.extend({
layoutName:'my-list-item',
});
html, body {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{my-list}}
</script>
<script type="text/x-handlebars" id="my-list">
<button {{action "addItem"}}>add item</button>
This is a holder:
<div id="holder">
i am inside holder
</div>
This is static item:
{{my-list-item}}
</script>
<script type="text/x-handlebars" id="my-list-item">
i am a list item
</script>
</body>
</html>
can you have a look and tell me how to do?
thank you very much
I dont think, your approach is right.
A component should be working independently from the context in which it is added. You can pass anything as argument to the component within the template. I would recommend displaying the components depending on some type of model that is added with each addItem click (in my example, a simple text).
Why don't you try it this way:
JS
App = Ember.Application.create();
App.MyListComponent= Ember.Component.extend({
components: Ember.A([]),
layoutName:'my-list',
actions:{
addItem:function(){
var components = this.get('components');
console.log(components);
components.pushObject ('test'); // or whatever you want: could also be components.pushObject(App.MyListItemComponent.create()); if you want to use it later somehow.
this.set('components', components);
console.log("add item action");
},
},
});
App.MyListItemComponent= Ember.Component.extend({
layoutName:'my-list-item',
});
html
<script type="text/x-handlebars" id="my-list">
<button {{action "addItem"}}>add item</button>
This is a holder:
<div id="holder">
i am inside holder {{components.length}}
{{#each components as |item|}}
{{my-list-item}}
{{/each}}
</div>
This is static item:
{{my-list-item}}
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<p>{{#link-to 'mytest'}}My Test{{/link-to}}</p>
<p>{{#link-to 'posts'}}POSTS{{/link-to}}</p>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
<p>...</p>
</script>
<script type="text/x-handlebars" id="posts">
<ul>
{{#each model}}
<li>{{id}} -- {{#link-to 'post' this}}{{title}}{{/link-to}}</li>
{{/each}}
</ul>
<p>
{{outlet}}
</p>
</script>
<script type="text/x-handlebars" id="post">
<h1>{{title}}</h1>
<p>{{excerpt}}</p>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.7.0.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
And here's my JS:
App = Ember.Application.create();
App.Router.map(function () {
this.resource('mytest');
this.resource('posts', function (){
this.resource('post', { path: ':post_id' });
});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.post_id);
}
});
var posts = [
{
'id': 1,
'title': 'first!',
'excerpt': 'firccccccccst!'
},
{
'id': 2,
'title': 'second!',
'excerpt': 'sssdsddsd!'
},
];
When I change this:
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.post_id);
}
});
to this:
App.PostRoute = Ember.Route.extend({
model: function(params) {
return {
'id': 1,
'title': 'first!',
'excerpt': 'firccccccccst!'
}
}
});
it works.
What's wrong?