Develop Reference

using a backbone model to fill options of a select field

I would like to populate the options of a select field with the attributes from a "static" model. For example I have a Model and a collections of US states:
State = Backbone.Model.extend({
label:'',
value:''
}) ;
STATES = Backbone.Collection.extend({
model: State
});
states = [
{label: "Select ", value: '__' },
{label: "Alabama ", value: 'AL' },
{label: "Alaska ", value: 'AK' },
{label: "Arizona ", value: 'AZ' },
....];
localstates = new app.STATES(states); // or fetch the list of states from a RESTful site.
I then using back form have any address view and I want to pass localstates into the Form to populate the options of the state field:
UserAddress = Backform.Form.extend({
el: $("#personalInformation"),
fields: [
{name: "address1", label: "Address1", control: "input"},
{name: "address2", label: "Address2", control: "input"},
{name: "city", label: "City", control: "input"},
{name: "state", label: "State", control: "select",
options: **localstates**,
{name: "zip", label: "Zip Code", control: "input"},
{control: "button", label: "Save to server"}
],
});
I'm guessing I need to somehow pass the states collection into the User Address view and then access the attributes. But I have not been able to find a good example of how to do this.
edit1: Ok this is a bit silly in this case but:
newstate = new app.STATES(app.states);
var allstates =[];
app.newstate.forEach(function(state){
allstates.push({"label": state.get("label"), "value" : state.get("value")});
})
Gives me and array I can use at localstate. Basically I just re-created my original array in this case. In the case where it was fetch from a server it would be useful, but is there a better way?

You can do localstates.toJSON() to get a copy of the values to use in the template.
See Collection.toJSON()

Ember.js 2.0 Struggling to make hardcoded list available in template

I am currently building an application where a User will have to correct data within a prefilled form.
This form we will have some <select> that can show a selected value that corresponds to the data sent by the server. And sometimes we will not have data corresponding to that select, so we will not preselect any data. The server with never send me the list of all the possible values so I have to hard code then somewhere.
For that, I thought about creating an enumerable in the Route, for each list, and expose those to the Template via the setupController method.
1st question: is this a good way of doing?
2nd question: the code below is what I wrote and it does not work. When I call {{buildingDescriptions.length}} in the template, it does not show anything whereas the console outputs the right value... Also the {{each-in}} loop does not work either.
import Ember from 'ember';
const { computed, RSVP } = Ember;
export default Ember.Route.extend({
buildingDescriptions: computed(function() {
const descriptions = Ember.A([
{value: 'oneFamilyHouse', desc: ''},
{value: 'oneFamilyHouseWithSmallFlat', desc: ''},
{value: 'twoFamilyHouse', desc: ''},
{value: 'twoFamilyHouseWithSmallFlat', desc: ''},
{value: 'threeFamilyHouse', desc: ''},
{value: 'garageOrShelter', desc: ''}
]);
return RSVP.hash({descriptions: descriptions}).then(
function(results) {
Ember.Logger.log(results.descriptions.length);
Ember.Logger.log(results.descriptions);
return results.descriptions;
}
);
}),
model() {
},
setupController(controller) {
Ember.Logger.log(this.get('buildingDescriptions'));
controller.set('buildingDescriptions', this.get('buildingDescriptions'));
}
});
Many thanks in advance. Cheers
EDIT: This is what a simplified version of the code that works now:
import Ember from 'ember';
export default Ember.Route.extend({
buildingDescriptions: Ember.A([
{value: 'oneFamilyHouse', desc: ''},
{value: 'oneFamilyHouseWithSmallFlat', desc: ''},
{value: 'twoFamilyHouse', desc: ''},
{value: 'twoFamilyHouseWithSmallFlat', desc: ''},
{value: 'threeFamilyHouse', desc: ''},
{value: 'garageOrShelter'}
]),
setupController(controller) {
controller.set('buildingDescriptions', this.get('buildingDescriptions'));
}
});

How to set the value of a Kendo AutoComplete control to a javascript object?

I have a KendoUI AutoComplete control bound to a list of objects. What I can't figure out is how to set the selected value of the AutoComplete from javascript. For example:
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataTextField: "Name",
dataSource: [
{ id: 1, Name: "Apples" },
{ id: 2, Name: "Oranges" },
{ id: 3, Name: "Carrots" } ]
});
$("#autocomplete").data("kendoAutoComplete").value({ id: 2, Name: "Oranges" });
</script>
This just results in the AutoComplete control showing [object Object]. A jsBin of the problem is available here: jsBin
Any suggestions?
Jason

