0

ウェブサイトを最新の JQuery、JQueryUI、KnockOutJS に更新しました。

それ以来、監視可能な配列に項目を追加すると、アコーディオンが更新を拒否します。これは、JQuery の古いバージョンで KnocKOutJS バージョン 2.0.0 を使用する場合に問題なく機能します。

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"));
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 を呼び出さなければならない update メソッドでした。

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 に答える