소스 옵션을 다시 설정하지 않고 x 편집 가능으로 select2의 데이터 변경

Question

x 편집 가능한 에서 업데이트 된 옵션 값의 소스를 소스로 유지하면서 편집 가능한 요소를 다시 초기화하지 않고 유지하는 방법. 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. 소스 옵션 I이 가능 희망

에게 REINIT하는 위젯

을 REINIT 할 수 있습니다. 그러나 결과를 얻으려고 고군분투합니다.

EDIT2 : 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'또는 닫기 이벤트 편집 가능한 'display'기능이 호출 될 때마다 호출됩니다. 표시 기능 기존 값

이 함수 세번째 파라미터는 idKey을 받아

$.fn.editableutils.itemsByValue 

으로 판정한다. 이 함수를 호출하는 동안 세 번째 매개 변수를 제공하지 않으면 기본적으로 'value'가 idKey로 사용됩니다. 배열 데이터를로드 할 때 idKey로 'value'를 사용하면 안됩니다.ref : http://ivaynberg.github.io/select2/#data_array.

세 번째 매개 변수가 'id'인 표시 기능을 추가했습니다.

원하는 결과를 얻었습니다.