Question

问题是editable会覆盖按钮内的默认文本。在此示例中，glyphicon被selection的值替换。

这是默认行为，但我只想修改Knockout变量，并保持按钮html内容不变。

editableOptions或其他方式是否有选项可以禁用此行为？

＆＃13;

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());

＆＃13;

<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>

＆＃13;

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

淘汰x可编辑覆盖按钮文本

1 个答案: