ember.js Ember.Select value binding with multiple options - javascript

I am trying to create a multiple select input element in Ember, where the content is coming from a hash, containing the label, value and group for the different options. This works fine, however I am not able to access the value binding.
Here is the JSBin; after submitting the form, it logs the selectedField variable to the console which is always 'undefined'.
I would like to implement the binding so that the initial contents of selectedField are preselected.
Update: I now see that the value method is unsupported for multiple selections, but then how do I pre-select and retrieve the selections?

Solved: I need to bind the Select via 'selection' (see JSBin).

Related

Kendo UI bind drop down value from PopupEditor

I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.

Angular radio element $invalid property not set when model value not in available options

I am running into a problem that if a model value to radio control is set which is outside the available options, The ng-required validation do not mark the element as $invalid. Is there any way to force the model value to be one of the available options?
Plunk
In this example, if I initialize the model value to white which is not available in the options, the element stays valid which I do not want.
This is just an example and I am having various such radio/selection lists, so I am looking for a generic solution which doesn't really depend on a particular set of model/values.
Thank you

How to edit selectize input after calling selectize()

My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});

Breeze/Knockout dropdown causing entity to be modified

This is a bit of an odd issue I came across today. I have an application that is using Breeze and Knockout. On one of my pages I allow the user to edit and save project data. The save button is only enabled if a change has been made. To track changes I subscribe to the propertyChanged event. This page has quite a few dropdowns which are causing some problems. Here is an example of one of the dropdowns.
<div>
<label for="projQAManager">QA Manager</label>
<select id="projQAManager" data-bind="options: QAManagers,
optionsText: 'FullName',
optionsValue: 'USERNAME',
optionsCaption: 'None',
value: project().QAManager"></select>
</div>
The issue occurs when project().QAManager is "". The propertyChanged event gets fired as soon as the project is loaded and it shows the QAManager field being changed from "" to null. This is causing the entity to believe it has been modified even though nothing has really changed. If QAManager is already null everything works fine. I suppose I could go through and try and clean the DB and clear out any fields with "" and set them to null if I had to but I would rather not if it can be avoided.
The problem lies indeed with the fact that KnockoutJS assigns the value undefined to the caption of the list box, which you labelled "None".
What happens is that right after the listbox is populated, KnockoutJS checks if your selected value (project().QAManager) matches any of the options listed in the list box. If it does not match, it selects the option with the caption, and as such, the selected value of the listbox is modified, which triggers project().QAManager to get the undefined value.
Excerpt from the documentation of the options binding handler (emphasis is mine):
KO will prefix the list of items with one that displays the text
[caption text] and has the value undefined. So, if myChosenValue
holds the value undefined (which observables do by default), then the
dummy option will be selected. If the optionsCaption parameter is an
observable, then the text of the initial item will update as the
observable’s value changes.
I thought of the following workarounds ranging from the easiest to the hardest, but most "proper":
One of the workaround would be to add to your list of options (QAManagers) an entry which has the value undefined, before it is available as an observable array.
Write a custom binding handler for options that allows to set a given value to the caption item, instead of it being set to undefined. This should consist in copy/pasting 99% of KnockoutJS's implementation of "options", and just changing the code I wrote at option 3.
Change KnockoutJS's source so that a new "optionsCaptionValue" binding is taken into account, like this (I've modified the original code like you should do):
if (allBindings['optionsCaption']) {
var option = document.createElement("option");
ko.utils.setHtml(option, allBindings['optionsCaption']);
var captionsValue;
if (allBindings['optionsCaptionValue']) {
captionsValue = ko.utils.unwrapObservable(allBindings['optionsCaptionValue']);
}
ko.selectExtensions.writeValue(option, captionsValue ? captionsValue : undefined);
element.appendChild(option);
}

Manually set default values for a select box using knockout on complex objects

I am trying to update the selected value in one of the select boxes using knockout. But I am not able to do so. Here is the jsfiddle link - http://jsfiddle.net/5MauG/1/
When I click on the click me span, I expect that the selected value in the select box should change.
You're problem is that trying to set the selected option to a new object won't work. Even with the same values, the new object is not the same as the old object. You can see that in this slightly modified fiddle; it works when actually choosing from the objects in the options array.
With an array of values, like strings or ints, you can select by value. With an array of objects, you need to select with the actual object. This will be easier if your view is using the bindings everywhere, because the bindings will represent the actual objects.

Categories