Knockout x-editable overriding button text

Question

Проблема в том, что editable переопределяет текст по умолчанию внутри кнопки. В этом примере glyphicon заменяется на значение selection.

Это поведение по умолчанию, но вместо этого я хочу изменить только переменную Knockout и оставить содержимое кнопки html неповрежденным.

Есть ли опция в editableOptions или как можно отключить эту функцию?

var viewModel = function() { 
 
    this.selection = ko.observable(); 
 
    this.options = ko.observableArray([{value:"AND", label:"All"}, {value:"OR", label:"Any"}]); 
 
    this.hidden = function() {return false}; 
 
}; 
 
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<link href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" /> 
 
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script> 
 
<script src="http://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> 
 

 
<span data-bind="text:selection"></span> 
 
<button type="button" class="btn btn-primary btn-sm editable-submit" data-bind="editable: selection, editableOptions:{type:'select', options: options, optionsText: 'label', optionsValue: 'value', hidden: hidden}"><i class="glyphicon glyphicon-plus"></i></button>

Answer 1

Глядя на the source, я нахожу

//setup observable to fire only when editable changes, not when options change 
//http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html 
ko.computed({ 
    read: function() { 
    var val = ko.utils.unwrapObservable(valueAccessor()); 
    $editable.editable('setValue', val || '', true) 
    }, 
    owner: this, 
    disposeWhenNodeIsRemoved: element 
}); 

Там нет возможности контролировать его, так что вы не можете изменить его. Вам нужно будет использовать модифицированную версию обработчика привязки с удаленным.

Я был в состоянии получить эффект, который вы хотите, изменяя кусок связывания обработчика следующим образом:

//create editable 
    var glyphHtml = $element.html(); // saves the original contents of the button 
    var $editable = $element.editable(editableOptions); 

    //update observable on save 
    if (ko.isObservable(value)) { 
     $editable.on('save.ko', function(e, params) { 
     value(params.newValue); 
     }) 
    }; 

    if (editableOptions.save) { 
     $editable.on('save', editableOptions.save); 
    } 

    //setup observable to fire only when editable changes, not when options change 
    //http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html 
    ko.computed({ 
     read: function() { 
     var val = ko.utils.unwrapObservable(valueAccessor()); 
     // Restores the original contents of the button. 
     setTimeout(function() { 
      $editable.html(glyphHtml); 
     }, 0); 
     }, 
     owner: this, 
     disposeWhenNodeIsRemoved: element 
    });