2012-02-03 61 views
2

我試圖使用dropkick.js在Web應用程序中構建下拉菜單。我喜歡dropkick.js,因爲它支持鍵盤和很好的定製主題功能。但是,它似乎只適用於靜態菜單;當我動態更新原始元素(使用knockout.js綁定)時,dropkick.js菜單不會更新。如何動態更新dropkick.js下拉菜單中的選項?

爲了澄清,問題在於,以編程方式更改selectedChannel(或通道列表本身)的值不會導致更新下拉列表。另一種方式確實有效(點擊下拉菜單,查看selectedChannel變量更新)。

可以通過修改dropkick.js(或者使用自定義的knockout.js綁定?)來獲得解決這個問題的現有解決方案的鏈接,或者指導如何解決這個問題。或者,也許它可以/應該工作,但我做錯了什麼?

結合使用knockout.js:

<select id="channelSelector" data-bind="options: channels, optionsText: 'name', optionsValue: 'id', value: selectedChannel"></select> 

設置代碼:

$('#channelSelector').dropkick(); 

更新代碼使用knockout.js這確實原因下拉列表來更新其選擇的值:

vm.selectedChannel(vm.channels()[0].id); 

問題示例:http://jsfiddle.net/37QvY/

+0

寬度問題呢? http://stackoverflow.com/questions/11769888/how-to-individually-target-multiple-dropdowns-in-css-for-dropkick-plug-in – user1318135 2012-08-02 23:07:48

回答

1

我已經爲你一個可行的腳本關於selectedChannel

http://jsfiddle.net/helk/AFtSS/1/

乾杯更新!

+0

謝謝你的努力!不幸的是,這是另一個方向不起作用:更改變量,請參閱UI更新。這是一個更新的小提琴來演示問題。 [http://jsfiddle.net/37QvY/](http://jsfiddle.net/37QvY/) – OfficerJoe 2012-02-04 01:28:33