0
knockoutjs foreachバインディングで動的に生成されるコード内にmaterializecss javascriptドロップダウン（http://materializecss.com/dropdown.html）を使用しようとすると、ドロップダウンオプションがクリックされても表示されません。knockoutjsとmaterializecss javascriptドロップダウン
<ul class="list" data-bind="foreach: items">
<li>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#'
data-bind="attr: {'data-activates': 'dropdown' + $index()}">Drop Me!</a>
<!-- Dropdown Structure -->
<ul data-bind="attr: {id: 'dropdown' + $index()}" class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
</li>
</ul>
Materializecssは、ドロップダウンがしかし
$(".dropdown-button").dropdown();
で初期化されなければならないと言い、これは効果がないようです。
ご協力いただければ幸いです。私はknockoutjsフォーラムや他の場所でヘルプを見つけることができませんでした。
EDIT - 完全な作業モデル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script >
function ItemsViewModel() {
var that = this;
function collectionItem(root, title) {
var self = this;
self.title = ko.observable(title);
};
that.items = ko.observableArray();
that.loadItems = function() {
for (var i = 0, j = 5; i < j; i++) {
that.items.push(new collectionItem(that,"title"+ i.toString()));
}
};
};
ko.bindingHandlers.materializeDropdown = {
init: function (element, valueAccessor) {
$(element).dropdown();
},
update: function (element, valueAccessor, allBindings) {
}
};
var itemsViewModel;
$(document).ready(function() {
itemsViewModel = new ItemsViewModel();
ko.applyBindings(itemsViewModel, $("#divForItemsViewModel").get(0));
itemsViewModel.loadItems();
});
</script>
<div id="divForItemsViewModel">
<ul class="list" data-bind="foreach: items">
<li>
<div data-bind="text:title"></div>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#'
data-bind="attr: {'data-activates': 'dropdown' + $index()}, materializeDropdown">Drop Me!</a>
<!-- Dropdown Structure -->
<ul data-bind="attr: {id: 'dropdown' + $index()}" class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
</li>
</ul>
<a class='dropdown-button btn' href='#'
data-activates="dropdownx">Drop Me THIS WORKS</a>
<ul id="dropdownx" class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
</div>
</body>
</html>
あなたの*質問*は技術的には偽薬ではありませんが、私はほぼ逐語的に繰り返すでしょう[これは私がしばらく前に書いた]（http://stackoverflow.com/a/34394679/419956）。 – Jeroen
ありがとうございました。はい、この質問を投稿する前に私はあなたの答えを研究し、私はちょうどフェデのカスタムバインディングを試みたが、それは助けに見えなかった。トリガーをコンテンツにリンクするための鍵は、トリガでのデータバインディングとターゲット上のIDバインディングです。値は同じでなければなりません。私はそれらを正しく設定していると思います。 –
このUIプラグインを統合するためのカスタムバインドを使用することは必須であるに過ぎません。あなたがそうするように初期化することは、私が実際には決して働かないと思う限りです。どちらの場合でも（カスタムバインディングの有無にかかわらず）、質問のコードを[mcve]に拡張すると便利です。 – Jeroen