How to use ampersand-view - 10 common examples

}
    }
});

// collection for that model
var Collection = AmpCollection.extend({
    model: Person,
    last: function () {
        return this.models[this.models.length - 1];
    },
    first: function () {
        return this.models[0];
    }
});

var ItemView = AmpView.extend({
    template: '<div></div>',
    bindings: {
        'model.name': ''
    },
    render: function () {
        this.renderWithTemplate();
        this.el.id = '_' + this.model.id;
        return this;
    }
});

var AlternativeItemView = AmpView.extend({
    template: '<span></span>',
    bindings: {
        'model.name': ''
    }

// var View = require('./control-view');
var View = require('ampersand-view');
var Collection = require('ampersand-collection');
var State = require('ampersand-state');

function sharedStart(array) {
  var A = array.concat().sort(),
      a1 = A[0],
      a2 = A[A.length-1],
      L = a1.length,
      i = 0;
  while(i < L && a1.charAt(i) === a2.charAt(i)) i++;
  return a1.substring(0, i);
}

var SuggestionItem = View.extend({
  template: '<li></li>',
  derived: {
    shortText: {
      deps: ['model.text', 'model.collection.parent'],
      fn: function() {
        return this.model.text.substring(this.model.collection.parent.commonStart.length);
      }
    }
  },
  bindings: {
    'model.active': {type: 'booleanClass', name: 'active'},
    shortText: {type: 'text'}
  },
  events: {
    click: '_handleClick'
  },

/* global app */
var View = require('ampersand-view')
var templates = require('../templates')
var SubCollection = require('ampersand-subcollection')

var TagView = View.extend({
  template: templates.partials.topics.tag,
  bindings: {
    'model.name': '[data-hook~=tag]',
    'model.style': {
      type: 'attribute',
      hook: 'tag',
      name: 'style'
    }
  }
})

module.exports = View.extend({
  template: templates.partials.topics.tags,
  initialize: function () {
    var self = this
    if (!app.tags.length) {

var View = require('ampersand-view');
var util = require('../../../framework/util/time');

// this.model should be a DatetimeTransform or DurationTransform

var TimeZoneView = View.extend({
  template: '<option data-hook="option"> </option>',
  render: function () {
    this.renderWithTemplate(this);
  },
  bindings: {
    'model.description': {
      hook: 'option',
      type: 'text'
    },
    'model.format': {
      hook: 'option',
      type: 'attribute',
      name: 'value'
    }
  }
});

var View = require('ampersand-view');
var util = require('../../../framework/util/time');

// this.model should be a DurationTransform

var DurationUnitsView = View.extend({
  template: '<option data-hook="option"> </option>',
  render: function () {
    this.renderWithTemplate(this);
  },
  bindings: {
    'model.description': [
      {
        hook: 'option',
        type: 'text'
      },
      {
        hook: 'option',
        type: 'attribute',
        name: 'value'
      }
    ]

var View = require('ampersand-view');
var util = require('../../../framework/util/time');

// this.model should be a DatetimeTransform

var TimePartView = View.extend({
  template: '<option data-hook="option"> </option>',
  render: function () {
    this.renderWithTemplate(this);
  },
  bindings: {
    'model.description': [
      {
        hook: 'option',
        type: 'text'
      },
      {
        hook: 'option',
        type: 'attribute',
        name: 'value'
      }
    ]

/* global app */
var View = require('ampersand-view')
var templates = require('../templates')
var SubCollection = require('ampersand-subcollection')

var CompanyView = View.extend({
  template: templates.cards.company,
  bindings: {
    'model.name': '[data-hook~=name]',
    'model.storedImg': {
      type: 'attribute',
      hook: 'img',
      name: 'src'
    },
    'model.background': {
      type: 'attribute',
      hook: 'background',
      name: 'style'
    },
    'model.editUrl': {
      type: 'attribute',
      hook: 'action-edit',

var makeTestView = function(options) {
    options = options || {};
    return View.extend({
        template: '<div data-hook="container"></div>',
        autoRender: true,
        render: function () {
            this.renderWithTemplate();
            this.switcher = new ViewSwitcher(this.queryByHook('container'), options);
        }
    });
};

var View = require('ampersand-view')

module.exports = View.extend({
  template: require('./entry.hbs'),
  bindings: {
    'model.visible': {
      type: 'booleanClass',
      selector: 'li',
      name: 'visible'
    }
  }
})

var View = require('ampersand-view')
var templates = require('../../../templates')

module.exports = View.extend({
  template: templates.includes.process.exceptionlist.empty
})