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]代替这些功能。

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

2 个答案: