javascript - 使用 Knockout.js 添加动态 Material 设计组件

Question

早上好，

我对 Material Design Lite 和 Knockout 都很陌生，我正在尝试找出添加动态 Material Design 组件所需的步骤。我觉得我在这里缺少一些基本的东西。

我正在使用其基本示例之一添加卡片: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());

我的最终目标是在该上下文菜单中提供一些选项，例如删除、从服务器刷新等等。

按钮上方的卡片可以视为我想要实现的目标的示例。

知道为什么上下文菜单不适用于动态生成的内容吗？如果您能展示如何在运行后绑定(bind)操作，那就加分了:)

顺便说一句，我确实尝试自己寻找答案并在这里进行了搜索。我认为这可能是我不知道自己在寻找什么的情况之一。

Answer 1

答案在这里找到:https://github.com/google/material-design-lite/issues/855

我用过

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

在我的 addNewCard javascript 函数中。

<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>

现在它正在工作。有趣的是，将其添加到 fiddle 中并不能解决那里的问题，但可以在我的代码中解决。