xeditabe - knockout

Basic example showing x-editable text working with knockout two-way binding

by Farzad Cyrus

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://www.eleganttechnologies.com/outside/scripts/jsfiddle/knockout.x-editable.js"></script>
Combine editable and knockout
<p/>
see: https://github.com/brianchance/knockout-x-editable
<p/>
Use case: Set up knockoutjs so that when I edit the first name or last name via x-editable that the updated name will propogate to Greetings
<p/>
Status: This works

<p/>Note: knockout-x-editable.js is residing my own server as of April 24th 2013 because jsfiddle warns against linking directly to github pages.  I think you can (maybe?) replace that link with: https://raw.github.com/brianchance/knockout-x-editable/master/knockout.x-editable.js

<div style="margin: 150px">

    <p/> First Name: <span class='editable' data-bind="editable: firstName" data-url="/save" data-pk="5" >Gavin</span> (click to edit)
    <p>
        Last Name: <span data-bind="editable: lastName">Rohrer</span>

        
        <p/>Gretings: Dear Mr. <span data-bind="text: lastName">Rohrer</span> (or should I just call you <span data-bind="text: firstName">Gavin</span>)?  
        <p/>( When you edit the above, you are suppose to see this Greeting get updated, too) 
        
    </div>

JavaScript

$('.editable').editable();

/*
//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/save',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {//<-- type 'err' to see an error, just for kicks
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
}
); 
*/



function AppViewModel() {
  var self = this;
  self.firstName = ko.observable('John');
  self.lastName = ko.observable('Doe');
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());