Knockout - Control Flow Bindings (Container Elements)

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>

<ul data-bind="foreach: tags">
     <li>
            <span data-bind="text: name"></span>
            <div>Edit</div>
        </li>
</ul>
    
        
</script>

JavaScript

$(function() {
    var data=[{name: "Pratik"}, {name: "Vaun"}, {name: "Pradeep"}];
    var viewModel = {
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),
        addTag: function() {
            this.tags.push({name: this.tagToAdd()});
            this.tagToAdd('');
        }
    };
    ko.applyBindings(viewModel);
});