Google MDL - 在 jquery 中创建卡片仅显示文本 - 没有背景或边框

Question

我有以下代码可以即时创建 MDL 卡

                        var resultsHolder   = $('#resultsHolder');
                        var gridHolder      = $('<div>',{ 'class' : 'mdl-grid' });
                        var card            = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' });
                        var title           = $('<div>',{'class' : 'mdl-card__title'});
                        var h4              = $('<h4>');
                        var supportingText  = $('<div>',{'class' : 'mdl-card__supporting-text'});
                        var supportingPara  = $('<div>',{'class' : 'projectDesc'});

                        h4.append($('#projectName').val());
                        title.append(h4);

                        supportingPara.append($('#projectDesc').val());
                        supportingText.append(supportingPara);

                        card.css('width','100%');
                        card.append(title);
                        card.append(supportingText);

                        gridHolder.append(card);
                        resultsHolder.prepend(gridHolder);

                        componentHandler.upgradeElement(resultsHolder);

当新卡片的内容出现时。没有出现任何边框或背景。

我看过下面的链接

How can I update/refresh Google MDL elements that I add to my page dynamically?

但使用以下任何一种；

• componentHandler.upgradeDom();
• componentHandler.upgradeElement();

通过持卡人的类 - $('#resultsHolder')

似乎没有任何区别。

那么我怎样才能让我的完整卡片出现。

Answer 1

最终不是使用 JQuery 而是使用原始 JavaScript 来创建元素来管理它。因此，创建卡片、标题、支持文本和操作的修订版本如下：

var resultsHolder   = document.getElementById('resultsHolder');
var gridHolder      = document.createElement('div');
var card            = document.createElement('div');
var title           = document.createElement('div');
var h4              = document.createElement('h4');
var supportingText  = document.createElement('div');
var supportingPara  = document.createElement('p');
var cardActions     = document.createElement('div');
var detailButton    = document.createElement('button');

try {
    // assign classes
    gridHolder.className        = 'mdl-grid';
    card.className              = "mdl-card mdl-shadow--2dp data-display";
    title.className             = 'mdl-card__title';
    supportingText.className    = 'mdl-card__supporting-text';
    supportingPara.className    = 'projectDesc';
    cardActions.className       = 'mdl-card__actions mdl-card--border mdl-typography--text-right';
    detailButton.className      = 'mdl-button mdl-js-button mdl-js-ripple-effect';

    // add special styles
    card.style.width        = '100%';
    // card.style.opacity      = '0';

    // add text
    h4.innerHTML                = $('#projectName').val();
    supportingPara.innerHTML    = $('#projectDesc').val();
    detailButton.innerHTML      = 'Details';  

    // build the title
    title.appendChild(h4);

    // build the supporting text
    supportingText.appendChild(supportingPara);

    // build the actions
    cardActions.appendChild(detailButton);

    // build the card
    card.appendChild(title);
    card.appendChild(supportingText);
    card.appendChild(cardActions);

    gridHolder.appendChild(card);
    resultsHolder.insertBefore(gridHolder,resultsHolder.firstChild);

    // now upgrade components so they are handled correctly by mdl
    componentHandler.upgradeDom(gridHolder);
}
catch(e) {
    alert( e );
}

Answer 2

尝试$('#resultsHolder')[0] 使用这些功能。