knockout custom element

by ermakovnikolay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<button data-bind="click: getIt">Get report for</button><input id="searchedId" value="id2">
<div id="result">
</div>

JavaScript

var viewModel = {
	availableReports: [ {id: "id1", name: "name1"}, {id: "id2", name: "name2"}, {id: "id3", name: "name3"} ]
}

var currentViewModel = ko.mapping.fromJS(viewModel);
currentViewModel.getReport = function(reportId) {
    for (var i = 0; i < currentViewModel.availableReports().length; i++) {
        if (currentViewModel.availableReports()[i].id() == reportId) {
            var m = currentViewModel.availableReports()[i];
            return currentViewModel.availableReports()[i];
        }
    }
}


currentViewModel.getIt = function() {
		var r = currentViewModel.getReport( $('#searchedId').val() );
		$('#result').html( ko.toJSON(r) );
}    

    
    
ko.applyBindings(currentViewModel);