JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<input type="text" id="1" data-bind="item_value: $data">
<input type="text" id="2" data-bind="item_value: $data">
<input type="text" id="3" data-bind="item_value: $data">
JavaScript
function viewModel() {
var self = this;
var itemMap = {
key: function(item) {
return ko.utils.unwrapObservable(item.id);
}
};
var myObject = [{
id: 1,
name: 'one'},
{
id: 2,
name: 'two'},
{
id: 3,
name: 'three'},
{
id: 3,
name: 'three'}];
self.myObservableObject = ko.mapping.fromJS(myObject, itemMap);
}
ko.bindingHandlers.item_value = {
init: function(element) {
var item_id = $(element).attr("id");
var context = ko.contextFor(element);
var value = context.$root.myObservableObject.mappedIndexOf({
id: parseInt(item_id)
});
$(element).val(context.$root.myObservableObject()[value].name());
}
}
ko.applyBindings(new viewModel());