Question

这是我正在接线的代码

var list = hyperHTML.wire(doc)`
                <li class=${['chatEl', 'dropInChat', isUnsynced, docType, isChatShown, isUnread, userType].join(' ')} rel=${doc.id}>
                    <div class=${['chatAvatar', avatarNumCss].join(' ')} style=${avatarCss} >${[multiAvatar]}</div>
                    <div class='chatTypeIndicator'></div>
                    <div class='chatListItem'>
                        <div class='chatLastMessage'>
                            ${wire(doc)`<h4><span class="userName">${name}</span>${handle !== '' ? wire(doc)`<span class="handle">@${handle}</span>` : ''}</h4>`}
                            ${((hasEmojie) ? wire(doc)`<div class="has-emoji">${[emojione.shortnameToImage(content)]}</div>` : wire(doc)`<div class="media-attached-last-msg">${[emojione.unicodeToImage(doc.type === 'txt' ? msgTODisplay : content)]}</div>` )}
                        </div>
                        <div class=${['chat-list', 'chat-date-time'].join(' ')} data-livestamp=${posted}> ${outDate} </div>
                            ${wire(doc)`<div class=${notifDiv}></div>`}
                        <div class='delBtn'>
                            <a class = 'blockFromChat' href="#"></a>
                            <a class = 'favFromChat' href="#"></a>
                            <a class = 'delFromChat' href="#"></a>
                        </div>
                    </div>
                </li>`

            return list;

内部变量将计算所需的输出

var now = moment();
        var posted = moment(doc.date);
        var outDate = '';
        if(now.date() === posted.date() && now.month() === posted.month() && now.year() === posted.year()){
            outDate = posted.format('h:mm A');
        }else if(now.date() - 7 <= posted.date() && now.month() === posted.month() && now.year() === posted.year()){
            outDate = posted.format('ddd');
        }else{
            outDate = posted.format('MM/DD/YYYY');
        }

上面是计算时间戳 outDate 的地方，下面是wire（）中使用的 multiavatar 变量

multiAvatar.push（导线（）<div class=${['groupAvatar', 'g_'+ avatarNum].join(' ')} style=${{backgroundImage: 'url(' + miniAvatarUrl + ')', backgroundSize: 'cover'}}></div>）

以下代码是我绑定dom的地方。

bind(document.querySelector('#chatListDisplay'))`
                ${lastMessageList.map(function(doc){
                    return hyperRenderChatList(doc);
                })}`

以下是DOM的输出：

<li class="chatEl dropInChat  private isShown   " rel="57abce9a0b4a520100a3e591" style="display: block;" __plugindomid="pgm272917962927">
<div class="chatAvatar undefined" style="background-image: url(img/ProfileIcon.svg); background-size: cover;" __plugindomid="pgm1289375326530"></div>
<div class="chatTypeIndicator"></div>
<div class="chatListItem" __plugindomid="pgm655347260182">
    <div class="chatLastMessage" __plugindomid="pgm550534885881">
        <h4 __plugindomid="pgm1452658781039"><span class="userName" __plugindomid="pgm188048463623">Displace Hashery </span><span class="handle" __plugindomid="pgm1268924787529">@Displace</span></h4>F
    </div>
    <div class="chat-list chat-date-time needs_to_be_rendered" datetime="2018-03-01T04:39:28.424Z" __plugindomid="pgm41746152612">7 minutes ago</div>
    <div class="chat-message-status delivered" __plugindomid="pgm1045616861867"></div>
    <div class="delBtn" __plugindomid="pgm1469370042923">
        <a class="blockFromChat" href="#" __plugindomid="pgm1287760548168"></a>
        <a class="favFromChat" href="#" __plugindomid="pgm648316158041"></a>
        <a class="delFromChat" href="#" __plugindomid="pgm775096736090"></a>
    </div>
</div>

__ plugindomid 属性由google-maps设置。

Hyperhtml仍然重新呈现整个dom

0 个答案: