Framework7入門　ルーティング・DOM操作・ストアを学ぼう

<link rel="stylesheet" href="framework7/css/framework7.min.css">
<script src="framework7/js/framework7.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@6.3.16/framework7.min.css">
<script src="https://cdn.jsdelivr.net/npm/framework7@6.3.16/framework7.min.js"></script>

<div id="app">
</div>

const $$ = Dom7;

const app  = new Framework7({
  el: '#app', // 展開するDOM
  name: 'Framework7', // アプリ名
  theme: 'auto', // テーマ
  // アプリ全体で利用するデータ（オプション）
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // アプリ全体の共通メソッド（オプション）
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // ルーティング
  routes,
});

const routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/about/',
    url: './pages/about.html',
  },
  // 途中省略
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

<a href="/about/" class="item-content item-link">
    <div class="item-inner">
        <div class="item-title">About</div>
    </div>
</a>

<div class="page" data-name="about">
    <!-- HTMLの内容 -->
</div>

const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // 省略
  {
    path: '/product/:id/',
    componentUrl: './pages/product.html',
  },
}

<template>
  <div class="page">
        <!-- 省略 -->
    </div>
</template>
<!-- CSS設定 -->
<style>
</style>
<!-- JavaScript -->
<script>
  export default function (props, {$f7, $on}) {
    return $render;
  }
</script>

return function ($ctx) {
  var $ = $ctx.$;
  var $h = $ctx.$h;
  var $root = $ctx.$root;
  var $f7 = $ctx.$f7;
  var $f7route = $ctx.$f7route;
  var $f7router = $ctx.$f7router;
  var $theme = $ctx.$theme;
  var $update = $ctx.$update;
  var $store = $ctx.$store;
  return $h`
  // <template>タグ内で定義したHTMLの内容
  `
};

<template>
  <div class="page">
    <h1>${a}</h1> <!-- ここに出力されます -->
    </div>
</template>
<!-- JavaScript -->
<script>
  export default function (props, {$f7, $on}) {
    const a = 'Hello'; // ここで変数を定義しています
    return $render;
  }
</script>

<template>
  <div class="page">
    <button @click=${func}>ボタン</button> <!-- スクリプトで定義した関数を指定します -->
    </div>
</template>
<!-- JavaScript -->
<script>
  export default function (props, {$f7, $on}) {
    // HTML側で指定したイベント
    function func() {
      // ボタンを押した時の処理
      alert('ボタンを押した！');
    }
    return $render;
  }
</script>

const routes = [
  {
    path: '/request-and-load/user/:userId/',
    // 非同期処理の場合
    async: function ({ router, direction, to, from, resolve, reject }) {
      // 非同期処理を書きます
      // 完了後にresolveを呼びます
      resolve({
        componentUrl: './pages/request-and-load.html',
      },
      {
        props: {
          user,
      });
    },
  },
  // 省略
];

// 表示
app.preloader.show();
// 非表示
app.preloader.hide();

resolve({
  componentUrl: './pages/request-and-load.html',
},
{
  props: {
    user,
  }
});

$f7router.navigate(/request-and-load/user/${userId}/, {
  props: {
    user,
  },
});

export default function (props, {$f7, $on}) {
  // 前画面からのデータ引き渡し
  const { user } = props;
  return $render;
}

const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // 省略
  {
    name: 'Product', // nameを利用
    path: '/product/:id/',
    componentUrl: './pages/product.html',
  },
}

$f7router.navigate({
    name: 'Product',
  },
  params: {
    id: '0001',
  },
);

$f7router.back();

<a href="#" class="link back">
  <i class="icon icon-back"></i>
  <span class="if-not-md">Back</span>
</a>

const $$ = Dom7;

<ul>
  ${user.links.map((link) => $h`
    <li>
      <a class="external" target="_blank" href="${link.url}">
        ${link.title}
      </a>
    </li>
  `)}
</ul>

const createStore = Framework7.createStore;
const store = createStore({
  state: {},   // 状態の定義（後述）
  getters: {}, // データの取得（後述）
  actions: {}, // データの操作（後述）
});

const app = new Framework7({
  name: 'My App',
  theme: 'auto',
  el: '#app',
  store: store, // ストアを指定
  routes: routes,
});

const store = createStore({
  state: { // 状態の定義
    products: [
      {
        id: '1',
        title: 'Apple iPhone 8',
      },
      {
        id: '2',
        title: 'Apple iPhone 8 Plus',
      },
      {
        id: '3',
        title: 'Apple iPhone X',
      },
    ]
  },
  // 省略
});

const store = createStore({
  // 省略
  getters: {
    products({ state }) {
      return state.products;
    }
  },
  // 省略
}

export default (props, { $f7route, $store }) => {
  const products = $store.getters.products;
};

const store = createStore({
  // 省略
  actions: {
    addProduct({ state }, product) {
      state.products = [...state.products, product];
    },
  },
});

$store.dispatch('addProduct', {
  id: '4',
  title: 'Apple iPhone 12',
});