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.
Related
I'm currently in a situation that I need to pass one object to {{link-to}}, but queryParams does not accept objects {key:value}. I need this feature because I'm using this component in different templates. The reason for doing that is that one template uses some keywords to use as a filter that the other template does not use and vice-versa.
I started using my own helper to generate the link, but I realize that the anchor my helper was generating was reloading the whole page and link-to does not do that. I'd like to reproduce that behavior, because there are other variables set on the view which I'm using and they all get reset to their default values whenever I reload the page
Is there a smart way to create a link using objects now? I saw some answers but they were all related to ember 1.+ and canary. In all of the answers they were saying it was not possible. I wonder if people have implemented this now or if a solution for this problem is being used currently and I could not find...
Thanks!
So I really could not find a way to do this. What I've done instead was creating {{actions}} inside my anchors and then I used transitionTo() to simulate the behavior of {{link-to}}.
A nice way of doing that can be seen here
Ember transitionToRoute cleanly in a component without sendAction
Feel like I'm asking too much Ember questions lately, trust me I'm really trying by myself before every question and hopefully I'll get the whole picture going 'cause as of right now it's been two steps forward, one backwards.
This JSBIN ilustrates what I'm doing. It won't run since I can't load the localadapter_storage library, maybe there's a way to load it into jsbin but if that's so I don't know how to do it.
The problem I have is as follows:
I have the hability to create new posts and to edit old ones. When editing old ones I can't save the changes via this.get('store').save(); (have tried commit() also) since it says Uncaught TypeError: Object [object Object] has no method 'save' The save for the new posts is working properly.
I've compared the issue with other working examples of ember using the local adapter and I've tried to step by step ember.js and ember-data.js but I'm really not that versed yet. According to the error it's like it doesn't know where to apply the .save().
it should be record.save(). You don't need to access the store when you're saving, so in your case it would be something like, this.get('controller.model').save();
Im currently working through the Ember.js Getting started Guide, but i'm using v1.0.0-rc.6.3 instead of RC3.1 as mentioned in the Guide.
Now i reached the chapter about implementing the editing of single todos, but the {{action}} handler implemented in the Guide dosn't seem to work, so my fist assumption is that the behavior of events changed.
Here is my code so far in a JSBin: http://jsbin.com/ogixej/1/edit
As you can see, when you double click a todo item a error is raised in the console:
Uncaught Error: Nothing handled the event 'editTodo'.
Could you tell me what changed an how i'm supposed to do it in a correct manner?
Since your TodoController is the controller responsible for the items you need to define this on your TodosController, like this:
Todos.TodosController = Ember.ArrayController.extend({
itemController: 'todo',
...
});
This way the editTodo function is correctly invoked. Here your working jsbin.
Hope it helps.
I recognize that this should be a comment, but my reputation is too low, yet.
While #intuitivePixel's answer is correct, and accepted, it did not work for me later in the example, during the Transitioning examples (Getting Started Guide - Adding Child Routes). Once I broke the templates apart, I had to move the itemController property from the controller and into the template, during the {{#each}}, like so:
{{#each itemController="todo"}}
...
{{/each}}
If you look closely, you can find this code in Ember's first example block, but it's not called out in the surrounding narrative, so I missed it.
I'm finding the restrictions of handlebar templates in Ember.js to be absolutely crippling. You can't execute arbitrary javascript. All you get is a fixed set of abilities (if/else, each, action, view, outlet) and the ability to output the value of a property on the current context object.
Which means I cannot figure out how to do something as simple as utilizing a loop counter in order to, for example, slap positional IDs on an html element inside a loop based on it's position in the collection I'm iterating on.
It doesn't make sense to add it as a computed property on the model, because that's not model-level knowledge (the same model could be in two different positions in different views).
FYI-Using Ember-1.0-pre, Ember-Data, and Rails with ActiveModel::Serializers on PostgreSQL.
With handlebars.js (v. 1.0.rc1) I could do this:
{{#each links}}
<li>{{#index}} - {{url}}</li>
{{/each}}
I'd recommend writing a handlebars helper, in which you can execute arbitrary javascript. See
http://handlebarsjs.com for some examples.
Alternatively, you could include the positional IDs on your child views (not your models).
Turns out providing a loop counter is the exact subject of the final example on this page:
http://handlebarsjs.com/block_helpers.html
(Dan G already pointed out the "writing a helper" solution in his answer, but since there's already a published example, I wanted to create a fresh answer to make the link more prominent.)
Total Noob question here. My apologies for the simplicity, and I've skimmed hundreds of Ember-tagged posts here looking for an answer. But it appears to be too primitive for anyone to have bothered asking before...
I'm starting from scratch with Ember. I did Andy Matthews' EmberTweets tutorial, which worked fine. I'm trying to use that as a basis for my first Ember app, which is painfully simple; but I'm stuck on the most basic of steps. I appear to have a functioning controller, and am seemingly adding new objects to it successfully. But I cannot for the life of me get my view to render the properties of those objects. The basic view renders out, but not the data from the controller, which I'm just trying to access with a simple #each. I get no errors in any browser console.
Fiddle is here.
I've tried adding objects to the controller in three different ways in my example, to see if that helps. I can successfully access from the console the properties of the objects by inspecting the content array, or with something like FilterMenus.MenusController.content.objectAt(2).get('menu_name'). Apparently, the data is right where it's supposed to be.
But still nothing appears in my template when I try to render out any of the properties, such as: {{menu_name}}. What am I doing wrong, please?
As stated in the other answers, you have to declare your app as a global variable (by omitting the var).
Besides that, you are not calling this._super() inside your FilterMenus.menusController's init method. This is required to setup the Ember.ArrayController correctly, so modifying the content will work.
Besides these two issues, your code looks fine. Here's a working fiddle: http://jsfiddle.net/pangratz666/HPkHt/.
It seems like Ember's big problem with your code is that your Application is defined as a var so it can't be accessed from the template. Removing the var keyword helped.
For some reason though, that wasn't quite enough and I had to add a
this.set('content', []);
as the first line of your init function to get it to work. I've never had to do this before so I'm not sure if it's jsFiddle doing something. If anyone has some light to shed on this, I'd be keen to hear it.
Try the following:
Remove "var" from FilterMenus declaration:
FilterMenus = Em.Application.create();
Change the implementation of menusController.addMenu to be:
addMenu: function(menu) {
this.content.push(menu);
},
This got me the two menu names to show up after "Select Country" and the explanatory paragraph:
countries
countries2
Ember didn't seem to know what this.pushObject(menu); was. Pushing directly to the controller's content array will always work, though.