CODEWITHSUNDEEP
knockout.jsknockout-2.0x-editablejeditableknockout-3.0
Peter G.
Peter G.

Reputation: 8034

Knockout x-editable overriding button text

The a problem is that an editable overrides default text inside a button. In this example the glyphicon gets replaced by the value of selection.

It is the default behavior, but I want to modify just the Knockout variable instead and leave the button html content intact.

Is there an option in editableOptions or another way to disable this behavior?

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>

Upvotes: 1

Views: 609

Answers (1)

Roy J
Roy J

Reputation: 43881

Looking at the source, I find

 //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
});

There's no option controlling it, so you can't change it. You would need to use a modified version of the binding handler with this removed.

I was able to get the effect you want by modifying a chunk of the binding handler thus:

    //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
    });

Upvotes: 2

Related Questions