Парсинг html-кода с помощью jQuery

Я использую новый material-design-lite (mdl) на своем веб-сайте. Я также загружаю динамический контент, используя mustache.js.

Теперь вновь созданные элементы необходимо зарегистрировать с помощью функции upgradeElement, чтобы mdl узнал о них и применил к ним javascript. На их веб-сайте есть пример кода для этого:

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

Однако я использую jQuery и не совсем понимаю, как мне проанализировать весь шаблон, полученный от mustache.js, и правильно зарегистрировать каждый компонент. Это то, что я пробовал:

var filledTemplate = '
    <div class="mdl-card mdl-shadow--2dp">
       <div class="mdl-card__title">
           <h2 class="mdl-card__title-text">Title</h2>
       </div>
       <div class="mdl-card__supporting-text">
               <p>A simple paragraph with below some radio buttons</p>
               <p>
                   <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_0">
                       <input type="radio" id="input_0" class="mdl-radio__button" name="options" value="radio1" />
                       <span class="mdl-radio__label">Radio button 1</span>
                   </label>
               </p>
               <p>
                   <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_1">
                       <input type="radio" id="input_1" class="mdl-radio__button" name="options" value="radio2" />
                       <span class="mdl-radio__label">Radio button 2</span>
                   </label>
               </p>
       </div>
       <div class="mdl-card__actions mdl-card--border">
           <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
               Send
           </a>
       </div>
   </div>';

var html = $.parseHTML(filledTemplate);
$(html).find(".mdl-js-button").each(function(){
    componentHandler.upgradeElement($(this));
});

filledTemplate просто дает четкое представление о том, что он может содержать. Мне нужно связать все поля ввода, текстовые поля, ползунки, радио, флажки и кнопку. В приведенном выше примере вы можете увидеть простой макет карты из mdl с двумя переключателями и кнопкой.

Я попытался заставить componentHandler сначала обновить элемент кнопки, но mdl возвращает element.getAttribute is not a function, так что, думаю, я просто даю неправильное значение .upgradeElement().

Что я здесь делаю неправильно?

Вот пример codepen: http://codepen.io/anon/pen/JdByGZ


javascript html jquery material-design-lite
person jdepypere    schedule 17.07.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуйте componentHandler.upgradeElement(this, 'MaterialButton');, если вы хотите обновить только кнопку, или componentHandler.upgradeAllRegistered();, чтобы обновить все элементы.

http://jsbin.com/tuluda/4/edit?js,output

person rafaelcastrocouto    schedule 17.07.2015
comment
покажите мне, как вы привязываете обратный вызов к событию - person rafaelcastrocouto; 19.07.2015
comment
Я не понимаю... кажется, что ссылка выше работает нормально... содержимое добавляется к телу по щелчку... я что-то упустил? - person rafaelcastrocouto; 20.07.2015
comment
Проблема в том, что элементы неправильно зарегистрированы в mdl. Радиокнопки не оформлены, и кнопка не имеет волнистости. Посмотрите мой оригинальный пример из моего вопроса, чтобы увидеть, как он должен выглядеть. - person jdepypere; 20.07.2015
comment
теперь я понимаю... обновил ответ... вот код jsbin.com/ тулуда/4/edit?js, вывод - person rafaelcastrocouto; 20.07.2015
comment
Большое спасибо! Так просто... Извините, если мой вопрос был несколько неясен! - person jdepypere; 20.07.2015

arrow_upward
0
arrow_downward

Я структурировал свое приложение как общий контейнер и набор представлений, загружаемых с помощью jQuery и отображаемых с помощью Hogan. Я вызываю componentHandler.upgradeDom() после вставки шаблонов и, кажется, работает нормально.

Я предполагаю, что это может быть дополнительно оптимизировано, модернизировано с меньшей степенью детализации, но этот простой подход отлично работает в моем приложении Phonegap. Переменные tmpl и content предназначены для облегчения отладки, иначе код можно было бы сделать более компактным.

app.render = function(template, data, destination) {
  $.get(template, function(html) {
    var tmpl = Hogan.compile(html);
    var content = tmpl.render(data);
    $(destination).html(content);
    componentHandler.upgradeDom();
  });
};
person mico    schedule 16.12.2015