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>
Aucun commentaire:
Enregistrer un commentaire