max-mapper / yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals
1.33k stars 65 forks source link

How to use "id" label in html interpolate... #40

Closed C0rporeus closed 8 years ago

C0rporeus commented 8 years ago

good night, need to use by JavaScript code an id, which in turn is in a code fragment interpolated by yo-yo, what I need is to give some attributes , but the project itself does not show me the result is as if the " div " did not exist, thanks for the help .

var el = yo`<div class="timeline"><div class="row">
                  <div class="col m4 l3">
                    ${pictures}
                    ${pictures.map(function (pic) {
                      return picture(pic);
                    })}</div>
                </div>
                <div id="map" class="col m8 l9">
                </div>`

the pictures work well , however the external code does not recognize me ID ...

timwis commented 8 years ago

Hi @C0rporeus, it looks like you're using a double quote yo"<div>" instead of a backtick

yo`<div>`

Can you give the latter a shot and if it still doesn't work, throw a code sample up on requirebin.com?

C0rporeus commented 8 years ago

github I do not assimilating the dual-use "` " to instantiate , why change it by quotation marks. however in the project if I have it correctly.

timwis commented 8 years ago

Understood. Can you show an example using requirebin.com?

shama commented 8 years ago

@C0rporeus I've edited your example by adding three backticks to format a code block, hope you don't mind.

I think the problem is you're attempting multiple top level elements created at the top (it should warn about that in the browser's console). As .timeline and #map are on the same level.

The solution is to wrap your elements in a single top level element:

var el = yo`<div id="toplevel">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>`

Or if you need access to multiple elements, create them individually then put them together:

var one = yo`<div id="topOne"></div>`
var two = yo`<div id="topTwo"></div>`
var el = yo`<div>
  ${one}
  ${two}
</div>`
C0rporeus commented 8 years ago

and solve it , it is that I am managing my project by browserify , express, and yo-yo page . the problem was that my code was to export map that you create for the index with page view and then if he could invoke the HTML element by ID , like thank you very much . yo-yo, it is a simple library, but way too efficient optimizing application performance while allowing the resources we saved the other details we exhaust in data communication . again thank you very much.