Marionette F7 Demo - Home page

home-template.html

<div class="page-content">
  <div class="content-block-title">Welcome</div>
  <div class="content-block">
    <p>Enjoy using Backbone/Marionette with the awesome Framework7!</p>
  </div>

  <div class="content-block-title">Examples</div>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item with no link</div>
        </div>
      </li>
      <li>
        <a href="#" class="item-link item-content single-link">
          <div class="item-inner">
            <div class="item-title">Open page in this view</div>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="item-link item-content popup-link">
          <div class="item-inner">
            <div class="item-title">Open single popup</div>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="item-link item-content login-link">
          <div class="item-inner">
            <div class="item-title">Open login/register popup</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

marionette-f7-demo-home.js

import {View} from 'backbone.marionette'
import {pushPage, showPopup} from 'marionette.f7'
import template from './home-template.html'
import SingleView from '../single/view'
import PopupView from '../popup/view'
import LoginView from '../login/view'

export default View.extend({
  template: Template7.compile(template),

  events: {
    'click .popup-link': 'onPopupLinkClick',
    'click .login-link': 'onLoginLinkClick',
    'click .single-link': 'onSingleLinkClick'
  },

  onLoginLinkClick (e) {
    e.preventDefault()
    pushPage(new LoginView(), 'login')
  },

  onSingleLinkClick (e) {
    e.preventDefault()
    pushPage(new SingleView())
  },

  onPopupLinkClick (e) {
    e.preventDefault()
    showPopup(new PopupView())
  }
})