Mapping

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<ul data-bind="foreach: dataArray" style="width : 400px">
<li>
    <span data-bind="text: Title"></span>
    <div class="btn-group" style="display:inline;width:200px">
        <a class="btn-small btn dropdown-toggle" data-toggle="dropdown" href="#">Action
                    <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <a data-bind="click: doAlert"><li>Edit</li></a>
            <a><li>Delete</li></a>
        </ul>
    </div>
    </li>
</ul>

JavaScript

var fakeData = [{
    "id": 1,
    "Title": "C++"},
{
    "id": 2,
    "Title": "Java"},
{
    "id": 3,
    "Title": "JavaScript"},
{
    "id": 4,
    "Title": "Scala"},
{
    "id": 5,
    "Title": "Python"}
];

function Model() {

    var self = this;

    this.dataArray = ko.observableArray([]);

    this.loadData = function() {
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: ko.toJSON(fakeData)
            },
            success: function(data) {

                var mapping = {

                    create: function(options) {                  
                        options.data.doAlert = function() {
                            alert(options.data.Title);
                        }
                        return options.data;
                    }
                }

                ko.mapping.fromJS(data, mapping, self.dataArray);
            },
            dataType: 'json'
        });
    }
};

var viewModel = new Model();
ko.applyBindings(viewModel);
viewModel.loadData();