分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在jQuery对话框中敲除’with’binding和select2，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

问题：

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

背景：

因此,我必须在3小时内努力争取让SELEct2在jQuery对话框表单上工作….讨论关于这个谚语错误树的问题,我认为它纯粹是jQuery对话框和SELEct2.它可能从一开始就使用_allowInteraction修复.直到我把问题直接解决为简单的步骤,并且因为开始显露自己.问题在于绑定.

放弃

当我为阻止jsfiddle的asinine公司工作时道歉.此外,由于实际模型非常大,我为了说明目的而细分了我的实现.

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

删除字段集上的数据绑定和SELEct2工作正常.

当fieldset上的数据绑定设置为department时,SELEct2工作正常.

当fieldset上的数据绑定设置为department.SELEctedTeam时,SELEct2不起作用.

解决方法

使用Knockout时,强烈建议在绑定中包装SELEct2等外部库.虽然您只初始化它们一次,但是诸如with,template或foreach之类的绑定可以在此之后的任何时间修改DOm.

你也面临着危险

>当Knockout尚未渲染任何内容时,过早地初始化SELEct2,或者
> Knockout丢弃并在稍后重新渲染标记,以便你的 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>