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.
Related
I'm having a hard time making my router understand that we are on a certain page and it should be displayed in the navigation as active. The situation is as follows:
this.route('mainRoute', function() {
this.route('list');
});
The path we are interested in is /mainRoute. Unfortunately, there are a lot of legacy links that point to /mainRoute/list. The workaround for this was to redirect from the /mainRoute/list component back to the /mainRoute component.
beforeModel() {
this.replaceWith('/mainRoute');
}
Now, my issue is that the /mainRoute navigation link will never be seen as active. I've tried adding a path for the /mainRoute ('/', '/mainRoute', 'mainRoute'), I've tried transforming it to a resource and a bunch of other things that passed my mind. But it either won't work, or will go in an infinite redirecting loop.
Any thoughts on it? Thanks so much, I really need a solution for this!
If the navigation links are {{link-to}} components. There is a current-when property you could use here. It accepts either a boolean or a string. The string is a space separated values with the route names you want this link to be active when.
From the docs
If you need a link to be 'active' even when it doesn't match the current route, you can use the
current-when argument.
<LinkTo #route='photoGallery' #current-when='photos'>
Photo Gallery
</LinkTo>
{{#link-to 'photoGallery' current-when='photos'}}
Photo Gallery
{{/link-to}}
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.
Quick note:
I don't believe this is a duplicate of Ember.js: Prevent destroying of views. Other related questions that I've found are out-of-date.
In case this becomes out-of-date later, I am using Ember 1.7.0 with Handlebars 1.3.0.
Context for the question:
As the title states, I am wondering how to transition between views without destroying them. Using queryParams does not solve my issue.
I am creating a calculator with the following nested views:
>>Calculator View
>>Report View (hasMany relationship to Calculator)
--School Partial (I am using queryParams here)
I am able to navigate between the Report views just fine without destroying my School partial, since I am using queryParams and using a displaySchoolPartial boolean to show/hide the partial. Example below:
Report template (stripped to only show the essential part):
<script type="text/x-handlebars" data-template-name="calculator/report">
...
{{#link-to "calculator.report" (query-parameters displaySchoolPartial="true")}}
{{render "_school"}}
</script>
School template (also stripped down):
<script type="text/x-handlebars" data-template-name="_school">
{{#with controllers.calculatorReport}}
<div {{bind-attr class=":schoolPartialWrapper displaySchoolPartial::hide-element"}}>
...
</div>
{{/with}}
</script>
This works as expected. Navigating between different Report views and School partials, as stated before, does not destroy the view.
The problem:
My problem comes when navigating to the Calculator view, the Report view is destroyed, which then destroys my School view. I do not want to also use queryParams to replace my Report views.
The reason I need to make sure the views aren't destroyed is because I have a select box with 3,000 schools in my School partial. It takes too long to re-render this. It would be a much better UX to simply show/hide the Report views.
Don't fight with Ember. You will lose.
Views are instantiated and rendered when needed and torn down when done.
Why do you have a 3000-element dropdown, anyway?
If you really, really want to do this, what I would suggest is putting a {{render}} on your application page, and hide it. The view will be created and rendered when the app comes up and persist as long as the app is alive. Then, in the didInsertElement of your view, do a cloneNode of that hidden element and insert it into the view's DOM somewhere. You may have to muck around getting event handlers wired up correctly.
My suggestion is not using "render" but using "partial", so you only need to drop in the template that you want. Have a control variable that set show/hide via css class. And control that variable using you controllers.
Using "partial" will allow you to have school template independent from report, thereby removing report will not affect school.
Just make sure you define the outlet and partial correctly.
Hope it helps!
First my apologies: Im very new to ember.js and struggling so far.
I have a pretty basic app written and I've been using this as my main guide: http://trek.github.com/
My biggest issue right now is figuring out how to deal with Views, specifically the rendered HTML and where it appears in the DOM. It appears, at least with my app currently, the DOM elements are created and inserted into the page but right before /body. So everything just loads below the footer of my main site design.
Doesnt seem to matter where placement of the script templates are in relation to the page, or anything like that??
Is there a way to render views to an existing container div or something? Am I thinking about this wrong? Im used to working with jsRender where I have templates setup, but they typically rendered to an in-memory string that I then needed to insert into an existing container like $('#containerDiv').html(myRenderedHtmlFromATemplate);
Thanks for any help or guidance with this!
Ember will want its views to be hierarchical in the DOM so it can rely on event propagation. You probably noticed a <div class="ember-application"> that gets injected, and then all of your views are rendered inside of that.
You can specify the rootElement when you create your Application. The application will be created inside that element and leave the rest of the DOM untouched. If you don't specify that rootElement, then Ember will insert itself right before </body> as you observed.
Example:
window.MyApp = Ember.Application.create({
rootElement: "#containerDiv"
});
Without seeing code it isn't completely clear what exactly is going on, but, I do not see you mention anything about outlets so I assume that might be your problem.
Check out this url on outlets: http://emberjs.com/guides/outlets/
tuxedo25 has the best solution. If you are using StateManager you can also use the following:
App.StateManager = Ember.StateManager.create({
rootElement: '.content',
initialState: 'initial',
initial: Ember.ViewState.create({
route: 'initial',
view: Ember.View.create({ templateName: 'initial' })
})
});
is there possibly any reason why Ember.Select would bind in firefox/chrome/IE9 but it won't work in IE8?
i'm not able to reproduce this in a jsfiddle. but in my app, this is happening. i have a few nested views and the drop down is in the inner most layer. i verified that the data is there. the markup for the tags just won't render.
it works when i moved the dropdown up one level to the parent view.
i have another view that render a list of radio options and it's like that as well.
{{#each content}}<input type="radio">{{text}}</input>{{/each}}
(doesn't work in inner most view but works one level up in parent)
i really can't think of anything that would cause it.
any help would be appreciated. thanks!
i couldn't figure out why this is happening. my solution was to insert the options manually on didInsertElement.