viewcollection

FRZR ViewCollection

installation

// with frzr
npm install frzr

// standalone
npm install @frzr/viewcollection

require

// with frzr
var ViewCollection = require('frzr').ViewCollection

// standalone
var ViewCollection = require('@frzr/viewcollection')

usage

var viewcollection = new ViewCollection(options)

options

• add: triggers when View is added
• remove: triggers when View is removed

Any other parameter will be added as a local attribute

Example

Try live on JSFiddle

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

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

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

// define View
var View = 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 ViewCollection
var viewCollection = new frzr.ViewCollection({view: View})
viewCollection.reset(collection.models)
viewCollection.mount(document.body)

setTimeout(function () {
    // change data
    items = [{_id: 2, name: 'Item 2'}, {_id: 3, name: 'Item 3'}]

    // trigger update
    collection.reset(items)
    viewCollection.reset(collection.models)
}, 1000)

methods

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

events

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