JSFiddle - React, Tailwind, and code Playground

HTML

<!-- index.html -->
.row-fluid#albums_container
    .album{:'data-bind' => "template: {name: 'album-template', foreach: albums}"}


<!-- #album-template -->  
.row-fluid.album_head
    .span1
        = image_tag "", ':data-bind' => "attr{ src: image_path}", :width => 40, :height => 40
    .span9
        %h2.title{:'data-bind' => 'text: name'}

        %input{type: 'text', :'data-bind' => 'value: name'} 
        <!-- when update this field, above h2 is getting updated automatically -->        

    .span2.price
        Price

.row-fluid.album_tracks
    .tracks_container
        %table.table.tracks
            %thead
                %tr                
                    %th Title
                    %th File Name
                    %th Image
                    %th Actions
            %tbody{:'data-bind' => "template: {name: 'track-template', foreach: tracks}"}        

<!-- #track-template -->
%tr
    %td
        = text_field_tag '', '', :'data-bind' => "attr: { name: 'albums[track_attributes][$index][id]', value: title}"
        %span{:'data-bind' => "text: title"} <!-- this is not updating when the above text field is changed -->
    %td
        %span.uneditable-input.file_path{:'data-bind' => "text: title"}
    %td
        %img{:'data-bind' => "attr: { src: thumb}", :class => 'track_image', :height => 40, :width => 50}
    %td
        = number_field_tag '', '', :'data-bind' => "attr: { name: 'albums[track_attributes][$index][price]', value: price}", :class => 'price input-mini', :min => 0, :step => 'any'

    %td{:'data-bind' => "attr: {id: 'track_actions_' + id}"}
        Track Control Buttons

JavaScript

//
(function($) {
  $.getJSON(Routes.members_albums_path({format:'json'}), function(data){
    viewModel.albums = ko.mapping.fromJS(data);

    ko.applyBindings(viewModel)

  })


}(jQuery))