I am using Ember and my view is getting rendered at the very bottom of my HTML DOM, instead of inside my div element.
Here is my source code :
index.html :
<body>
<div id="test">
<script type="text/x-handlebars">
{{view Skills.RecommendedSkillsListView}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="recommended_skills_list">
<a href="#" {{action "b"}}>DO A NEW THING</a>
</script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
</body>
app.js :
Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
templateName: 'recommended_skills_list',
b: function(v) {
alert('new hello');
}
});
Skills.initialize();
The rendered document :
<body class="ember-application">
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Note: when using the same code with a previous version of ember (0.9.5) it works as expected
Ah, it looks like it is 'appending your view' to the body which you have given the 'application' template name which Ember will look for. Why not try putting a div inside the body and then referencing this in the Ember.Application.create();?
Ember.Router
Skills = Ember.Application.create({
rootElement: '#test'
});
View
<body>
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Let me know if I've missed the point ;)
You need to specify the element to render your application to using the rootElement (docs here, related question: Emberjs rootElement) property of your application:
Skills = Ember.Application.create({
rootElement: "#test"
});
Here is a working example: jsfiddle example
Rendered output from example:
<body>
<div id="test" class="ember-application">
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</div>
</body>
Related
I'm trying to change the height of a panel in an ember .hbs file from it's controller. I've seen lots of examples, but I can't seem to get things right. Here's a jsbin I put together for it, and following that is my code. Any help will be much appreciated.
Thanks!
version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: win32 x64
http://jsbin.com/kopajitili/3/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<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://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<div class="panel panel-primary" id="linkPanel" style="width:205px;">
<div class="panel-heading">
<h3 class="panel-title">Stuff</h3>
</div>
<div class="panel-body">
Blah blah blah...
</div>
<div>
<button style="margin: 10px;" {{action "addHeight"}}>Add Stuff</button>
</div>
</div>
</script>
</body>
</html>
Controller (JS)
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
// My goal here is to be able to increase the height
// of the panel "#linkPanel" from an action.
// In this version, I'm just trying to see
// if I can reference the panel (I can't.)
// In the commented out lines, I was trying
// to actually change it.
// Any help and/or advice will be much appreciated.
alert(document.getElementById('#linkPanel'));
//this.set('this.document.getElementById('#linkPanel').height',"500px");
//this.set('this.document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.width',"500px")
//this.set('document.getElementById('#linkPanel').style',"Height=500px")
}
}
});
When you call getElementById you should not prepend the # -- that is jQuery syntax. Revise it to document.getElementById('linkPanel');
Revised your JSBin:
http://jsbin.com/liwovawexu/edit?js,output
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
document.getElementById('linkPanel').style.height = "500px";
}
}
});
I'm trying to create a simple TODO app based on the one in the Getting Started Ember.js tutorials, but with persistence to a backend.
I've had everything working until I wanted to look at wrapping my markup for rendering a todo in a view (called 'todo-element'), to enable drag & drop sorting.
Then, my view refused to render. I've simplified the markup for the view just to render the text 'Hello', to try to debug things. The instance of the view sets the tagName to 'li'. So I should be getting a list of lis with the text 'Hello' in them. However, all I get is a list of empty lis.
This is the markup:
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todos">
<header>
<h1>The TODOs</h1>
{{input type="text" placeholder="Enter new TODO description here ..."
value=newDescription action="createTodo"}}
<button {{action "createTodo"}} id="add-todo">Add</button>
</header>
<ul id="todos">
{{#each itemController="todo"}}
{{todo-element}}
{{/each}}
</ul>
</section>
</script>
<script type="text/x-handlebars" data-template-name="todo-element">
<span>Hello</span>
</script>
<script type="text/javascript" src="javascripts/jquery"></script>
<script type="text/javascript" src="javascripts/handlebars-1.0.0.js"></script>
<script type="text/javascript" src="javascripts/ember.js"></script>
<script type="text/javascript" src="javascripts/ember-data.js"></script>
<script type="text/javascript" src="javascripts/todos/app.js"></script>
<script type="text/javascript" src="javascripts/todos/todo.js"></script>
<script type="text/javascript" src="javascripts/todos/router.js"></script>
<script type="text/javascript" src="javascripts/todos/todos_controller.js"></script>
<script type="text/javascript" src="javascripts/todos/todo_controller.js"></script>
<script type="text/javascript" src="javascripts/todos/todo_element_view.js"></script>
<script type="text/javascript" src="javascripts/todos/edit_todo_view.js"></script>
</body>
</html>
And this is the code for the view:
Todos.TodoElementView = Ember.View.extend( {
templateView : 'todo-element',
tagName : 'li'
} );
Ember.Handlebars.helper( 'todo-element', Todos.TodoElementView );
My best guess is that the 'todo-element' markup is not getting associated with the TodoElementView, as I get exactly the same empty list of lis if I change the 'todo-element' markup's data-template-name to something random.
If anybody could help me with where I'm going wrong here, I'd be very grateful.
Cheers,
Doug.
think you are little confused between ember components and ember views
1. A view is called with view helper {{view App.ViewName}}. Your code {{todo-element}} looks more like a component.
In your component you have a static tag span hello so I guess it's showing only hello. Put dynamic data in it using {{}}
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
I have a sub menu that appears only when a menu item in the main menu is selected. What I want to do is save the state of the sub menu so that, when a user selects something in the sub menu, then navigates away in the main menu, that sub menu item should still be selected when they return to the sub menu. But, I'm not sure how to go about it. Any ideas?
http://jsfiddle.net/martinp999/Ce5j8/2/
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Main Menu</a>
<ul class="nav">
<li>{{#link-to 'a'}}A{{/link-to}}</li>
<li>{{#link-to 'b'}}B{{/link-to}}</li>
<li>{{#link-to 'c'}}C{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="a">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Sub Menu A</a>
<ul class="nav">
<li>{{#link-to 'f'}}F{{/link-to}}</li>
<li>{{#link-to 'g'}}G{{/link-to}}</li>
<li>{{#link-to 'h'}}H{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="b">
B
</script>
<script type="text/x-handlebars" id="c">
C
</script>
<script type="text/x-handlebars" id="f">
F
</script>
<script type="text/x-handlebars" id="g">
G
</script>
<script type="text/x-handlebars" id="h">
H
</script>
App.Router.map(function () {
this.resource('a', function() {
this.resource('f');
this.resource('g');
this.resource('h');
});
this.resource('b');
this.resource('c');});
When transitioning from the A route, you can inspect the transition object and see where you're going. It is possible to stash the location where you're going (if it is a sub-route of A) and then utilize it again in the redirect hook of the AIndexRoute.
Check out this updated fiddle: http://jsfiddle.net/ahaurw01/Ce5j8/3/
Figured it out. I thought that ember-latest.js pointed at latest production release, it actually points at the beta of beta - canary. The transition object does not contain a handlerInfos object in prod or in beta, only in canary.
I'm new to Ember.js.
I want to focus on TextField(in sample, id="text") after initialization,
but in ready function, doesn't work focus method...
<body>
<!-- library load -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script>
<script type="text/x-handlebars">
{{view Em.TextField id="text"}} // want to focus it.
</script>
<script type="text/javascript">
var App = Em.Application.create();
App.ready = function() {
$('#text').focus(); // does'nt work.
}
</script>
</body>
The following code does work:
<script type="text/x-handlebars">
{{view App.TextField id="text"}} // want to focus it.
</script>
<script type="text/javascript">
var App = Em.Application.create();
App.TextField = Em.TextField.extend({
didInsertElement: function() {
this.$().focus();
}
});
</script>
Subclassing TextField and then spreading a custom View around your templates seemed a bit messy to me, so I wrote this little 1kb package that lets you do this more elegantly, directly in the template, without any further coding:
<body>
<!-- all the libraries -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script>
<!-- your template -->
<script type="text/x-handlebars">
Hello, world! {{ input }}
:
: more elements here
:
{{ autofocus }} {# <<<<-- Magic happens here #}
</script>
<!-- your app -->
<script>
Ember.Application.create();
</script>
</body>
You can get it from https://github.com/AndreasPizsa/ember-autofocus
or with bower install ember-autofocus. I appreciate feedback!