3

ウェブサイトで新しい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、それが含むことができるものの明確なアイデアを与えるためのものです。すべての入力、テキストエリア、スライダー、ラジオ、チェックボックス、およびボタンをバインドする必要があります。上記の例では、2 つのラジオ ボックスと 1 つのボタンを含む、mdl からの単純なカード レイアウトを確認できます。

最初にボタン要素をアップグレードするように componentHandler を取得しようとしましたが、mdl が を返すelement.getAttribute is not a functionので、間違った値を に与えているだけだと思います.upgradeElement()。

ここで何が間違っていますか？

例としてコードペンを次に示します: http://codepen.io/anon/pen/JdByGZ

4

2 に答える 2

0

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();
  });
};
于 2015-12-16T18:13:36.893 に答える