0

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

从那时起，当我将项目添加到我的可观察数组时，我的手风琴拒绝更新。当将 KnocKOutJS 2.0.0 版与 JQuery 的旧版本一起使用时，这工作得很好。

我已经在 J​​SFiddler 中重现了这个问题，希望能提供任何帮助。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"));
4

1 回答 1

1

事实证明，关于版本 3 中的 JQueryUI Widgets 和 Knockout，情况发生了巨大变化。

埃文在这里解释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/

我希望这对那里的人有帮助，如果它帮助了你，请点赞！

于 2014-02-27T08:02:07.877 回答