Knockout - Parent Context Binding

by Pratik Bhattachary

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<input type="text" placeholder="Add Tags" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'"/>
<button data-bind="{click: addTag}">+</button>

<div data-bind="template: 'tagsTemplate'"></div>

<script id="tagsTemplate" type="text/html">
    <ul data-bind="foreach: tags">
        <!--$parent is used becasue li is set in the context of tag (element in tags)-->
        <li data-bind='click: $parent.selectTag'>
            <span data-bind="text: name"></span>
            <a class="tag-delete">Delete</button>
        </li>
    </ul>
</script>

JavaScript

$(function() {
    var data=[{name: "Pratik"}, {name: "Vaun"}, {name: "Pradeep"}];
    var viewModel = {
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),
        selectedTags: ko.observable(""),
        addTag: function() {
            this.tags.push({name: this.tagToAdd()});
            this.tagToAdd('');
        },
        selectTag: function() {           
            viewModel.selectedTags(this);
            alert(viewModel.selectedTags().name);
        }
    };
    
    $(document).on('click', '.tag-delete', function() {
        var itemToRemove = ko.dataFor(this);
        viewModel.tags.remove(itemToRemove);
    });
    
    ko.applyBindings(viewModel);
});