I've been banging my head against this for over a day and no amount of experimenting, Google'ing, or Stack Overflow searching has helped.
I'm developing an Ember/Vert.x app that has one Ember Route that accepts "real-time" push-data via SocksJS. This is working beautifully, including the successful implementation of dynamic (Ember) templates.
What I need now is the ability to set styles on the rootElement (rootElement is body). I've tried umpteen different approaches, including resorting to jQuery calls. Nothing will place a style on the body tag. I CAN get the style attribute set on the 1st div inside the body tag by doing:
App.ApplicationView = Ember.View.extend({
attributeBindings: ['style'],
style: "background-color: blue; background-image: url('" + App.currentProgram.backgroundImage + "')"
});
This renders:
<div id="ember325" class="ember-view" style="background-image: url('img/bg/1.png')">...</div>
However, I really want to style the body tag dynamically.
Any help would be GREATLY appreciated as this is a blocking item for my prototype client demo next week.
You can use the didInsertElement method, to know when the dom is inserted, and update the body element using this.$().parent().
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
this._super();
this.$().parent().css({
"background-color": "blue",
"background-image": "url('" + App.currentProgram.backgroundImage + "')"
});
}
})
Live sample http://jsfiddle.net/X5TmH/
Related
I'm using bootstrap popover in my app and I need to render an outlet inside it.
I have this nested route :
this.resource('pages', function(){
this.resource('page', { path: ':id' }, function(){
this.resource('edit', function(){
this.resource('images', function(){
this.resource('image', { path: ':image_id'}, function(){
this.route('edit');
})
});
});
});
});
When the user is here => /pages/1/edit/ when he click on an image it route to /images but render the {{outlet}} inside the popover like this :
<div class="popover-content hide">
{{outlet}}
</div>
This is my popover initialisation :
$img.popover({
html: true,
content: function() {
return $('.popover-content').html(); //need to have the outlet here
}
});
So far, it render correctly my outlet, but inside the images template, I have some button that modify the DOM and it doesn't update the html. Unless if I close and open the popover again I can see the modification.
Is it possible to render the outlet directly inside the code ? or is it possible to have my popover being updated ?
Thanks for the help.
See these links for an alternative approach to putting Ember stuff in Bootstrap popovers:
Bootstrap Popovers with ember.js template
https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html
Ember and Handlebars don't like this because it's basically copying the html content of a div and plopping it into another. But that html alone isn't everything that's needed. Ember is magic and there's lots of stuff happening in the background.
Your hidden div is real ember stuff, so let's try not to mess with it by calling .html() on it. My idea is to literally move the DOM itself instead.
first, modify your popover function call to always create this placeholder div:
content: '<div id="placeholder"></div>',
next, detach the content div from the dom in the didInsertElement of the view:
// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();
// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);
// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved. we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
content.appendTo("#placeholder");
});
since the content div is immediately detached when didInsertElement is called, you can remove the "hide" css class from the content div.
edit: i tried this on my own project and it broke two-way binding. the controller updated my handlebars elements, but any two-way bound {{input}} helpers did not update the controller/model. i ended up using a single-item dropdown menu, and used this to prevent the menu from closing too quickly:
Twitter Bootstrap - Avoid dropdown menu close on click inside
Something I've been experimenting around with Ember for a couple of hours and can't work out. Hopefully it's just a terminology issue that I'm getting stumped on as I read through the Ember docs.
I have an application, that, for the most part, consists of a sidebar/top bar (called wrapper), and a footer.
My basic application.hbs looks like this (I'm using Ember App Kit to provide structure):
{{partial "wrapper"}}
{{outlet}}
{{partial "footer"}}
If this was the state of my application, it would work pretty well. Page content loads in the {{outlet}} fine.
My main issue is how to break out of this template structure in an "Ember" way (and preferably without going all jQuery and removing DOM elements willy-nilly).
I have a few routes that I don't want the wrapper and the footer to show on (they're full page login/forgot password routes, and a couple of minimal interface/no distractions modes).
I experimented with trying to remove the sidebar and footer by making the default template (application.hbs):
{{#if showWrappers}}
{{partial "wrapper"}}
{{/if}}
{{outlet}}
{{#if showWrappers}}
{{partial "footer"}}
{{/if}}
Where showWrappers is in the ApplicationController:
export default Ember.Controller.extend({
showWrappers: function() {
var routes = ['login'],
currentPath = this.get('currentPath'),
show = true;
routes.forEach(function(item) {
var path = new RegExp('^' + item + '*');
if (!Ember.isEmpty(currentPath.match(path))) {
show = false;
}
});
return show;
}.property('currentPath'),
});
Attemping to transition to /login from / using {{link-to}} returns in an error: Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM presumably because I'm removing things Ember wanted to keep (I am using {{link-to}} and {{bind-attr}} in the sidebar, so there are bindings there).
Aware that I could use actions and jQuery to hide elements of the page and bring them back for the "distraction free" mode, but I'd prefer to learn how to structure templates and use Routes with the renderTemplate hook potentially using this.render (?) to blow away the current DOM and rebuild from a different base (rather than application.hbs).
Thoughts? More than happy to clarify.
I have discovered disconnectOutlet, and have converted my partials into outlets:
{{outlet wrapper}}
{{outlet}}
{{outlet footer}}
Made my ApplicationRoute render to them by default:
export default Ember.Route.extend({
renderTemplate: function() {
this.render();
this.render('wrapper', {
outlet: 'wrapper',
into: 'application'
});
this.render('footer', {
outlet: 'footer',
into: 'application'
});
}
});
and then on the LoginRoute, I just run this.disconnectOutlet for both wrapper and footer, and seems to work pretty well.
I'm using Twitter Bootstrap for navigation in my Ember.js app. Bootstrap uses an active class on the li tag that wraps navigation links, rather than setting the active class on the link itself.
Ember.js's new linkTo helper will set an active class on the link but (as far as I can see) doesn't offer any to hook on to that property.
Right now, I'm using this ugly approach:
{{#linkTo "inbox" tagName="li"}}
<a {{bindAttr href="view.href"}}>Inbox</a>
{{/linkTo}}
This will output:
<li class="active" href="/inbox">Inbox</li>
Which is what I want, but is not valid HTML.
I also tried binding to the generated LinkView's active property from the parent view, but if you do that, the parent view will be rendered twice before it is inserted which triggers an error.
Apart from manually recreating the logic used internally by the linkTo helper to assign the active class to the link, is there a better way to achieve this effect?
We definitely need a more public, permanent solution, but something like this should work for now.
The template:
<ul>
{{#view App.NavView}}
{{#linkTo "about"}}About{{/linkTo}}
{{/view}}
{{#view App.NavView}}
{{#linkTo "contacts"}}Contacts{{/linkTo}}
{{/view}}
</ul>
The view definition:
App.NavView = Ember.View.extend({
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews.firstObject.active');
}.property()
});
This relies on a couple of constraints:
The nav view contains a single, static child view
You are able to use a view for your <li>s. There's a lot of detail in the docs about how to customize a view's element from its JavaScript definition or from Handlebars.
I have supplied a live JSBin of this working.
Well I took what #alexspeller great idea and converted it to ember-cli:
app/components/link-li.js
export default Em.Component.extend({
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews').anyBy('active');
}.property('childViews.#each.active')
});
In my navbar I have:
{{#link-li}}
{{#link-to "squares.index"}}Squares{{/link-to}}
{{/link-li}}
{{#link-li}}
{{#link-to "games.index"}}Games{{/link-to}}
{{/link-li}}
{{#link-li}}
{{#link-to "about"}}About{{/link-to}}
{{/link-li}}
You can also use nested link-to's:
{{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content tagName='li' href=false eventName='dummy'}}
{{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content}}Info{{/link-to}}
{{/link-to}}
Building on katz' answer, you can have the active property be recomputed when the nav element's parentView is clicked.
App.NavView = Em.View.extend({
tagName: 'li',
classNameBindings: 'active'.w(),
didInsertElement: function () {
this._super();
var _this = this;
this.get('parentView').on('click', function () {
_this.notifyPropertyChange('active');
});
},
active: function () {
return this.get('childViews.firstObject.active');
}.property()
});
I have just written a component to make this a bit nicer:
App.LinkLiComponent = Em.Component.extend({
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews').anyBy('active');
}.property('childViews.#each.active')
});
Em.Handlebars.helper('link-li', App.LinkLiComponent);
Usage:
{{#link-li}}
{{#link-to "someRoute"}}Click Me{{/link-to}}
{{/link-li}}
I recreated the logic used internally. The other methods seemed more hackish. This will also make it easier to reuse the logic elsewhere I might not need routing.
Used like this.
{{#view App.LinkView route="app.route" content="item"}}{{item.name}}{{/view}}
App.LinkView = Ember.View.extend({
tagName: 'li',
classNameBindings: ['active'],
active: Ember.computed(function() {
var router = this.get('router'),
route = this.get('route'),
model = this.get('content');
params = [route];
if(model){
params.push(model);
}
return router.isActive.apply(router, params);
}).property('router.url'),
router: Ember.computed(function() {
return this.get('controller').container.lookup('router:main');
}),
click: function(){
var router = this.get('router'),
route = this.get('route'),
model = this.get('content');
params = [route];
if(model){
params.push(model);
}
router.transitionTo.apply(router,params);
}
});
You can skip extending a view and use the following.
{{#linkTo "index" tagName="li"}}<a>Homes</a>{{/linkTo}}
Even without a href Ember.JS will still know how to hook on to the LI elements.
For the same problem here I came with jQuery based solution not sure about performance penalties but it is working out of the box. I reopen Ember.LinkView and extended it.
Ember.LinkView.reopen({
didInsertElement: function(){
var el = this.$();
if(el.hasClass('active')){
el.parent().addClass('active');
}
el.click(function(e){
el.parent().addClass('active').siblings().removeClass('active');
});
}
});
Current answers at time of writing are dated. In later versions of Ember if you are using {{link-to}} it automatically sets 'active' class on the <a> element when the current route matches the target link.
So just write your css with the expectation that the <a> will have active and it should do this out of the box.
Lucky that feature is added. All of the stuff here which was required to solve this "problem" prior is pretty ridiculous.
I try to integrate the Minicolor JQuery component in Ember.js application.
Integration should be easy but it does not work for me... (input is displayed but without JQuery component)...
Minicolor integration guide:
https://github.com/claviska/jquery-miniColors
From doc: simply insert the js file and add the following input:
My js file:
App.ColorPicker = Em.TextField.extend({
type: 'minicolors',
attributeBindings: ['name'],
willInsertElement: function() {
;
}
});
The html file
{{view App.ColorPicker placeholder="Background color" name="color" valueBinding="App.MyController.backgroundColor"}}
I believe your issue is that ember is dynamically adding the <input type='minicolors' ... /> element after the initialization code for minicolors has already executed, causing your new minicolors input to not be initialized.
I got your example working by using the didInsertElement event instead of willInsertElement event to force minicolors to create the dynamically added App.ColorPicker element. The willInsertElement fires when the element is going to be inserted, but hasn't yet, and the didInsertElement will fire after the element has been inserted. I used the latest files from the minicolors github repository.
App.ColorPicker = Em.TextField.extend({
type: 'minicolors',
attributeBindings: ['name'],
didInsertElement: function() {
$.minicolors.init();
}
});
The only other issue I had was needing to make sure the css file and the png with the color picker graphical elements could be loaded. Apparently if the css and png files are not loadable the js portion doesn't work.
Is there a way to set css properties by using emberjs properties' auto binding ?
Something like:
<div {{bindAttr style="background-color: divColor;"}}>
...
</div>
Please note that as of ember 1.13. binding attributes (bind-attr) is deprecated. You would need to use code similar to this to bind to the class:
<div class={{myClass}}></div>
Furthermore, style binding in this fashion is not recommended because it can introduce XSS vulnerabilities. The HTML templating automatically escapes HTML to prevent XSS when using {{...}}, but style attributes have additional vulnerabilities outside of the scope of the built-in escaping.
The recommended approach is to escape the CSS yourself (i.e. creating the escapeCSS function that would escape the specific CSS appropriately to prevent XSS - this is not a built-in function. You could start with Ember.Handlebars.Utils.escapeExpression and add any additional checking from that base.) More information can be found here:
https://guides.emberjs.com/v2.2.0/templates/writing-helpers/#toc_escaping-html-content
Then you tell Ember that the string is "safe" by using Ember.String.htmlSafe, and Ember will not try to escape that content.
controller:
myStyle: Ember.computed('color', function() {
var color = escapeCSS(this.get('color'));
return new Ember.String.htmlSafe("color: " + color);
})
template:
<div style={{myStyle}}></div>
Reference: http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes
Another simple way to do this is to add a computed property to your model.
Model ----
App.Photo = Em.Object.extend(
objectId: null
url: ""
style: (->
"background-image:url('" + #get("url") + "')"
).property("url")
)
Template -----
{{#each item in App.photoController}}
<div {{bindAttr style="item.style"}}></div>
{{/each}}
I got this working, and seems to be the simplest way to go about it.
Not exactly like that but close. You'll have to build the style string yourself. Look at this jsFiddle.
App = Ember.Application.create();
/**************************
* Models
**************************/
/**************************
* Views
**************************/
App.View = Ember.View.extend({
style: function() {
return "background-color:" + this.get('color');
}.property('color').cacheable()
});
/**************************
* Controllers
**************************/
App.set('controller', Ember.Object.create({
color: "transparent",
red: function() {
this.set('color', 'red');
},
blue: function() {
this.set('color', 'blue');
},
style: function() {
return "background-color:" + this.get('color');
}.property('color').cacheable()
}));
/**************************
* App Logic
**************************/
$(function() {
template:
{{#view Ember.Button target="App.controller" action="blue"}}BLUE{{/view}}
{{#view Ember.Button target="App.controller" action="red"}}RED{{/view}}
{{#view App.View colorBinding="App.controller.color" attributeBindings="style"}}
Color is {{App.controller.color}}
{{/view}}
<hr>
<div {{bindAttr style="App.controller.style"}}>And another way...</div>
Recent Ember version (2.3.0 as of this writing) allows straight-forward embedding of computed style.
// bar-graph.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['bar-graph'],
inlineStyle: Ember.computed('attrs.min', 'attrs.max', 'attrs.value', function() {
let min = this.get('attrs.min');
let max = this.get('attrs.max');
let value = this.get('attrs.value')
let percentage = Math.round(value / (max - min) * 100);
return new Ember.Handlebars.SafeString(`width: ${percentage}%`);
})
});
<!-- bar-graph.hbs -->
<div class="bar" style={{inlineStyle}}>{{value}}</div>
Live example
I have tried using answer provided by #WallMobile, but it has some syntax issues. So this is the correct syntax to be used.
App.Photo = Em.Object.extend({
objectId: null,
url: "",
style: function() {
return "background-image:url('" + this.get("url") + "')"
}.property("url")
})
HTMLBars now lets you do this - upgrade to the latest ember/ember-cli to take advantage of the new stuff.
There's a new addon which allows you to declare styles as JS objects and bind them to your component's style attribute. Check out ember-computed-style
import computedStyle from 'ember-computed-style';
export default Ember.Component.extend({
style: computedStyle('backgroundStyle'),
attributeBindings: ['style'],
backgroundStyle: function(){
return {
backgroundColor: this.get('divColor')
};
}.property('divColor'),
divColor: 'red'
});
This will produce:
<div style="background-color:red;"></div>
Another approach you could use is CSS custom properties.
ember-cli-custom-properties is an Ember add-on that binds component properties to CSS custom properties (variables). Its fairly simple to use. Once you install the add-on, the add-on makes the customProperties and customPropertyBindings property available on the #ember/component class.
For example, you could turn the raw HTML above into a Ember component, and give it a class name.
import Component from '#ember/component';
export default Component.extend ({
classNames: ['my-component'],
// Map the backgroundColor attribute to a CSS custom property
customProperties: ['backgroundColor']
});
You can then reference this class name in the styles in for your application.
.my-component {
background-color: var(--background-color);
}
Lastly, just set the backgroundColor attribute on the component to your desired color.
{{my-component backgroundColor="red"}}