leonidas / transparency

Transparency is a semantic template engine for the browser. It maps JSON objects to DOM elements by id, class and data-bind attributes.
http://leonidas.github.com/transparency/
MIT License
969 stars 112 forks source link

setting textContent via directive should not produce textContent as attribute element #114

Open dariuszparys opened 11 years ago

dariuszparys commented 11 years ago

Not sure if I understand the concept of directives right, here is what I want to do:

// object
var people = [
  { name: "Dariusz", twitter: "writeline" },
  { name: "Daniel", twitter: "dmx" },
  { name: "Peter", twitter: "peterkirchner" }
];

// template
<ul class="people">
  <li><span class="name"></span><a href="#" class="twitter"></a></li> 
</ul>

// directives
var directives = {
  twitter: {
    href: function() {
      return "http://twitter.com/" + this.twitter;
    },
    textContent: function() {
      return "@" + this.twitter;
    }
  }
};

// render output
<ul class="people">
  <li><span class="name">Dariusz</span><a textcontent="@writeline" href="http://twitter.com/writeline" class="twitter">@writeline</a></li> 
  <li><span class="name">Daniel</span><a textcontent="@dmx" href="http://twitter.com/dmx" class="twitter">@dmx</a></li> 
  <li><span class="name">Peter</span><a textcontent="@peterkirchner" href="http://twitter.com/peterkirchner" class="twitter">@peterkirchner</a></li> 
</ul>

I would not expect textcontent as attribute in the output. Can anyone comment on this?

matths commented 11 years ago

Hi Dariusz, why are you using 'textContent:' at all? just write 'text:' instead, and I think it will do, what you want. Br, Matthias

dariuszparys commented 11 years ago

I know that I can use text instead, but textContent is a valid and legitime way to set the content of an HTMLElement. I mean basically it works, but the created element attribute on the rendered node could cause conflicts suppose that someone uses exactly textcontent as attribute name on the element for a total different purpose.