Knockout observableArray不更新JQuery Accordion

时间:2014-02-26 13:47:42

标签: jquery jquery-ui knockout.js jquery-ui-accordion knockout-3.0

我已将我的网站更新为最新的JQuery,JQueryUI和KnockOutJS。

从那以后,当我向可观察数组添加项目时,我的手风琴拒绝更新。当使用KnocKOutJS版本2.0.0和旧版本的JQuery时,这很好用。

我在JSFiddler中重新创建了这个问题,并感谢任何帮助。 javascript是我实际代码的大大简化版本。

http://jsfiddle.net/glenb/M9222/6/

非常感谢任何帮助。 我的模型看起来像这样:

function ModelCollection() {
   var self = this;
   self.ModelItems = ko.observableArray([]);

   self.AddNewItem = function(){
      var newItem = new ModelItem();
      newItem.Name = "Added";
      modelCollectionApp.ModelItems.push(newItem);
  };
}

function ModelItem() {
   var self = this;
   self.Name = "";
}

HTML:

<div id="knockOutBinding">
   <div data-bind="foreach: ModelItems, jqAccordion: {}">
      <h3>An Element Title</h3>
      <div>Some Content</div>
   </div>
   <button data-bind="click: AddNewItem">Add New Item</button>
</div>

最后我最初填充并绑定它

var modelCollectionApp = new ModelCollection();

var modelItem = new ModelItem();
modelItem.Name = "test1";
modelCollectionApp.ModelItems.push(modelItem);

var modelItem = new ModelItem();
modelItem.Name = "test2";
modelCollectionApp.ModelItems.push(modelItem);

ko.applyBindings(modelCollectionApp, document.getElementById("knockOutBinding"));

1 个答案:

答案 0 :(得分:1)

事实证明,对于版本3中的JQueryUI Widgets和Knockout,事情已经彻底改变了。

Evan在这里解释https://groups.google.com/forum/#!searchin/knockoutjs/accordion/knockoutjs/OX6Lp_I_LoY/472sLkF5MTcJ

底线是在我的代码中绑定手风琴时:

<div data-bind="foreach: ModelItems, jqAccordion: {collapsible: true}">

之前,您会传递“{collapsible:true}”等配置选项。这适用于旧版本,但现在已经改变了。你应该传递“ViewModel”。

<div data-bind="foreach: ModelItems, jqAccordion: ModelItems">

需要改变的另一件事是你必须调用ko.unwrap

的更新方法
var options = valueAccessor();
ko.unwrap(options)  // <-- this is important!

如果你想自定义手风琴,你必须在绑定的init部分这样做:

init: function (element, valueAccessor) {
   var options = {
      collapsible: true,
      active: false,
      animate: "easeOutQuint",
      heightStyle: "content"
   };

   $(element).accordion(options);
   $(element).bind("valueChanged", function () {
      ko.bindingHandlers.jqAccordion.update(element, valueAccessor);
   });
}

这是更新后的JSFiddle http://jsfiddle.net/glenb/M9222/7/

我希望这可以帮助那里的人,如果它对你有所帮助就会提升!