changing data of select2 with x-editable without re-setting source option

Question

How to keep the source of option values updated in x-editable without re-initialising the editable element with source.

Here is the sandbox : http://jsfiddle.net/wQysh/322/

HTML

   <p>X-editable (dev)</p>
    <div>
        <button id="controller">Add</button>
    </div>
    <div>
        <button id="controller1">Remove</button>
    </div>
    <div>
        <button id="controller2">Update</button>
    </div>
<div style="margin: 50px">
    <a href="#" id="username"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username2"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username3"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username4"></a>
</div>

JS :

$.fn.editable.defaults.mode = 'inline';

var count = 4, sources = [];

for(var i = 1; i <= count; i++){
    sources.push({ id : i, text : String(i) })
}

var getSource = function() {
    //i want this function must be called whenever available options is rendred. to ensure i used JSON.parse
    return JSON.parse(JSON.stringify(sources));
};


$('#controller2').click(function(e){
    count++;
    sources[2].text = String(count);
      //to verify live changes, if a new record updated in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text :String(count) });  
      //to verify live changes, what if a new record added in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

 $('#controller1').click(function(e){
    count++;
    var a = sources.pop();
     //to verify live changes by selecting value that is not present in the list. It should escape those, print the rest all if available in list
   $('#username').editable('setValue', [1, a.id]); $('#username2').editable('setValue', a.id);
});

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : [1,2],
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : true
    }
});

$('#username2').editable({  //to keep track of selected values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : 2,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

$('#username3').editable({  //to keep track of available values in  multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : true
    }
});

$('#username4').editable({  //to keep track of available values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
}); 

Requirement :

1. Whenever i add new item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
2. Whenever i update an item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
3. Whenever i delete an item in sources, if item is not selected then it should be removed from the available options otherwise if selected then view should have "None" value (if single select) and rest element values (if multi select) at element.

Not allowed:

1. to reinit the widget
2. to reinit the source option

I hope this is possible. But struggling to get the result.

EDIT2 : code did not worked when i used JSON.parse over stringified 'sources' Problem is still unresolved. New fiddle : http://jsfiddle.net/wQysh/322/ (EDIT1 was misleading this question so removed EDIT1)

EDIT3 : so far i am able to achieve this http://jsfiddle.net/wQysh/324/ Here problem is that previous selected values are not rendered, so can't remove the items if selected previously in multi-select

EDIT4: not completely solved, http://jsfiddle.net/wQysh/339/ . After add or update the available option does change but after setting that new record, does not reflect in html element after submit.

Answer 1

the answer is to use a custom display function

here is the updated fiddle. http://jsfiddle.net/wQysh/357/

Every time we 'setValue' to editable or on close event editable's 'display' function is called.

in display function existing values is checked by this function

$.fn.editableutils.itemsByValue

where the third parameter accepts the idKey. If we do not provide third parameter while calling this function, it by default takes 'value' as idKey. and 'value' as idKey should not be used when we are using to load array data. ref : http://ivaynberg.github.io/select2/#data_array .

I added display function in which third parameter is 'id'.

and i got the desired result