Is there no way to have an inline script within a Handlebars template?
<script type="text/x-handlebars">
I'm a row of type "foo"
<script type="text/javascript">alert('hi');</script>
</script>
When the above template renders, the inline script is removed.
What I am trying to do is include the disqus widget on a page. The widget is basically some markup + disqus script.
The widget is to be included within a sub-view of my app. The subview is not visible by default but is displayed as per some logic in my Ember app code.
You'll have to wrap that widget in a custom Ember.View to handle instantiating it and adding it to the DOM, in the wrapper view's didInsertElement. Ember expects, especially inside handlebars templates, to have full control over DOM manipulation, and it does that with a combination of handlebars magic, and Ember.View creation. Once you've defined your customview:
MyApp.DisqusView = Em.View.extend({
didInsertElement: function() {
// create widget and append it to this.$()
}
});
You can use it in your handlebars template:
{{view MyApp.DisqusView}}
Your view should not add Script tags, for safety reasons, but should rather execute any JS directly to insert the widget.
Related
With Views deprecated, I'm having trouble discerning where to run jQuery after a Template has rendered.
I have a simple index Template for a foods resource (templates/foods/index.hbs), and wish to run the following jQuery after index.hbs renders:
this.$('[data-toggle="tooltip"]').tooltip();
I know one can create a Component that then has a didInsertElement hook, but I'm not clear on how I'd route to the Component if I did this. Would I then "double dip" by having my apps/templates/foods/index.hbs Template simply call the new Component, which would have its own template that would be the original index.hbs Template?
I'm sure I'm missing something simple here. Anyone care to point me in the right direction?
You can call jQuery in route:
export default Ember.Route.extend({
actions: {
didTransition() {
Ember.run.next(this, 'initTooltip');
}
},
initTooltip() {
Ember.$('[data-toggle="tooltip"]').tooltip();
}
});
You can also create component and use it inside your template like this:
{{tooltip-wrapper}}
<!-- HTML here -->
{{/tooltip-wrapper}}
And call jQuery code in didInsertElement of tooltip-wrapper component.
I am getting some data from server and in my controller I am trying to display that in list format. What I want to do is to allow the user to click on any item of that list and call an action behind it. Here is my js code.
for(var index in posts) {
if (posts.hasOwnProperty(index)) {
console.log(1);
var attr = posts[index];
//console.log(attr);
/*$("ul#previous_recipients").append('<li class="list-group-item"><label>'+attr.name+'' +
'</label><a href="javascript:void(0)" class="close g-green" {{action "aa"}}>Add</a></li>');*/
$("ul#previous_recipients").append(Ember.Handlebars.compile('<li class="list-group-item"><label>{{attr.name}} </label>Add</li>'));
}
}
How to call action on it? {{action "test"}} is not being called.
You have to compile the handlebars template and define the test action inside actions hash in the same controller.
$("ul#previous_recipients").append(Ember.Handlebars.compile('
<li class="list-group-item"><label>{{attr.name}} </label>
Add</li>
'));
You have to move this html code from controller to a handlebars file,that will be good.
What you need to do is create an ember view and give it a
templateName
property which will contain your html and handlebars expression. Alternately, you could, inside the view say
defaultTemplate: Em.Handlebars.compile(/*your handlebars and html markup here*/)
using Jquery to do things like this is not the ember way of doing things.
I would like to add a carousel, preferably caroufredsel http://caroufredsel.dev7studios.com/, to a few templates/routes on an ember site. I was wondering what the best way to do that would be?
All that is needed to fire the items that you want to slide is the following jQuery function:
$(document).ready(function() {
$("#foo1").carouFredSel();
});
Where do you think the best place in the app to put this is?
The best place it to create a custom View for the template that will have the carousel. Then use the didInsertElement hook to initialize the widget once the markup for the carousel once it is in the document. You can also use the willDestroyElement hook to tear down the carousel before the markup is removed from the document.
So, say that you have a /carousel route, and then you have this as your 'carousel' template.
<div id="foo1">
<!-- Other carousel markup goes here-->
</div>
Then you'd create a View like this.
App.CarouselView = Ember.View.extend({
didInsertElement : function(){
$("#foo1").carousel();
},
willDestroyElement : function(){
$("#foo1").trigger("destroy");
}
});
Hello Ember jedi masters,
I'm learning Ember's framework and get some confuses while using it with handlebars helpers.
Firstly I created some view templates in my js and html and used a containerView to group those templates.
But I'm having a trouble that I can't display the value I described in my controllers of those template views.
My HTML part is like this:
<script type="text/x-handlebars" data-template-name="main">
<p>this is main template</p>
{{outlet nav}}
</script>
<script type="text/x-handlebars" data-template-name="nav">
</script>
<script type="text/x-handlebars" data-template-name="child">
<p>this is the child in nav, value is {{value}}</p>
</script>
Here's my sample code on jsfiddle (including the JS part):
http://jsfiddle.net/9K7D4/
my question is:
while the child view is rendered from container view, I couldn't get the value which is defined in my child view's controller. I must missed something in the document.. just couldn't figure it out..
Thanks for helping me!
In your example, though the child controller instantiated during application initialization, it is not connected as the controller of the child view (I think there something missing in the framework).
Anyway, if you want to refer it in the child view, you have to lookup through the router with valueBinding: 'App.router.cController.content.value'. Note I'm using lowercase, as conventionnally, ember will create an instance of XxxController as xxxController.
Then in the template, as you want to use a property from the view itself, you must use the view keyword in order to do it.
see http://jsfiddle.net/9K7D4/14/
I have implemented a view with multiple {{view Ember.TextField ...}}
The template is displayed BUT all the html elements are displayed inline...
I would like to have all input elements rendered as block.
How to fix that ? (I would like to avoid adding after each view in the template.
You can use the classNames binding inherited from Ember.View to set a css class on the element and define your css styles on it (i.e. display: block;), such as:
{{view Ember.TextField classNames="some-class" ...}}
Alternatively, you can create a subclass of Ember.TextField:
App.MyTextField = Em.TextField.extend({
classNames: ['some-class']
});
And then call this instead in the Handlebars UI:
{{view App.MyTextField ...}}