Добавление компонентов Dynamic Material Design с помощью Knockout.js

Доброе утро,

Я довольно новичок как в 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());

Моей конечной целью было бы иметь некоторые параметры в этом контекстном меню, такие как удаление, обновление с сервера и т. д. и т. д.

Карту над кнопкой можно рассматривать как пример того, чего я пытаюсь достичь.

Есть идеи, почему контекстное меню не работает для динамически генерируемого контента? Бонусные баллы, если вы можете показать, как связать действия после того, как они сработают :)

Кстати, я пытался найти ответ самостоятельно и искал здесь. Я думаю, что это может быть один из тех случаев, когда я просто не знаю, что ищу.


javascript html knockout.js material-design-lite
person TychonOmega    schedule 12.07.2017    source источник
comment
stackoverflow.com/a/44209652/392102   -  person Roy J    schedule 12.07.2017
comment
к сожалению, это не решило это для меня, я добавил то, что исправило это для меня, в качестве ответа. Спасибо!   -  person TychonOmega    schedule 13.07.2017

Ответы (1)


arrow_upward
3
arrow_downward

Ответ был найден здесь: https://github.com/google/material-design-lite/issues/855

я использовал

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

в моей функции javascript addNewCard.

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

и сейчас работает. Интересно, что добавление этого к скрипке не решает проблему там, но решает в моем коде.

person TychonOmega    schedule 12.07.2017