pages/item/index.js

index.js

import './index.less'

import qs from 'querystring'
import { throttle } from 'lodash'
import Menu from 'compoents/menu'

import ItemTpl from './tpl/item.html?tpl'

class App {
  constructor () {
    this.menu = new Menu()
    this.init()
  }

  init () {
    this.bindEvents()
    this.loadItems()
  }

  toggleMenu () {
    this.menu.toggle()
  }

  loadItems () {
    const listEl = $('js-list')

    $.ajax(url).then((ret) => {
      listEl.append(ItemTpl.render(ret))
    })
  }

  bindEvents () {
    const el = $(document)

    const EVENTS = {
      '.js-mask': {
        touchmove: (e) => {
          e.preventDefault()
        },

        click: () => {
          this.toggleMenu()
        }
      },

      '.js-load-more': {
        click: (e) => {
          const target = $(e.currentTarget)

          target.parent().remove()

          this.loadItems()
        }
      }
    }

    $.each(EVENTS, (selector, events) => {
      $.each(events, (type, handler) => {
        el.on(type, selector, handler)
      })
    })
  }
}

new App()