I've got a drag and drop setup in two views, currently. I am trying to pull those out and make reusable components out of them. At this point I'm not even worried about the actions and bringing that information back (that will be the next issue that I will look into). Right now I'm only worried about getting the proper data to display.
The templates for my current setup are:
The outside list view:
<ul class="sortable-list">
{{#each view.permission}}
{{ view App.GroupsPermissionView }}
{{/each}}
</ul>
The individual item view:
<li class="sortable-item">{{ this.displayName }}</li>
I have changed this into the following component templates:
drag-and-drop.handlebars:
<ul class="sortable-list">
{{#each dad}}
{{ drag-and-drop-item dadi=this.displayName }}
{{/each}}
</ul>
and drag-and-drop-item.handlebars:
<li class="sortable-item">{{ dadi }}</li>
I call this with {{ drag-and-drop dad=unselectedPermissions }} or {{ drag-and-drop dad=selectedPermissions }}
and this works fine.
Here is my issue. My other use of drag and drop does not use the field name of "displayName". The field is just "name". I'm sure other co-workers will need to also use other field names as well.
I've tried many different things to attempt to get it passed through to the inner component, but nothing has worked. I think it is a limitation in handlebars and that this will be impossible to do.
Any idea of what could be done here, if anything?
Edit: An update
I've got things somewhat closer...but now I've run into another related issue. Here's my current drag-and-drop.handlebars:
<ul class="sortable-list">
{{#each dad}}
{{ drag-and-drop-item self=this dadi=../field }}
{{/each}}
</ul>
Here's drag-and-drop-item.handlebars:
<li class="sortable-item">{{ dragAndDrop self dadi }}</li>
And here's drag_and_drop_helpers.js:
Ember.Handlebars.helper("dragAndDrop", function(context,value) {
return this.self.get(value);
});
I realize that context isn't being used above, I've got it in there because of testing I was doing.
Here's the thing...with the code above, I get the correct 'this'. If I return "this.self.get('displayName');" in the helper, it works. However, the ../field isn't being returned in the template. I so wish you could have nested {{}}'s...then this would work!
To get the ../field working, I found I could make the following change to drag-and-drop.handlebars:
<ul class="sortable-list">
{{#each dad}}
{{#if ../field}}
{{ drag-and-drop-item self=this dadi=../field }}
{{/if}}
{{/each}}
</ul>
But if I do this, 'this' isn't the right one, so I'm getting 'displayName' through, but the wrong context.
It seems I can have one, or the other, but not both.
I could really use some help here.
I got it figured out, after quite a few days of searching and trying lots of things.
I did not realize that you could use "view." to pull the information.
Here's the call to this:
{{ drag-and-drop dad=unselectedPermissions field="displayName" }}
Here's the working drag-and-drop.handlebars:
<ul class="sortable-list">
{{#each dad}}
{{ drag-and-drop-item self=this dadi=view.field }}
{{/each}}
</ul>
Here's the working drag-and-drop-item.handlebars:
<li class="sortable-item">{{ dragAndDrop dadi }}</li>
Here's the working drag_and_drop_helpers.js:
Ember.Handlebars.helper("dragAndDrop", function(value) {
return this.self.get(value);
});
I'm hoping this helps someone in the future so they don't repeat mistakes I've made.
Now, on to figuring out the coding for the component.js...
Related
My website works ok, my question is...
i have a
<li ng-repeat="(key,value) in bpData.slots">
{{key}} Slots: {{value}}
</li>
which works perfectly as it should, but some of the keys have words like weaponsC or weaponsS, again this is reading from the json as it should.... can i change that somehow(without changing the json as its also used for another page) ie weaponsC would display as weapons concussive, weaponsS would display as weapons surface.
does it need to be changed in the js or can i change it some other way?
to see the working page and a live example
www.ahoymearty.co.uk/blueprints-wiki and search using the hull menu.
thanks in advance
wayne
You could use a filter, this way you can handle all kinds of cases.
Example:
angular.module('appName')
.filter('weaponsFilter', function(){
return function(weapon) {
var weaponStrings = {
'weaponsC':'Weapons Concussive',
'weaponsS':'Weapons surface',
...
}
return weaponStrings[weapon]
};
});
Used in your ng-repeat:
<li ng-repeat="(key,value) in bpData.slots">
{{ key | weaponsFilter }} Slots: {{value}}
</li>
I have successfully displayed JSON objects unto my template thanks the answer on my previous stackoverflow post setting data from route to controller error in Emberjs
Now, I am trying to display a nested JSON data objects to my template using the {{#each}} helper.
here is my code:
http://screencast.com/t/3fhpckr4E
It doesn't give me any errors on my dev console and also it just gives me blank text.
I've also wrote the code in different ways but still no luck..
any feedback would be appreciated
thanks,
You can do this in your template as follows:
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.description}}</li>
<ul>
{{#each childItem in item.items}}
<li>{{childItem.title}}</li>
{{/each}}
</ul>
{{/each}}
</ul>
</script>
Working solution here
The problem with what you are doing is that there is no such thing as data.items.items. Each item in the data.items array has its own items property...
I have a question because I'm curious if I do it right.
As I'm reading all tutorials about Ember.js every one is typing something like that:
{{#each friend in model}}
{{friend.firstName}} {{friend.lastName}}
{{/each}}
And in my app with route for example: app/templates/works/index.hbs I have:
{{#each}}
{{#link-to 'works.work' this.id class="trigger"}}
<h3 class="title">{{name}}</h3>
<p class="description">{{description}}</p>
<img {{bind-attr src=image}}>
{{/link-to}}
{{/each}}
But that still working just fine, so thats just convention or I am doing something wrong all this time?
You should go with the first form, non-context switching form of {{each}}, as the second form is deprecated. See here.
The first form is less confusing as you don't need to think of the context for your properties.
I have a container view which, among other things, displays a list of objects, like so:
{{#each}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/each}}
I would like to hook a Javascript function everytime a DOM element is added to this list. I've tried doing:
didInsertElement: function() { ... }
But this hook apparently runs only the first time the view is initialized. I figured that maybe the hook doesn't run because the view is actually inserted once, and what's inserted more than once are just the nested element.
So should I use a nested view?
I tried something along these lines:
{{#each}}
{{#view App.SingleItemView}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/view}}
{{/each}}
But in this case, though it works somehow, it doesn't get passed the necessary data that would render the properties such as author.first_name.
render will give you a new scope and is really easy to assign the content as well
<ul>
{{#each item in controller}}
{{render 'ind' item}}
{{/each}}
</ul>
http://emberjs.jsbin.com/alAKubo/1/edit
I am currently rendering a list of views:
<ul>
{{#each newsItem in controller}}
{{view App.NewsItemView contentBinding="newsItem" class="news-item" }}
{{/each}}
</ul>
But I would like to inject a NewsItemController into each view.
I've tried using render, but this only seems to support a single view, giving the exception:
Uncaught Error: Handlebars error: Could not find property 'control'
on object .
I've found a brief mention of using control instead, but this no longer seems to be included.
So how can I render multiple versions of the same view, injecting a separate controller into each one?
{{render}} should be fixed in current master (if you build it from Github). You should be able to use it multiple times if you pass a model:
<ul>
{{#each controller}}
{{render "newsItem" this}}
{{/each}}
</ul>
{{control}} is still there but hidden behind a flag (because it's still experimental). To use it you need to do : ENV.EXPERIMENTAL_CONTROL_HELPER = true before including the ember.js file. If you can avoid using it, it would be better.
However I think the simplest approach would be to use itemController:
<ul>
{{#each controller itemController="newsItem"}}
{{view App.NewsItemView class="news-item" }}
{{/each}}
</ul>
I think you can combine them to make it simpler (I haven't tried it yet):
<ul>
{{each controller itemController="newsItem" itemViewClass="App.NewsItemView"}}
</ul>