Render Ember Sub-Routes While In Parent Route - ember.js

What is the correct way to render sub routes while at the parent route? Basically what I'm trying to do is create a table of resources from the parent route but then make the rows "editable" while at their specific sub-route. Examples:
/foos = table of all foo's but each row is a render of /foos/#
/foos/1 = same table of /foos but the specific row is now form fields for editing
/foos/new = row with blank form fields for a new foo (not part of the question, explain below)
The idea is that only one row is "editable" at a time. So if a user navigates from /foos/new to /foos/3 then the "new" row goes away and the foo # 3 is now editable. Similar when navigating between specific /foos/#
Bonus points: What is the best way for the /foos/# route to know if it is active, so the template knows to either display the read-only foo details or form fields for editing.
At this point I have (what I think is) mostly setup for this scenario but am stuck at the rendering sub routes. I have a jsbin setup: http://jsbin.com/jayax/6/

Related

Emberjs - how to render nested route template without parent route content?

Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes

Save the dynamically populated value on dropdown

I'm using wagtail CMS for Django, I want to add a dynamically populated value for a dropdown and save it on the Page model, this is my code:
class MyPage(Page):
domain = CharField(max_length=10, choices=MY_CHOICES)
subdomain = CharField(max_length=10, choices=[('', '------')]
I've got some frontend logic to populate dynamically the options for subdomain, but after I hit save I got: The page could not be created due to validation errors And in the subdomain field: Select a valid choice. [my value] is not one of the available choices.
I can't use ForeignKey to populate subdomain because it depends from an external API service that we're using.
I tried to use a custom field that inherits from CharField with no success, it looks it executes validate method only for the domain field.
If you use the choices argument, you have to predefine the list of possible values. Read the relevant part of the docs (last two paragraphs of that section).
You could omit the choices argument from the model field definition and only render a HTML select tag in the frontend (which is then filled with options dynamically, like you explained).
You could also look into changing the default widget of the CharField to a select tag, like this answer and this part of the docs show.

How to make a NameValueCollection list editable in GlassMapper

I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.
We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.
The collection is pre-processed when GlassMapper is retrieving the item:
Validations = glassItem.GetValidations();
#foreach(Validation validation in Model.Validations)
{
<div id="#validation.Identifier" ng-message="#validation.AngularKey" ng-cloak class="mtg-validation-msg">
#Html.Glass().Editable(validation, e => e.ErrorMessage)
</div>
}
Error that I am getting:
Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation
It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.
Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.
Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
{
<div>Edit Validations</div>
}
}
You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.

Ember 2 set select value in component

I have a little problem.
There is some component, which must render the form for editing model's record. And I need render it on listing page below each model's record.
There is a gist: https://gist.github.com/mxgoncharov/9f1b4cd52cac9173fd46
Problem: When I open it, all fields without select-tags are filled. If render e.g. groupId or another SELECT-tag's value as label it shows right (e.g. '6'). But select-tag doesn't show selected value, and all select-tags shows only prompt.
How can I redraw or refill select-tags? Maybe I did smth wrong?

Form of a list of instances

I am missing an idea or a way to handle this in django.
I have a list of instances (class Sample) and I want to present the last 10 of them in a form with a checkbox before... I want to have a button "work on these" to submit the checked instances to a view. This view should present a detailView of the selected instances.
I don't know, how to handle this exactly. Can somebody give me a hint? All I did so far was just creating a form of a instance.
Thanks in advance.
You can use a ModelChoiceField or a ModelMultipleChoiceField.
class MyForm(forms.Form):
my_list_of_instances = forms.ModelMultipleChoiceField(queryset = MyModel.objects.all().order_by('-id')[:10], widget=forms.CheckboxSelectMultiple)
This should generate a list of checkbox with your last 10 instances created.
With this you have your form ready to receive your input...just point your action to your view.
Edit:
In case you want to have several forms, one for each instance, you can work with Formsets. You would not get the checkboxes tho...you would get any change applied to your instances. If you want to have both (checkboxes and formsets) you can use both suggestions, using the checkbox values sent to the server to filter the formsets you are going to save.