は、私はマテリアルデザインライトとノックアウトの両方にかなり新しいですし、私は動的な材料設計のコンポーネントを追加するために必要な手順を把握しようとしています、

Question

おはよう

をKnockout.jsを使用した動的マテリアルデザインのコンポーネントの追加します。私はここで何か基本的なものを欠いているように感じる。 https://getmdl.io/components/index.html#cards-section

とカードの右下隅にコンテキストメニュー （https://getmdl.io/components/index.html#menus-section）を追加してい：：

私はせずに、動的に新しいカードを追加することができ、私は彼らの基本的な例の一つを使用してカードを追加してい

動的に追加されたカードで動作するコンテキストメニューを取得することはできません。

JSFiddle：（https://jsfiddle.net/tychonomega/dyj0jLw1/）

HTML

<div class="demo-card-wide mdl-card mdl-shadow--2dp"> 
    <div class="mdl-card__title"> 
    <h2 class="mdl-card__title-text">Welcome</h2> 
    </div> 
    <div class="mdl-card__supporting-text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... 
    </div> 
    <div class="mdl-card__actions mdl-card--border"> 
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
      Get Started 
     </a> 
    <!-- Right aligned menu on top of button --> 
    <button id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon pull-right"> 
     <i class="material-icons">more_vert</i> 
    </button> 

    <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-right"> 
     <li class="mdl-menu__item">Some Action</li> 
     <li class="mdl-menu__item">Another Action</li> 
     <li disabled class="mdl-menu__item">Disabled Action</li> 
     <li class="mdl-menu__item">Yet Another Action</li> 
    </ul> 
    </div> 
    <div class="mdl-card__menu"> 
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
     <i class="material-icons">share</i> 
    </button> 
    </div> 
</div> 

<button data-bind="click: addNewCard">Add New Card</button> 


<div id="cardContainer" data-bind="foreach: apis"> 
    <div class="demo-card-wide mdl-card mdl-shadow--2dp"> 
    <div class="mdl-card__title"> 
     <h2 class="mdl-card__title-text">Welcome, <span data-bind="text: titleValue"></span></h2> 
    </div> 
    <div class="mdl-card__supporting-text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... 
    </div> 
    <div class="mdl-card__actions mdl-card--border"> 
     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
       Get Started 
      </a> 
     <!-- Right aligned menu on top of button --> 
     <button data-bind="attr: {id: 'cardMoreButton_' + $index() }" class="mdl-button mdl-js-button mdl-button--icon pull-right"> 
     <i class="material-icons">more_vert</i> 
     </button> 

     <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-bind="attr: {'data-mdl-for': 'cardMoreButton_' + $index() }"> 
     <li class="mdl-menu__item">Some Action</li> 
     <li class="mdl-menu__item">Another Action</li> 
     <li disabled class="mdl-menu__item">Disabled Action</li> 
     <li class="mdl-menu__item">Yet Another Action</li> 
     </ul> 
    </div> 
    <div class="mdl-card__menu"> 
     <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
     <i class="material-icons">share</i> 
     </button> 
    </div> 
    </div> 
</div> 

はJavaScript

function CardModel(title) { 
    var self = this; 

    self.titleValue = ko.observable(title); 
} 


var MdlViewModel = function() { 

    var self = this; 
    this.apis = ko.observableArray(); 


    self.addNewCard = function() { 
    alert("Adding new APIModel!"); 
    self.apis.push(new CardModel("HELLO!!!")); 

    } 
}; 
ko.applyBindings(new MdlViewModel()); 

私の最終的な目標は、removeのように、そのコンテキストメニューでいくつかのオプションを持っていることであろう、サーバーからリフレッシュするなどの処理を行います。

ボタンの上のカードは、私が達成しようとしているものの例として見ることができます。

動的に生成されたコンテンツでコンテキストメニューが機能しない理由を教えてください。動作後にアクションをバインドする方法を示すことができるならば、ボーナスポイントを得ることができます:)

私は自分自身で答えを見つけようとしましたが、こちらも検索しました。私はこれが私が探しているものがわからない場合の1つかもしれないと思います。

Answer 1

答えがここに発見された：https://github.com/google/material-design-lite/issues/855

私は私のaddNewCard javascript関数で

componentHandler.upgradeDom('MaterialMenu', 'mdl-menu'); 

を使用。

<script type="text/javascript"> 
    function CardModel(title) { 
     var self = this; 

     self.titleValue = ko.observable(title); 
    } 


    var MdlViewModel = function() { 

     var self = this; 
     this.apis = ko.observableArray(); 


     self.addNewCard = function() { 
      self.apis.push(new CardModel("HELLO!!!")); 
      window.componentHandler.upgradeDom('MaterialMenu', 'mdl-menu'); // added here 
     } 
    }; 
    ko.applyBindings(new MdlViewModel()); 
</script> 

となっています。興味深いことに、それをフィドルに追加してもそこの問題は解決されませんが、それは私のコードであります。