CODEWITHSUNDEEP
javascriptjquerymithril.js
Raaz
Raaz

Reputation: 1771

modify html after mithrill component loads

This is a piece of my vdom

m('.w-row', _.map(ctrl.posts(), (post) => {
                        return m('.w-col.w-col-4.col-blog-post',
                            [
                                m(`a.link-hidden.fontweight-semibold.fontsize-base.u-marginbottom-10[href="${post[2][1]}"][target=\'__blank\']`, post[0][1]),
                                m('.fontsize-smaller.fontcolor-secondary.u-margintop-10', m.trust(`${post[1][1]}`))
                            ]
                        );
                    })),

In the part m.trust('${post[1][1]}') I get a part of html. What I want to do with that html is add target _blank for each link in that html. I have tried adding config inside the trust but that function is not executing. Any idea how i can do that.

Here is my js to add target _blank to the html

var div = document.getElementsByClassName('medium-feed-item');
div[0].getElementsByTagName('a');
div[0].getElementsByTagName('a')[0].setAttribute('target', '_blank');

Upvotes: 0

Views: 82

Answers (1)

Barney
Barney

Reputation: 16456

You need to put the config call in the node above the m.trust:

m('.w-row', _.map(ctrl.posts(), post =>
  m('.w-col.w-col-4.col-blog-post',
    m(`a.link-hidden.fontweight-semibold.fontsize-base.u-marginbottom-10[href="${post[2][1]}"][target=\'__blank\']`, post[0][1]),
      m('.fontsize-smaller.fontcolor-secondary.u-margintop-10', {
        config(el){
          _.map(el.querySelectorAll('a:not([target=__blank])'), el =>
            el.setAttribute('target', '__blank')
          )
        }
      },
        m.trust(`${post[1][1]}`)
      )
    )
  )
)

Upvotes: 2

Related Questions