[v2] JSX with vhtml.js and async templating

This is a enhancement

Actually I need something like this:

component: {
  asyncTemplate: (render) => {
    request(...)
       .then(html => {
         render(html)
       })
  }
}

There any way to exists this method?

Other idea is allow to return dom elements in .render() or/and .template() methods like this:

component: {
  render: () => {
    return domElement
  },
  // or
  render: domElement
}

This would be awesome because allows developers to uses libs like jsx-dom or vhtml and do something beautiful like this:

component: {
  render: () => {
    return (
      <div class="page">
        <div class="page-content">
          {items.map(item, =>
            <div class="whatever"></div>
          )}
        </div>
      </div>
    )
  },
}

[nolimits4web]

Agree, there probably could be some kind of babel jsx plugin to understand custom attributes. I see Vue js have their own babel jsx plugin.

But anyway, if you are going to use babel, you can just use es-next templates to achieve almost the same:

...
render() {
  const self = this;
  const { items } = self;
  return `
    <div class="foo">
      <h1>Hi!</h1>
      <p @click="test">Here is a list of ${items.length} items:</p>
      <ul>
        ${items.map(item => `
          <li>${item}</li>
        `).join('')}
      </ul>
    </div>
  `;
},
data() {
  return {
    items: ['one', 'two', 'three'],
  }
},
...

[nolimits4web]

Issue is closed because of outdated, irrelevant or not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue