JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars">
{{view Ember.Select
prompt="Choose..."
contentBinding="model"
optionValuePath="content.value"
optionLabelPath="content.label"
selectionBinding="selectedLabel"
}}
{{view Ember.TextField valueBinding="controller.selectedLabel.value" action='saveNewLabel'}}
</script>
JavaScript
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return [{
label: 'Some label',
value: 'Some value'
},
{
label: 'Another label',
value: 'Another value'
}];
}
});
App.ApplicationController = Ember.ObjectController.extend({
selectedLabel: null,
actions: {
saveNewLabel: function() {
console.log('Saving label: ' + this.get('selectedLabel.value'));
}
}
});
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
var self = this;
this.$('select').change(function() {
self.$('input').val(self.$('option:selected').text());
self.$("option:selected").removeAttr("selected");
});
}
});