JSFiddle - React, Tailwind, and code Playground

by grahampcharles

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script>
<table>
    <thead>
        <tr><th>ID</th><th>name</th></tr>
    </thead>
    <tbody data-bind="foreach: Crews">
    <tr >
        <td data-bind="text: CrewId"></td>
        <td data-bind="text: CrewName"></td>
    </tr>
    </tbody>
</table>
<button data-bind="click: updateRecord">Update Record</button>
<span id="x" data-bind="text: result"></span>

JavaScript

ko.observableArray.fn.filterByProperty = function(propName, matchValue) {
    return ko.pureComputed(function() {
        var allItems = this(), matchingItems = [];
        for (var i = 0; i < allItems.length; i++) {
            var current = allItems[i];
            if (ko.unwrap(current[propName]) === matchValue)
                matchingItems.push(current);
        }
        return matchingItems;
    }, this);
}

ko.observableArray.fn.firstByProperty = function(propName, matchValue) {
    return ko.pureComputed(function() {
        var allItems = this(), matchingItems = [];
        for (var i = 0; i < allItems.length; i++) {
            var current = allItems[i];
            if (ko.unwrap(current[propName]) === matchValue) {
                matchingItems.push(current);
                break;
            }
        }
        return matchingItems[0];
    }, this);
}



var model = { result: "", Crews: [ { CrewId: 1, CrewName: "test 1"}, 
                     	{ CrewId: 2, CrewName: "test 2"} ] };

// var viewModel = model;
var viewModel =  ko.viewmodel.fromModel(model, 
                   { arrayChildId: {
                        "{root}.Crews": "CrewId"
                    }});



viewModel.updateRecord = function() {
    //viewModel.result("test");
     viewModel.result ( viewModel.Crews.filterByProperty("CrewId", 1)[0].CrewName()) ;
    
};


ko.applyBindings(viewModel);