Marko v4 Multiple Compilation Targets

banner-concise.marko

import styles from './styles';

class {
  onBannerClick(item) {
    alert('click banner:' + item.title);
  }
}

div style=styles.container
  h2 -- Marko Banner:
  div style=styles.list
    for(idx, item in data.items)
      div style=styles.item on-click('onBannerClick', item)
        img src=item.img style=styles.itemImg

banner.marko

import styles from './styles';

class {
  onBannerClick(item) {
    alert('click banner:' + item.title);
  }
}

<div style=styles.container>
  <h2>Marko Banner:</h2>
  <div style=styles.list>
    <for(idx, item in data.items)>
      <div style=styles.item on-click('onBannerClick', item)>
        <img src=item.img style=styles.itemImg >
      </div>
    </for>
  </div>
</div>

compiled.html.js

// ...

function render(data, out, widget, state) {
  out.w("<div" +
    marko_styleAttr(styles.container) +
    marko_attr("id", widget.id) +
    "><h2>Marko Banner: </h2><div" +
    marko_styleAttr(styles.list) +
    ">");

  marko_forEachProp(data.items, function(idx, item) {
    out.w("<div" +
      marko_styleAttr(styles.item) +
      marko_attr("data-_onclick", markoWidgets_event("onBannerClick", widget.id, [
        item.title
      ])) +
      "><img" +
      marko_attr("src", item.img) +
      marko_styleAttr(styles.itemImg) +
      "></div>");
  });

  out.w("</div></div>");
}

// ...

compiled.vdom.js

// ...

function render(data, out, widget, state) {
  out.be("div", {
      style: marko_styleAttr(styles.container),
      id: widget.id
    });

  out.n(marko_node0);

  out.be("div", {
      style: marko_styleAttr(styles.list)
    });

  marko_forEachProp(data.items, function(idx, item) {
    out.e("div", {
        style: marko_styleAttr(styles.item),
        "data-_onclick": markoWidgets_event("onBannerClick", widget.id, [
            item.title
          ])
      }, 1)
      .e("img", {
          src: item.img,
          style: marko_styleAttr(styles.itemImg)
        }, 0);
  });

  out.ee();

  out.ee();
}

// ...