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
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 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 trying to feed fixture data to both a handlebars template and a nested view. With my current setup, the data reaches my handlebars template just fine, but not the view. I suspect I am missing some basic piece of the ember.js puzzle. Would someone please advise me?
I've asked a question about a setup that is similar but uses ajax instead of fixture data, but have further simplified my setup in the hopes of getting some direction.
Thank you!
<!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/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{view App.MapView id="map" contentBinding="this"}}
<div id="blog">
<ul>
{{#each}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</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.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/leaflet-src.js"></script>
<script src="js/app.js"></script>
</body>
</html>
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return this.store.find('storyPrev');
}
});
App.StoryPrev = DS.Model.extend({
title: DS.attr('string')
});
App.StoryPrev.FIXTURES = [
{
id: 1,
title: 'You Better Believe This!',
coordinates: [-73.989321, 40.6778]
},
{
id: 2,
title: 'Holy Crap, Unreal!',
coordinates: [-73.989321, 40.6779]
},
{
id: 3,
title: 'Big Bucks Made E-Z!',
coordinates: [-73.989321, 40.6780]
}
];
App.MapView = Ember.View.extend({
didInsertElement: function () {
var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);
L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);
L.marker([40.685259, -73.977664]).addTo(map);
console.log(this.get('content'));
//THIS IS WHERE I GET STUCK
}
});
The view is backed by a controller, so you would do this.get('controller') to get the controller which is backed by your collection which if you wanted to get the collection (which isn't necessary since you can iterate the controller) you could do this.get('controller.model').
var controller = this.get('controller');
controller.forEach(function(item){
console.log(item.get('title'));
});
http://emberjs.jsbin.com/OxIDiVU/373/edit
my english isn't very good, apologise in advice
i'm working whit ember.js and i would like that the ac function run when the components/graph-pie render. i know that i need to put an observer and i read the documentation, but i don't understand where and how put the observer.
this is the code
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COMPONENT</title>
<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.2.0.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<div>prova<div>
<button> {{#link-to "graphs"}}graph{{/link-to}}</button>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="graphs">
{{graph-pie}}
</script>
<script type ="text/x-handlebars" id="graphs" data-template-name="components/graph-pie">
<div id="BC">
<div id="Gphic">
</div>
</div>
</script>
</body>
</html>
app.js
App = Ember.Application.create();
App.Router.map (function (){
this.route("graphs");
});
App.GraphsRoute = Ember.Route.extend ({
model: function() {
return data;
}
});
App.GraphPieComponent = Ember.Component.extend({
actions: {
ac: function () {
//do something
}
}
})
App.GraphsController = Ember.ArrayController.extend({
});
var data= ...
You can use the didInsertElement hook
http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement
Which ember fires after the component is inserted
You could the put your code inside the hook, or call your AC method from within.
You will want to use the didInsertElement event on the component, something like this.
App.GraphPieComponent = Ember.Component.extend({
didInsertElement: function() {
this._ac();
},
_ac: function() {
//do something
},
actions: {
ac: function () {
this._ac();
}
}
});
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!