viewlist

FRZR ordered List of Views

installation

// with frzr
npm install frzr

// standalone
npm install @frzr/viewlist

require

// with frzr
var ViewList = require('frzr').ViewList // or frzr.ListView (in case of typo :)

// standalone
var ViewList = require('@frzr/viewlist')

usage

var viewlist = new ViewList(options)

options

• view: custom extended View
• add: triggers when View is added
• sort: triggers when View is reordered
• remove: triggers when View is removed

Any other parameter will be added as a local attribute

Example

// have some data
var items = [{_id: 1, groupA: 1, name: 'Item 1'}, {_id: 2, groupA: 1, groupB: 2, name: 'Item 2'}, {_id: 3, groupB: 2, name: 'Item 3'}]

// define Model
var CustomModel = frzr.Model.extend({
  idAttribute: '_id'
})

// create Collection
var collection = new frzr.Collection({
  idAttribute: '_id',
  model: CustomModel
})  
collection.reset(items)

// define View
var CustomView = frzr.View.extend({
  init: function () {
    this.render()
    this.model.on('change', this.render, this)
  },
  render: function () {
    this.$el.textContent = this.model.get('name')
  },
  template: '<p></p>'
})

// create ViewList
var viewList = new frzr.ViewList({add: add, sort: sort, remove: remove, view: CustomView})
viewList.reset(collection.find('groupA', 1))
viewList.mount(document.body)

setTimeout(function () {
    // trigger update
    viewList.reset(collection.find('groupB', 2))
}, 1000)

function add (id, view, pos) {
  console.log('add:' + id, view, 'to', pos)
}
function sort (id, view, pos, oldPos) {
  console.log('sort:' + id, view, 'from', oldPos, 'to', pos)
}
function remove (id, view, pos) {
  console.log('remove:' + id, view, 'from', pos)
}

methods

• reset(models): resets Views based on models (adds/removes when necessary)
• mount(target): mount to DOM (rest is automatic)
• unmount(): unmount from DOM

events

• add: triggered when View is added
• sort: triggered when View is reordered
• remove: triggered when View is removed