-1

This is a Question with pug(jade).

As you can see below, i'm looking for ways to output js variables that summarized the contents of attributes. What I am trying to do specifically is trying to make mixin of versatile SNS share buttons.

mixin

mixin shareButton()
 -
  const shareScript = ()=> {
    const hatebu = `
      href="" class="btn btn-b" target="_blank" rel="noopener noreferrer"
      `
    ;

    return hatebu;
  };

a&attributes(`!{shareScript()}`) //- error!    
a&attributes(shareScript()) //- output. but all string sliced…

index.pug

p.btn-share
  +shareButton()

output(HTML)

<p class="btn-share">
  <a 0="h" 1="r" 2="e" 3="f" 4="=" 5="" "="" 6="h" 7="t" 8="t" 9="p" 10=":" 11="/" 12="/" 13="e" 14="x" 15="a" 16="m" 17="p" 18="l" 19="e" 20="." 21="c" 22="o" 23="m" 24="/" 25="t" 26="e" 27="s" 28="t" 29="" 30=" " 31="c" 32="l" 33="a" 34="s" 35="s" 36="=" 37="" 38="b" 39="t" 40="n" 41=" " 42="b" 43="t" 44="n" 45="-" 46="b" 47="" 48=" " 49="t" 50="a" 51="r" 52="g" 53="e" 54="t" 55="=" 56="" 57="_" 58="b" 59="l" 60="a" 61="n" 62="k" 63="" 64=" " 65="r" 66="e" 67="l" 68="=" 69="" 70="n" 71="o" 72="o" 73="p" 74="e" 75="n" 76="e" 77="r" 78=" " 79="n" 80="o" 81="r" 82="e" 83="f" 84="e" 85="r" 86="r" 87="e" 88="r" 89=""></a>
</p>

I hope this output(HTML)

<p>
  <a href="http://example.com/test" class="btn btn-b" target="_blank" rel="noopener noreferrer"></a>
</p>

I don't know how to output a template literal as it is as an attribute of a tag.

How can I do it?

1natsu
  • 11
  • 1
  • Possible duplicate of [Get all Attributes from a HTML element with Javascript/jQuery](https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery) – Aleks Andreev Jul 29 '17 at 09:20
  • 1
    Sorry, I was unsuccessful in entering example code. This is the subject of pug (jade) ... – 1natsu Jul 29 '17 at 10:30

1 Answers1

0

I don't think what you want to do is feasible with that approach. I think you're better off storing the tags as an object map (rather than as a string).

Maybe a code snippet helps illustrate what I propose:

mixin shareButton()
 -
  const shareScript = () => {
    const hatebu = {
      href: "",
      className: "btn btn-b",
      target: "_blank",
      rel: "noopener noreferrer"
    };

    return hatebu;
  };

- const scriptValues = shareScript();
a&attributes(href=scriptValues.href class=className ...) // do the same for 'target' and 'rel', as well
gandreadis
  • 3,004
  • 2
  • 26
  • 38
  • Thank you very much. At first it was trying to do with your writing method of pug in the way of your answer. But since it is a share button of SNS, it can be predicted that code will change with specification change. I thought about how to convert to pug every time, and I felt that it was better to be able to write out the HTML output by the generator, asking how to ask questions. – 1natsu Aug 03 '17 at 03:51