JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<section id="lists" data-bind="foreach: todoLists, visible: todoLists().length > 0">
<table width="100%" style="margin-top: 20px;" class="table-main">
  <thead>                       
   <tr class="b-table-line">
   <th>Select</th>
   <th>Title</th>
   <th>Artist</th>
  </tr>
 </thead>
<tbody data-bind="foreach: todos">
 <tr>
  <td>
   <input type="checkbox" data-bind="checked: isDone" /></td>
    <td>
     <input class="todoItemInput" type="text"
      data-bind="value: title,
      disable: isDone,
      blurOnEnter: true,
      updateOnTitle:true,
      valueUpdate: 'afterkeydown',
      click: $root.clearErrorMessage" />
     </td>
    <td>
    <input class="todoItemInput" type="text"
    data-bind="value: artist,
    click: $root.clearErrorMessage" />
  </td>
 </tr>
</tbody>
</table>

JavaScript

var vm = {
    todoLists: ko.observableArray([{ todos: [
        {isDone: ko.observable(false), title: "Title 1", artist: "Artist 1"},
        {isDone: ko.observable(true), title: "Title 2", artist: "Artist 2"},
        {isDone: ko.observable(false), title: "Title 3", artist: "Artist 3"}
    ]}]),
   
    clearErrorMessage: function(){}
}
ko.bindingHandlers.updateOnTitle = {
    init:function(element,valueAccessor,allBindings,viewModel,bindingContext)
    {
        
           $(element).blur(function (evt) {
              //Here I am trying to update the artist property based on title
              bindingContext.$data.title("Title goes here");
              bindingContext.$data.artist("New Artist Name Here");
           })
    }
}
ko.applyBindings(vm)