nolimits4web

/*==================================================
 * Awesome Plugin 1.0.0
 * Awesome plugin for Framework7 0.8.6+
 *
 * http://www.path.to/plugin/home/page
 *
 * Copyright 2010-2014, John Doe
 * The Company
 * http://www.path.to/developer/home/page
 *

nolimits4web

export default {
  name: 'my-card',
  render() {
    return (
      <div className="card" id="some-id">
        <p>This is card</p>
      </div>
    );
  }
}

nolimits4web

import React from 'react';

class MyCard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return React.createElement(
      'div',
      {

nolimits4web

export default {
  name: 'my-card',
  render() {
    const _h = this.$createElement;
    return _h(
      'div',
      {
        class: 'card',
        attrs: {
          id: 'some-id',

nolimits4web

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      <div class="list simple-list">
        <ul>

nolimits4web

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      <div class="list simple-list">
        <ul>

nolimits4web

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      {{#if user}}
      <!-- Show user list when it is loaded -->

nolimits4web

<!-- new "es" attribute to treat it as template literal -->
<template es>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      <!-- use conditional (ternary) operator instead of if/else -->

nolimits4web

<template es>
  ...
  ${this.users.map((user, index) => `
    <div class="list simple-list" data-index="${index}" data-id="${user.id}">
      <ul>
        <li>First Name: ${user.firstName}</li>
        <li>Last Name: ${user.lastName}</li>
        <li>Age: ${user.age}</li>
      </ul>
    </div>

nolimits4web

<div class="navbar">
  <!-- new required navbar-bg element -->
  <div class="navbar-bg"></div>
  
  <div class="navbar-inner">
    <!-- ... -->
  </div>
</div>