使用x可編輯更改select2的數據，而無需重新設置源選項

Question

如何在x可編輯的情況下保持選項值的源更新，而無需使用source重新初始化可編輯元素。

這是沙箱： 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 = '';  
        }
    }
}); 

要求：

1. 每當我在源中添加新項目時，如果未選擇該項目，則應在可用選項中對其進行更新；否則，如果選擇了該項目，則視圖應在元素處具有更新的值。
2. 每當我更新源中的項目時，如果未選擇該項目，則應在可用選項中對其進行更新；否則，如果選擇了該項目，則視圖應在元素處具有更新的值。
3. 每當我刪除源中的項目時，如果未選擇該項目，則應將其從可用選項中刪除；否則，如果該項目被選中，則視圖應在元素處具有“無”值（如果是單選），其余元素的值（如果是多選）。

不允許：

1. 重新初始化小部件
2. 重新初始化源選項

我希望這是可能的。 但是努力取得結果。

EDIT2：當我在字符串化的“ sources”上使用JSON.parse時，代碼無法正常工作。問題仍未解決。 新小提琴： http : //jsfiddle.net/wQysh/322/ （EDIT1誤導了此問題，因此刪除了EDIT1）

EDIT3：到目前為止，我已經能夠實現此http://jsfiddle.net/wQysh/324/。這里的問題是先前選擇的值未呈現，因此如果以前在多選中選擇，則無法刪除項目

EDIT4：尚未完全解決， http : //jsfiddle.net/wQysh/339/ 。 添加或更新后，可用選項不會更改，但設置該新記錄后，提交后不會反映在html元素中。

Answer 1

答案是使用自定義顯示功能

這是更新的小提琴。 http://jsfiddle.net/wQysh/357/

每當我們將“ setValue”設置為可編輯時，或在關閉事件時，都會調用可編輯的“顯示”功能。

在顯示功能中，此功能會檢查現有值

$.fn.editableutils.itemsByValue

其中第三個參數接受idKey。 如果在調用此函數時未提供第三個參數，則默認情況下它將“值”作為idKey。 當我們用來加載數組數據時，不應使用'value'作為idKey。 參考： http : //ivaynberg.github.io/select2/#data_array 。

我添加了顯示功能，其中第三個參數是“ id”。

我得到了預期的結果