在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' }
  ]
});


删除字段集上的数据绑定和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;
}

在jQuery对话框中敲除’with’binding和select2

猜你在找的jQuery相关文章