Maybe I just don't know the correct terminology or something but I can't figure out how to do this. Ember is pretty new to me, and it's pretty lacking in documentation it seems.
I am using the ember background video plugin. I've got that working perfectly.
{{#background-video
muted
mp4="../assets/video-bg.mp4"
poster="../assets/Main-bg.jpg"
}}
{{/background-video}}
I've setup a model to iterate through background videos loaded through the CMS (Drupal 8). I've also got this working exactly like I want. It displays the URL to the video:
{{video-bg video=model.video_bg}}
How do you get the model to display inside the addon script?
Like this:
{{#background-video
muted
mp4="{{video-bg video=model.video_bg}}"
poster="../assets/Main-bg.jpg"
}}
If video-bg is a helper you can use it as subexpression:
{{#background-video
muted
mp4=(video-bg video=model.video_bg)
poster="../assets/Main-bg.jpg"
}}
However this will not work if video-bg is a component. Then there is no way to do this in the template layer, and you need to refactor to either video-bg being a helper, or probably better, being a computed property.
Related
I want to know the low-level implementation of ember framework. When the handlebar templates defined inside script tag with type="text/x-handlebars-template" getting appended to the DOM? Also, how browser excludes that script?(i.e How actual flow of rendering a page is modified. I am new to ember and handlebars and just curious to know this.
I just run a couple of experiments with an older version of Ember for understanding more, what is really happening under the hood. (It is totally relevant to the latest Ember versions also.) You can read my findings in the Readme here: https://github.com/zoltan-nz/ember-resolver-experiment
Answering for your question, Ember will run the following function during the initialization process: https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/system/bootstrap.js#L40
As you see, there is a bootstrap function, which uses jQuery to find those special templates scripts in your DOM. It will compile with the ember-template-compiler and it will be added to the Ember.TEMPLATES object. (You can check in your console if you type Ember.TEMPLATES.)
As you see in this bootstrap function, these template script tags will be removed (line 72) from the DOM after compilation.
Each version of Ember package comes with different ember.js files (for production, and for debugging) and you can find there ember-template-compiler.js, which is basically the handlebar compiler. You don't need handlebar.js at all in ember project, because this ember-template-compiler.js is your handlebar.js.
If you would like to learn more about Ember.js, I wrote a free tutorial which start from the very basics: Ember.js tutorial
For the last question first :
A script is never seen in a browser so there is no need to exclude it from beeing rendered. WebComponent templates are now a replacement for such script template but if you are using some older template they will still be displayed so a script tag is a better solution for now if you want a template to be compatible with all browsers. So the rendering of the page is not affected. At the end of the page load you'll run your handlebar script that will calculate the template rendering and once it's done will insert it in the dom (typically replace a placeholder).
For your first question :
The question is unclear do you want to know how the template is appended to the dom or when it is appended or how it is rendered ? The best way to know that is to look at the source of handlebars.js. I don't know for ember.js but if you're just using handlebar you'll have to add the result of your processing manually in the dom (by using jquery for instance).
I am trying to allow my user to create a group and invite his friends.
I have already tried several ways, but its not really working out. My current approach looks something like this in the main template:
{{#each session.user.friends}}
<li>{{view App.FriendSelectCheckbox userBinding='this' groupBinding='controller.content'}} {{nickName}}</li>
{{/each}}
And the custom view is defined like this:
(the whole thing is basically from this JS-Fiddle: http://jsfiddle.net/durinthomas/cB3De/)
App.FriendSelectCheckbox = Ember.Checkbox.extend({
checkedObserver: function(){
if(this.get('checked'))
this.get('group.users').addObject(this.get('user'));
else
this.get('group.users').removeObject(this.get('user'));
}.observes('checked')
});
The problem is that the checkbox is not rendered. I know that there is usually a handlebars helper to render checkboxes or other built in views. But I thought this would be the approach to render just a view. And just for playing around I also tried to do
{{view Ember.Checkbox}} which is not rendering a checkbox either.
The checkbox is successfully rendering for me: http://emberjs.jsbin.com/qazuj/1/edit?html,js,output
The JSFiddle you linked uses an pre 1.0 version of Ember. Are you using latest?
The issue was in my css, (I am still searching where it is coming from, but the reason why my checkboxes (doesn't matter which kind) are not rendered:
#media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/marc\/Sites\/ember\/app\/styles\/style\.scss}line{font-family:\00003607}}
input[type="checkbox"] {
display: none;
}
I know it hints where it is coming from, but its hidden in scss imports, It might be foundation or font-awesome or somethign like that.
I am trying to have nested plugins in Django-CMS, i.e. a plugin template which itself
contains placeholder tags which can be filled with content.
I tried the straightforward way of just putting the tags there and I can add content
via frontend editing, but when I save it, it never shows up.
Am I doing something wrong or is it just not supported?
I am using Django-CMS 2.4.3
Thanks in advance!
You actually have to 'render' the child plugins in the plugin template.
I am not sure if {% render_plugin %} is already inplemented in 2.4.... For best experience with nested plugins be sure to upgrade to 3.0
Why is the Ember Snippet i have linked not working? I am setting up a simple ArrayController and fill it with contents upon initialization. Then i want to display the contents of this controller with the help of {{#each}}, but this is not working.
In tutorials i have read through, the following structure is always used:
{{#each AppNamespace.myModelController}}
...
{{each}}
But to make my example work i had to use:
{{#each AppNamespace.myModelController.content}}
...
{{/each}}
Could you have a look at the provided fiddle and tell me what is wrong with it? I assume that i must have done something wrong since i have seen this pattern so often in tutorials.
Note: I am a Javascript beginner coming from Java Server Development. So it maybe easy JS basics that i am struggling with.
I would have posted the complete code here, but the formatting was not working properly.
Link to my JS Fiddle showing my problem
Add a call to this._super() inside your init method.
https://github.com/emberjs/ember.js/pull/1251
Also, not directly related to your question, but it looks like you would benefit from reading #6 here: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/
Tried your fiddle with http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js instead of 1.0 pre it is working fine in both the cases.
I'm starting to look at Ember myself and I'm concerned about the process you're using.
As far as I'm aware you shouldn't really be retrieving data directly from the controller like that. The pattern you use should be based upon models, controllers, views and the router.
http://trek.github.com/ is a resource which I have found useful while learning about Ember.
Based upon that example, this would be my take on a small ember test application:
http://jsfiddle.net/zDfBv/
Hopefully that will be of some use to you as a starting point.
If you pass 1 argument to the #each helper it needs to be a Ember.Array compatible object-- in your first example you pass the controller when your data is in the content property.. your second example works because you pass the content property.. and there is nothing wrong with doing it that way if you feel like it.
There is however an alternate syntax for the #each helper which you may see more often, it uses element naming {{#each model in myModelController}} ... {{/each}}. When you do it this way Ember takes care of looking for the content property for you because it's the default rendering context for the view.
Assuming you're using the latest version from Github you'll find it takes care of looking for content in both cases so the point becomes moot once that is released as stable.
Quick question.
I found handling site navigation (not the routing aprt, just a simple nav bar) with ember.js a little complex.
So I thought I will just code this aprt with jQuery, push history into location url and hope that Ember.js will detect this change and the router take action.
Scenario :
1) ember.js will use a DIV for rootElement and the navbar is declared in the body.
<body>
<div id="nav">
<ul><li><a>Item1</a></li></ul>
</div>
<div id="rootEmberApp"></div>
</body>
2) then a jQuery script will be bound to the links (item1) of the nav div and push changes to the URL but preventing default action without stopping the propgation (I didn't want to reload all the scripts). Something like :
$(document).ready(function(){
$("#navigation a").click(function(event){
App.router.location.setURL('/ember/listItems');
event.preventDefault();
});
3) I was hoping that Ember.js will fire at this time and take action.
I didn't succeed.
Is it silly ? Any idea how to do that ?
Thanks a lot.
Update 1 : thanks for the answer. Yes you're right. I was just not fully pleased with the solutions I tried or found about a nav bar. I will look again the todoMVC example and its use of the CollectionView. From a beginner point of view, the CollectionView seems a good way to describe (declare) the View and at the same times it's not easy to read (it's easier when the view is written with pure html and the js is bound to it ala jQuery).
Thanks again
This will probably not be a satisfactory answer, but... this is not the Ember Way. A core concept of Ember routing is that once the app loads, the source of truth is in Javascript. As you move through an Ember app, the router transitions from state to state and the URL is updated as a side effect. You're trying to turn that on it's head. It's not impossible -- you can definitely get what you're trying to do to work. However, I wanted you to know that it goes against the intention the designers had in mind.