データバインディングによってIDが動的に設定されている場合、mdl-menuリストが開かない

Question

データバインディングにknockoutJSを使用しています。私はコメントのリストをループし、各コメントにmdl-menuを使用して、編集や削除のようなコメントの管理オプションを提供し、対応するコメントidに従って各コメントのメニューアイコンのidを設定しています。したがって、idのコメント1番目のコメントは「コメント1」、「for」属性の「mdl」メニューリストは「コメント1」となります。メニューアイコンをクリックすると、componentHandler.upgradeDom（）を使用して要素を再度登録しますが、メニューはまだ開きません。

Answer 1

バインディングハンドラを使用して試行しました。メニューアイコンをクリックするとメニューが表示されます。追加ボタンをクリックして新しいメニュー項目を追加します。

あなたは以下を実行することができ、またはあなたがjsfiddleでそれを変更したい場合は、それは我々がより多くの情報（エラーメッセージ、コードサンプルなど）を必要とする、ここでhttps://jsfiddle.net/7zop2n9j/7/

ko.bindingHandlers.mdmemenu = { 
 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings); 
 
    var source = allBindings.get('menuOptions'); 
 
    var sourceUnwrapped = ko.unwrap(source); 
 
    var myId = valueAccessor()(); 
 
    var myHtml = '<button id = "' 
 
    myHtml = myHtml + myId; 
 
    myHtml = myHtml + '"' 
 
    myHtml = myHtml + 'class="mdl-button mdl-js-button mdl-button--icon">'; 
 
    myHtml = myHtml + ' <i class="material-icons">more_vert</i>' 
 
    myHtml = myHtml + '</button>' 
 
    myHtml = myHtml + ' <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"' 
 
    myHtml = myHtml + 'for = "' 
 
    myHtml = myHtml + myId; 
 
    myHtml = myHtml + '"' 
 

 
    myHtml = myHtml + '</ul>' 
 
    $(element).append(myHtml); 
 
    componentHandler.upgradeDom(); 
 
    }, 
 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
    var value = valueAccessor(); 
 
    ko.bindingHandlers.value.update(element, valueAccessor); 
 
    $(element).empty(); 
 
    var source = allBindings.get('menuOptions'); 
 
    var sourceUnwrapped = ko.unwrap(source); 
 
    var myId = valueAccessor()(); 
 
    var myHtml = '<button id = "' 
 
    myHtml = myHtml + myId; 
 
    myHtml = myHtml + '"' 
 
    myHtml = myHtml + 'class="mdl-button mdl-js-button mdl-button--icon">'; 
 
    myHtml = myHtml + ' <i class="material-icons">more_vert</i>' 
 
    myHtml = myHtml + '</button>' 
 
    myHtml = myHtml + ' <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"' 
 
    myHtml = myHtml + 'for = "' 
 
    myHtml = myHtml + myId; 
 
    myHtml = myHtml + '"' 
 
    $.each(sourceUnwrapped, function(i, item) { 
 
     myHtml = myHtml + '<li class="mdl-menu__item">' + item.myText() + '</li>' 
 
    }); 
 
    myHtml = myHtml + '</ul>' 
 
    $(element).append(myHtml); 
 
    componentHandler.upgradeDom(); 
 
    } 
 
}; 
 

 
function menuOption(myText) { 
 
    var self = this; 
 
    this.myText = ko.observable(myText); 
 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.menuOptions = ko.observableArray() 
 
    this.myId = ko.observable('demo-menu-lower-left'); 
 
    this.addRow = function() { 
 
    self.menuOptions.push(new menuOption('new menu item')); 
 
    } 
 

 
} 
 

 
var myViewModel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(myViewModel); 
 
    myViewModel.menuOptions.push(new menuOption('Some Action')); 
 
    myViewModel.menuOptions.push(new menuOption('Another Action')); 
 
    myViewModel.menuOptions.push(new menuOption('Disabled Action')); 
 
    myViewModel.menuOptions.push(new menuOption('Yet Another Action')); 
 
});

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 

 
<div data-bind="mdmemenu: myId, menuOptions: menuOptions "></div> 
 

 
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> 
 
    <i class="material-icons" data-bind="click:addRow">add</i> 
 
</button>