We have a theoretical need to run an ember widget inside of another ember widget. Is this possible to do? Would scoping the nested ember widget to a different dom element than its parent work?
The idea is that we might need to embed our ember widgets on customer websites that also run ember.
Thanks!
I'm not sure to understand you correctly but If your need is to have separate components that you can distribute and reuse across application, you sure can have them. Although I'm not sure I got you right as you seem to speak of 2 different problems (nesting widgets and distributing ember widgets as third parties for other ember applications...)
Here is a fiddle on how to make an external component and reuse it if you want more details. Let me know if this helps.
The component :
var GravatarImageComponent = Ember.Component.extend({
size: 200,
email: '',
gravatarUrl: function () {
var email = this.get('email'),
size = this.get('size');
return 'http://www.gravatar.com/avatar/' + CryptoJS.MD5(email) + '?s=' + size;
}.property('email', 'size')
});
Ember.Application.initializer({
name: "gravatar-image-component",
initialize: function(container, application) {
container.register('component:gravatar-image', GravatarImageComponent);
}
});
The HTML to bring it to life :
<script type="text/x-handlebars">
<ul class="example-gravatar">
<li>{{gravatar-image email="tomster#emberjs.com" size="200"}}</li>
<li>{{gravatar-image size="200"}}</li>
</ul>
</script>
<script type="text/x-handlebars" id="components/gravatar-image">
<img {{bind-attr src=gravatarUrl}}>
<div class="email-input">
{{input type="email" value=email placeholder="tomster#emberjs.com for instance"}}
</div>
</script>
Related
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.
Problem:
I am kind of struggling with the organization of my first ember app. The current issue is that the my Items ArrayController is not defined in my dashboard template:
<script type="text/x-handlebars" data-template-name="dashboard">
{{#if controllers.items}}
<p class="alert alert-error">Dashboard can access item's info - Nice!</p>
{{else}}
<p class="alert alert-error">Dashboard cannot access items... :-/</p>
{{/if}}
</script>
Likely cause: *
**EDIT: after talking with #conrad below, I'm kind of questioning this:*
I had a similar issue in an earlier post and kingpin2k suggested the cause was that I:
"never created anything that uses the options controller".
This is probably the case here as well. This quick screencast shows that a breakpoint on my ArrayController is not hit on page load - but it is hit when I inspect the Items controller in the Ember inspector tool (eg, Ember creates the ArrayController object right then for the first time).
Apparent non-solutions:
My Dashboard controller says it needs the Items controller. I guess that isn't enough to instantiate the ArrayController?
App.ItemsController = Ember.ArrayController.extend({
len: function(){
return this.get('length');
}.property('length'),
totalCost: function() {
return this.reduce( function(prevCost, item){
return parseInt(item.get('values').findBy('type', 'cost').price, 10) + prevCost;
}, 0);
}.property('#each.values')
[more computed properties...]
});
App.DashboardController = Em.Controller.extend({
needs: ['items'],
itemsLength: Ember.computed.alias('controllers.items.len'),
itemsTotalCost: Ember.computed.alias('controllers.items.totalCost'),
[more computed properties...]
});
Furthermore, each item in Items is being rendered in my items template. I guess that does not create the missing controllers.items either...
<script type="text/x-handlebars" data-template-name="items">
{{#each}}
[these render fine]
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="display">
<!-- DISPLAY TEMPLATE -->
{{!- DASHBOARD -}}
{{render dashboard}}
{{!- ITEMS -}}
{{render 'items' items}}
</script>
So then.. what?
I can imagine many possible avenues, but haven't gotten any of them to work yet:
Specify the Items ArrayController in {{render dashboard}}?
Some configuration in a Route?
Maybe my templates/routes are not correctly arranged?
You could make sure that the ItemController is instantiated in the dashboard template by calling it in the DashboardController's init function:
App.DashboardController = Em.Controller.extend({
needs: ['items'],
init: function() {
this._super();
this.get('controllers.items.length');
}
});
/edit:
removed the part that was not helpful
i'm having some trouble designing an EmberJS layout. I have a view divided in two parts :
a content library on the left
a playlist editor on the right
Currently, those two elements share the same controller.
I can't figure how to use two different controllers for those two sides to be able to re-use the content library in other views or even having a view with two playlist editors.
My root view looks like this so far :
<script type="text/x-handlebars" data-template-name="playlists">
<div id="library">{{template library}}</div>
<div id="playlistEditor">{{template playlisteditor}}</div>
</script>
I saw docs about the {{control}} helper, but it is unstable and i'm not sure this is what i'm looking for.
Thanks !
Okay, i found the answer, i had to use the {{render}} helper, like that :
<script type="text/x-handlebars" data-template-name="playlists">
<div id="library">{{render "library" library}}</div>
<div id="playlistEditor">{{render "playlisteditor" playlist}}</div>
</script>
Then, in my route :
App.PlaylistsRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('playlist', playlist);
controller.set('library', library);
}
});
Then, this EmberJS will automatically wire the App.PlaylisteditorController, the App.LibraryController and the views playlisteditor and library. Awesome.
I have a setup screen, it consists of a sidebar and a body. The body can have a form to update the user's profile or password.
The routing looks like this:
App.Router.map(function(match) {
(match("/")).to("index");
(match("/user")).to("user", function(match) {
(match("/")).to("userIdx");
(match("/settings")).to("userSetup", function(match) {
(match("/")).to("userSetupIdx");
(match("/profile")).to("userSetupProfile");
(match("/password")).to("userSetupPassword");
});
});
});
and the wrapping setup template like this:
<script type="text/x-handlebars" data-template-name="userSetup">
<div class='sidebar'>
Sidebar
</div>
<div class='main'>
Setup <br/>
{{outlet}}
</div>
</script>
A complete example can be found here:
http://jsfiddle.net/stephanos/mgp7F/6/
What's the right approach to do this in Ember.js?
EDIT
With the help of sly7_7 I managed to make the fiddle above work: http://jsfiddle.net/ygvsS/9/. All I did was rename everything from userSetup (template, view, route) to setup. BUT obviously this is not a solution (since I have appSetup, too).
I think I have done what you are looking for, based on your comment example: http://jsfiddle.net/rt8fv/
router code:
App.Router.map(function(match){
match('/').to('home');
match('/about').to('about');
match('/contributors').to('contributors', function(match){
match('/').to('contributorsIndex');
match('/:contributor_id').to('contributor', function(match){
match('/').to('contributorIndex');
match('/details').to('contributorDetail');
match('/repos').to('contributorRepos');
});
});
});
Maybe related question: Best approach to fetch data in every state of app
I have started to look at ember js but I am having problems getting my head around the view - template part, if I want one text box to fire a create event this is simple enough I use the insertNewline function on the Ember.TextField view, however most web application require a form to be filled out and submitted when a button is pressed, I can't seen to get the a view working that has multiple text input boxes on it.
I have followed the example on git hub https://github.com/mikecrittenden/tangletube however he seems to be referencing DOM elements directly from the view rather than Binding to properties of the view.
Does anyone have an example of an ember project that uses multi text field forms.
On a side note: There seems to be no standard structure to developing ember applications, every example I have looked at does things completely differently.
Here's a very simple example showing two ways of using multiple text fields in a view: http://jsfiddle.net/tomwhatmore/HEaGm/
The first one binds the textfields to their view using viewName, which lets the view access each of them using this.get('whateverYouPutAsViewName').
The second binds the values of the textfields directly to an Ember object, by using valueBinding. Any changes you make to the fields will automatically update the object.
Both have a button which triggers a simple action which use the values to show how they are accessed in the view. Hopefully the code is pretty self-explanatory.
HTML:
<script type="text/x-handlebars">
{{#view App.HelloView}}
{{view Ember.TextField viewName="firstName" placeholder="first name"}}
{{view Ember.TextField viewName="lastName" placeholder="last name"}}
<button {{action "hello"}}>Say Hello</button>
{{/view}}
{{#view App.BoundView}}
{{#with person}}
{{view Ember.TextField valueBinding="firstName"}}
{{view Ember.TextField valueBinding="lastName"}}
{{/with}}
<button {{action "hello"}}>Say Hello</button>
{{/view}}
</script>
JS:
App = Ember.Application.create()
App.HelloView = Ember.View.extend({
hello: function() {
alert("Hello " + this.get('firstName').get('value') + " " + this.get('lastName').get('value'));
}
});
App.Person = Ember.Object.create({
'firstName': 'John',
'lastName': 'Doe',
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
App.BoundView = Ember.View.extend({
personBinding: 'App.Person',
hello: function() {
alert("hello " + this.get('person').get('fullName'));
}
})
The simple bindings example app on the emberjs site (http://emberjs.com/examples/) has multiple text boxes.
You may also want to checkout the sproutcore 2 (ember's previous name) demo app contest. http://blog.sproutcore.com/announcing-the-winners-of-the-demo-apps-contest/.
Generally speaking, to convert sproutcore 2 to emberjs, just change the SC namespace to Ember.