淘汰赛observableArray不更新JQuery手风琴 [英] Knockout observableArray not updating JQuery Accordion

问题描述

我已经将网站更新为最新的JQuery，JQueryUI和KnockOutJS.

I have updated my website to the latest JQuery, JQueryUI and KnockOutJS.

从那时起，当我将项目添加到可观察数组中时，我的手风琴就拒绝更新.当将KnocKOutJS版本2.0.0与旧版本的JQuery一起使用时，此方法就很好.

Since then my accordion refuses to update when I add items to my observerable array. This works just fine when using KnocKOutJS version 2.0.0 with older versions for JQuery.

我已经在JSFiddler中重新创建了问题，希望对您有所帮助. javascript是我的实际代码的简化版本.

I have recreated the problem in JSFiddler and would appreciate any help. The javascript is a heavily simplified version of my actual code.

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

任何帮助将不胜感激. 我的模型如下:

Any assistance would be greatly appreciated. My Model looks like this:

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>

最后，我首先将其填充并绑定

Finally I initially populate it and bind it

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"));

推荐答案

因此，与版本3中的JQueryUI Widget和Knockout相比，情况已经发生了巨大变化.

So turns out that things have changed quiet drastically with regards to JQueryUI Widgets and Knockout in version 3.

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

最下面是在我的代码中绑定手风琴的时候:

Bottom line is when binding the accordion in my code:

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

之前，您将传入"{collapsible:true}"之类的配置选项.这在较旧的版本中有效，但现在已更改.您应该改为传递"ViewModel".

Before, you would pass in your config options like "{collapsible: true}". This worked in older versions but now it has changed. You should pass in the "ViewModel" instead.

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

需要更改的另一件事是您必须调用ko.unwrap的更新方法

The other thing that needed to change was in the update method you have to call ko.unwrap

var options = valueAccessor();
ko.unwrap(options)  // <-- this is important!

如果要自定义手风琴，则必须在绑定的init部分中进行如下操作:

If you want to customize the accordion, you have to do it in the init section of the binding like this:

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/

Here is the updated JSFiddle http://jsfiddle.net/glenb/M9222/7/

我希望这可以帮助某个人，如果有帮助，请投票！

I hope this helps someone out there, upvote if it helped you!

这篇关于淘汰赛observableArray不更新JQuery手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！