JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<ul data-bind="foreach: tags">
<li class="tagItem" data-bind="click: $parent.selectTag">
<div>
<span data-bind="text: Name"></span>
<a href="#" class="tag-edit">Edit</a>
<a href="#" class="tag-delete">Delete</a>
</div>
</li>
</ul>
JavaScript
$(function () {
var data = [
{ Name: 'tag a' }, { Name: 'tag b' }, { Name: 'tag c' }
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
selectedTag: ko.observable(null),
addTag: function () {
this.tags.push({ Name: this.tagToAdd() });
//var newTag = { Name: viewModel.tagToAdd() };
this.tagToAdd("");
},
selectTag: function (tag) {
console.log("inside selectTag");
viewModel.selectedTag(tag)
}
};
$(document).on("click", ".tag-delete", function () {
var itemToRemove = ko.dataFor(this);
viewModel.tags.remove(itemToRemove);
});
$(document).on("click", ".tag-edit", function () {
var itemToRemove = ko.dataFor(this);
viewModel.tags.remove(itemToRemove);
});
ko.applyBindings(viewModel);
});