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";
}
}
});
Related
I have written a html with a div.
I have two hbs files. I rendered one as partial and other as normal. I am not able to invoke action on the templates. I am getting missing helper error.
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>
<div id="holder">
</div>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
var data={title: "My New Post", body: "This is my first post!"};
function getTemplate(templateName,hbsPath,type){
$.ajax({
url: hbsPath, //ex. js/templates/mytemplate.handlebars
cache: true
}).done(function (src) {
if (type === "partial") {
Handlebars.registerPartial(templateName, $(src).html());
} else {
template = Handlebars.compile($(src).html());
temp=template(data);
$("#holder").append(temp);
}
});
}
getTemplate("dummy","/Test/templates/dummy.hbs","partial");
getTemplate("dummy","/Test/templates/application.hbs");
App = Ember.Application.create({});
App.Router.map(function(){
this.resource('dummy');
});
App.ApplicationController=Ember.ObjectController.extend({
needs:['dummy'],
actions:{
refresh: function(){
alert("application template refresh");
}
}
});
App.DummyController=Ember.ObjectController.extend({
actions:{
refresh: function(){
alert("dummy template refresh");
}
}
});
HBS:
application.hbs:
<script id="application" type="text/x-handlebars-template">
{{> dummy}}
</script>
dummy.hbs:
<script type="text/x-handlebars" data-template-name='dummy'>
<div {{action 'refresh' target="controllers.dummy"}}>
Refresh
</div>
<div {{action 'refresh'}}>
Refresh
</div>
</script>
The code in ur demo and the code in question are different. Here is a fixed demo based on the code in ur question.
Fixing the demo u provide may need you to include the vanilla handlebars library as ember is now using HTMLBars which is built on top of handlebars but a bit different.
Em.Handlebars.compile is now actually using HTMLBars compile method. You can see here.
You may need to use something like https://github.com/rwjblue/broccoli-ember-inline-template-compiler
I am new in Ember and trying to create a simple application based on the tutorial provided by Ember website and videos.
In the sample below I would like to display two tabs Tab1 and Tab2; when switching to Tab1 it should have "Jan" and "Feb"; when switching to Tab2 it should have "Mar" and "Apr". I can switch between tabs but there is no content in any of them, there are no errors in the console.
Please help me understand why the tab content is empty.
Thanks!
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember test</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no- icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>{{#link-to 'tab1'}}Tab1{{/link-to}}</li>
<li>{{#link-to 'tab2'}}Tab2{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="tab1">
<p>{{field1}}</p>
<p>{{field2}}</p>
</script>
<script type="text/x-handlebars" id="tab2">
<p>{{field3}}</p>
<p>{{field4}}</p>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is app.js
App = Ember.Application.create();
var tab1 = {
field1: "Jan",
field2: "Feb"
};
var tab2 = {
field3: "Mar",
field4: "Apr"
};
App.Router.map(function() {
this.resource('tab1');
this.resource('tab2');
});
App.tab1Route = Ember.Route.extend({
model: function() {
return tab1;
}
});
App.tab2Route = Ember.Route.extend({
model: function() {
return tab2;
}
});
Ember conventions mandate the name of the classes for your routes. Your Route classes must be named App.Tab1Route and App.Tab2Route, not App.tab1Route and App.tab2Route. The case of the class names is important.
The rest of your code seems fine!
I am just starting with the bare-bones starter kit, trying to do something very basic.
In my end result app, there will be a list of categories and subcategories that serve as the nav for the app. My solution being an Ember novice, and just to get something working, was to start with the tutorial by Tom Dale and try moving from there. So, I set up a variable to hold some dummy models to use just to get something on the screen.
When I try to run the app, I get the error Uncaught TypeError: Cannot set property 'dataSourceBinding' of undefined
EDIT--
I have tried moving the declaration of the categories variable to the top of the app.js file, but still get the same error.
My question is really two questions:
What am I missing/doing incorrectly?
I realize that ultimately setting up the app with the categories as a model on the index action is probably not the best approach. This list needs to be dynamic as it will be configurable by users. Is there a better way to have this dynamic nav included in the main template?
app.js:
MSSWApp = Ember.Application.create();
MSSWApp.Router.map(function() {
this.resource('categories', function() {
this.resource('category', { path: ':category_id' });
});
});
MSSWApp.IndexRoute = Ember.Route.extend({
model: function() {
return categories;
}
});
var categories = [{
id: 1,
title: "Auto & Mechanical"
}, {
id: 2,
title: "Beauty & Fashion"
}, {
id: 3,
title: "Careers & Education"
}];
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0">
<title>Test Ember Model on Index</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<h1>Categories</h1>
<ul>
{{#each in model}}
<li>
<h2>
{{#link-to 'category' this}}
{{title}}
{{/link-to}}
</h2>
<ul>
<li>
Sub 1-1
</li>
<li>
Sub 1-2
</li>
<li>
Sub 1-3
</li>
</ul>
</li>
{{/each}}
</ul>
{{outlet}}
</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.5.1.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>
Turns out that the template needs a name, otherwise Ember assumes that's the application template.
setting up the script tag like this:
<script type="text/x-handlebars" data-template-name="index">
did the trick
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>
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!