在 jQuery 对话框中淘汰 'with' 绑定和 select2

Posted 2023-05-07

【中文标题】在 jQuery 对话框中淘汰 \'with\' 绑定和 select2

【英文标题】：Knockout 'with' binding and select2 in jQuery dialog在 jQuery 对话框中淘汰 'with' 绑定和 select2

【发布时间】：2015-07-28 06:01:42

【问题描述】：

问题：

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

背景：

所以我必须争取 3 个小时的大部分时间试图让 select2 在 jQuery 对话框表单上工作....谈论 pi$$ing 众所周知的错误树，我认为这纯粹是 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 不起作用。

【问题讨论】：

您发布的代码似乎不足以重现您的场景（例如，没有 selects 或任何类型的相关代码？）。

什么给了？标识为 someList 的标记上的隐藏输入是 select2 控件的容器。在设置部分，您可以看到我调用了 $('#someList').select2(..)。这会将这个元素转换为 select2 列表。我错过了什么吗？严厉的反对票......

我的立场是正确的。道歉。 - 我稍微调整了你的问题，否则系统不会让我撤消我的投票。我也撤回了我的近距离投票，因为我现在看到我没有付出足够的努力来使用发布的代码来重现问题（尽管我仍然不是 100% 确定如何这样做，但其他人可能会更清楚地看到事情能够提供帮助）。

Jeroen - 感谢您的道歉和撤回。

我冒昧地将您的代码改造成一个可运行的堆栈 sn-p。这应该可以消除一些猜测，并有望带来更多答案。

【参考方案1】：

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

你面临着两者的危险

在 Knockout 尚未呈现任何内容时过早初始化 select2，或者 Knockout 丢弃并在稍后重新渲染标记，以便您的 select2 突然不再绑定

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

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

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>

【讨论】：

谢谢 janfoeh。不幸的是，它并没有解决我的问题。与“with”绑定上下文一起使用的属性的深度似乎会影响 select2 控件是否工作。我接受您关于将所有外部库包装在绑定中的评论，并会在我理解并解决此问题后立即将我的评论转换为

@AlanAlcock 无论您是否尝试通过绑定使用 select2，我都对您的评论感到有些困惑？因为那是我回答的核心。

janfoeh - 匆忙中我没有正确研究您的回复，但这确实解决了问题，更重要的是教会我欣赏外部库并将其包装在绑定处理程序中。非常感谢您的帮助。