與jQueryUI的手風琴和Knockoutjs遇到問題

Question

我已經能夠複製這裏的問題：http://jsfiddle.net/NE6dm/

我有以下的HTML我使用在應用其中：

<div data-bind="foreach: items, jqAccordion: { active: false, collapsible: true }"> 
     <h3> 
      <a href="#" data-bind="text: title"></a> 
     </h3> 
     <div>  
      hello 
     </div> 
</div> 
<button title="Click to return to the complaints list." data-bind="click: addItem">Add Item</button> 

的想法是顯示一組將通過Knockout可觀察數組動態添加/刪除的項目的手風琴。

下面是我用一些JavaScript代碼：

// Tab. 
var tab = function (questionSet) { 
    this.id = questionSet.code; 
    this.title = questionSet.description; 
    this.questionSet = questionSet; 
}; 

定製淘汰賽結合的處理程序：

ko.bindingHandlers.jqAccordion = { 
     init: function (element, valueAccessor) { 
      var options = valueAccessor(); 
      $(element).accordion(options); 
      $(element).bind("valueChanged", function() { 
       ko.bindingHandlers.jqAccordion.update(element, valueAccessor); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var options = valueAccessor(); 
      $(element).accordion('destroy').accordion(options); 
     } 
    }; 

var NonSequentialViewModel = function() { 
    var items = ko.observableArray(); 

    items.push(new tab({ id: 23, description : 'Added Inline' })); 

    var addItem = function() { 
     items.push(new tab({ id: 5, description: 'Added by a click' })); 
    }; 

    return { 
     addItem: addItem, 
     items: items 
    } 
} 

var nonsequentialViewModel = new NonSequentialViewModel();  

ko.applyBindings(nonsequentialViewModel); 

現在的問題是這樣的 - 當我查看HTML頁面，該項目「新增內嵌」看起來很好，因爲我可以崩潰並擴大它。但是，當我點擊'添加項目'按鈕時，一個新項目被添加到手風琴中，但它根本沒有樣式。例如：

在上述圖像中，第一項被正確的風格，但是其餘的項目有沒有施加了jQuery UI造型。基本上，動態添加的任何項目都沒有應用任何手風琴式樣。

我已經看到了這個問題

knockout.js and jQueryUI to create an accordion menu

，我已經使用包含在問題的jsfiddle試過，但我不明白爲什麼我的代碼不會有同樣的結果。

我希望別人之前經歷過，並可以提供幫助。

編輯：

我已經研究過這進一步看到的是，問題是這樣的 - 當我添加一個新的項目到oservable陣列，不執行自定義處理的update方法。因此，手風琴的重新繪製從未發生過。我不明白爲什麼不應該調用update。這是realyl我的頭腦！ :)

編輯： 我已經能夠在這裏重現問題：http://jsfiddle.net/NE6dm/

Answer 1

你NonSequentialViewModel構造函數不返回items陣列。更新return聲明如下：

return { 
    items: items, 
    addItem: addItem 
} 

這裏是工作提琴：http://jsfiddle.net/vyshniakov/MfegM/323/

Answer 2

老問題，但我相信我有同樣的問題。 我可能需要向knockout.js提交錯誤。我花了幾個小時試圖找出類似的問題。

簡而言之...如果我加載你的jsfiddle並將淘汰賽版本更改爲2.1.0，它似乎工作正常。 這樣的：

<script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.debug.js"></script> 

這樣：

<script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script> 

（唯一的區別是版本2.2.0 - > 2.1.0）

而且......我最終定居在幾個版本：jQuery的 ：1.9.1 jQuery的UI（組合）：1.9.2 knockoutjs：2.1.0