敲除 'with' 绑定并在 jQuery 对话框中选择 2

Question

问题：

select2 jQuery 插件在嵌套在使用删除 with 数据绑定的元素下的 jQuery 对话框上使用时不起作用。删除 with 绑定，select2 工作正常。如果 with 绑定到嵌套的属性则它停止工作。

背景：

所以我一定花了 3 个小时的大部分时间试图让 select2 在 jQuery 对话框表单上工作....谈论 pi$$ 建立众所周知的错误树，我想这纯粹是 jQuery 对话框和选择 2。它可能从一开始就使用 _allowInteraction 修复。直到我将问题分解为简单的步骤，并且原因开始显露出来。 with 绑定有问题。

免责声明

抱歉，我在一家屏蔽 jsFiddle 的愚蠢公司工作。此外，由于实际模型非常大，我已经分解了我的实现以供说明。

// models

function Department() {
  this.name         = ko.observable('dept1');
  this.selectedTeam = ko.observable( new Team() );
}
    
function Team() {
  this.name = ko.observable('team1');
}
    
function MainModel() {
  this.department = new Department();
  this.showTeam   = function() { 
    $('#addTeamDialog').dialog('open');
  };
}

// setup

ko.applyBindings( new MainModel() );
     
$('#addTeamDialog').dialog({
  // fix allow select2 to work on the jq dialog
  _allowInteraction: function (event) {
    return !!$(event.target).is(".select2-input") || this._super(event);
  }  
});
     
$('#someList').select2({
  data: [
    { id: 0, text: 'enhancement' },
    { id: 1, text: 'bug' },
    { id: 2, text: 'duplicate' },
    { id: 3, text: 'invalid' },
    { id: 4, text: 'wontfix' }
  ]
});

<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<button data-bind="click: showTeam">Add Team</button>

<div id="addTeamDialog">
  <fieldset data-bind="with: department">
    
    <div class="lite-dialog-field">
      <div class="label">
        <span data-bind="text: name"></span>
      </div>
      <div class="field">
        <input type="hidden" id="someList" />
      </div>    
    </div>
        
  </fieldset>
</div>

删除 fieldset 上的 data-bind 和 select2 工作正常。

当 fieldset 上的 data-bind 设置为 department 时，select2 工作正常。

当 fieldset 上的 data-bind 设置为 department.selectedTeam 时，select2 不起作用。

Answer 1

当您使用 Knockout 时，强烈建议将外部库（例如 select2）包装在绑定中。虽然您只初始化它们一次，但 with、template 或 foreach 等绑定可以在此之后的任何时间修改 DOM。

你面临两种危险

当 Knockout 尚未呈现任何内容时过早初始化 select2，或者
淘汰赛丢弃并在稍后重新呈现标记，这样您的 select2 突然不再绑定

例如，更改 Department.selectedTeam 时会发生这种情况。

我从 Knockouts 的 rniemeyer himself here 中找到了一个快速而肮脏的 select2 绑定。除此之外，为了一致性和安全性，我只将 select2 标记更改为标准 <select> 并使 MainModel.department 成为适当的可观察对象。

ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor) {
      var options = ko.toJS(valueAccessor()) || {};
      setTimeout(function() { 
          $(element).select2(options);
      }, 0);
    }
};

// models

function Department() {
  this.name         = ko.observable('dept1');
  this.selectedTeam = ko.observable( new Team() );
};
    
function Team() {
  this.name     = ko.observable('team1');
  this.values   = ["red", "grey", "blue"];
  this.selected = ko.observableArray(["blue"]);
};
    
function MainModel() {
  this.department = ko.observable( new Department() );
  this.showTeam   = function() { 
    $('#addTeamDialog').dialog('open');
  };
};

// setup

ko.applyBindings( new MainModel() );
     
$('#addTeamDialog').dialog({
  // fix allow select2 to work on the jq dialog
  _allowInteraction: function (event) {
    return !!$(event.target).is(".select2-input") || this._super(event);
  }  
});

select {
  width: 200px;
}

<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<button data-bind="click: showTeam">Add Team</button>

<div id="addTeamDialog">
  <fieldset data-bind="with: department().selectedTeam">
    
    <select data-bind="options: values,
                       selectedOptions: selected, 
                       select2: { placeholder: 'pick some colors' }">
    </select>
        
  </fieldset>
</div>

敲除 'with' 绑定并在 jQuery 对话框中选择 2

Knockout 'with' binding and select2 in jQuery dialog

jquery

knockout.js

binding

jquery-select2

jquery-dialog