Answer from OnaBai
$("#autocomplete").data("kendoAutoComplete").value("Oranges");

Creating a Grouped Select in Ember.js

It's relatively easy to create a select in Ember.js using Ember.Select.
The question is, how do I make this into a grouped select, using an optgroup. I don't think this is built in, but I'm guessing it's possible with some modifications to the template.

This is natively supported by Ember now, but there are a few gotchas. In 1.4.0, the following solution works...
Here's the example data:
foos: Ember.A([{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}, {value: 'bar2', label: 'Bar2', group: 'Bars'}, {value: 'foo2', label: 'Foo2', group: 'Foos'}])
Here's the view helper:
{{view Ember.Select content=controller.foos optionLabelPath='content.label' optionValuePath='content.value' optionGroupPath='group'}}
If, you just do the above you will get a select list that looks like this:
The only way I could get around this was to sort the array first by the grouped field:
foos: Ember.A([{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}, {value: 'bar2', label: 'Bar2', group: 'Bars'}, {value: 'foo2', label: 'Foo2', group: 'Foos'}]).sortBy("group")

Here's the solution that I came up with. https://gist.github.com/3297425
I had to make two collections. One grouped and the other just content so that the proper option can be selected.
groupedServiceCodes = [Ember.Object.create({label: 'Label for optgroup', content: Ember.A()}), …]
And then flatten the content from groupedServiceCodes down to maintain order for the select:
flattenedServiceCodes = [].concat(object.get('content'), …)
This is a bit of a hack, and I think Ember is wanting for a better solution, but this works for me. I would love to hear thoughts on improving this.

The answers here are a bit outdated. Ember now supports grouping of stuff. Imagine you have:
App.SomeController = Ember.Controller.extend({
content: [{value: 'foo', label: 'Foo', group: 'Foos'}, {value: 'bar', label: 'Bar', group: 'Bars'}]
})
You can then do
Ember.Select contentBinding='content' optionLabelPath='content.label' optionValuePath='content.value' optionGroupPath='group'
Notice that optionGroupPath does not do content.path, just path

Ember.Select does not support optgroups, but you can extend Ember.Select to do so by providing a new template for it and a new template for options. I've done this to support chosen.js selects within Ember.

Ember now supports this out of the box. Refer to this git pull request https://github.com/emberjs/ember.js/pull/2465

How can I make a dijit.form.Select work with multiple items having the same value?

I have a dijit.form.Select widget that I'm using to map labels to values. Some labels need to have the same value, but I need to able to differentiate between the labels when a selection is made. Right now the widget's options look something like this:
[
{
label: "A",
value: "1",
},
{
label: "B",
value: "2"
},
{
label: "C",
value: "2"
}
],
That is done because the form's processing needs to know that 'B' and 'C' both actually mean 2, but I need to perform some different logic on another control when 'B' vs 'C' is selected. I've found that I can get("displayedValue") in the onChange event handler to get the "displayed" label, but it will always return the first option (B) that matches the current value (2) which is not necessarily what the user selected.
So, how can I handle the case when multiple labels need to evaluate to the same value while still being able to differentiate between the labels?

just use the dijit/form/Select widget focusNode.textcontent attribute:
function disaplySelected() {
document.getElementById("labelContainer").innerHTML = window.sel.focusNode.textContent;
document.getElementById("valueContainer").innerHTML = window.sel.value;
}
require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win) {
window.sel = new Select({
name: "select2",
options: [
{label: "A",value: "1"},
{label: "B",value: "2"},
{label: "C",value: "2"}
],
});
window.sel.placeAt(win.body(), "first").startup();
});
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<p>
<button onclick="disaplySelected()">Display selected label</button>
<br/>Selected item label: <span id="labelContainer"></span>
<br/>Selected item value: <span id="valueContainer"></span>
</p>
</body>
</html>