How to use the ampersand-view.extend function in ampersand-view

To help you get started, we’ve selected a few ampersand-view examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github AmpersandJS / ampersand-collection-view / test / index.js View on Github external
}
    }
});

// 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': ''
    }
github zeropaper / visual-fiha / src / controller / suggestion-view.js View on Github external
// 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 &lt; L &amp;&amp; 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'
  },
github sinfo / eventdeck / client / js / views / topicTags.js View on Github external
/* 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) {
github NLeSC / spot / client / pages / configure-facet / time-zones-select.js View on Github external
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'
    }
  }
});
github NLeSC / spot / client / pages / configure-facet / duration-units-select.js View on Github external
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'
      }
    ]
github NLeSC / spot / client / pages / configure-facet / time-parts-select.js View on Github external
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'
      }
    ]
github sinfo / eventdeck / client / js / views / sessionCompany.js View on Github external
/* 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',
github AmpersandJS / ampersand-view-switcher / test / main.js View on Github external
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);
        }
    });
};
github tableflip / guvnor / lib / web / client / views / process / logs / entry.js View on Github external
var View = require('ampersand-view')

module.exports = View.extend({
  template: require('./entry.hbs'),
  bindings: {
    'model.visible': {
      type: 'booleanClass',
      selector: 'li',
      name: 'visible'
    }
  }
})
github tableflip / guvnor / lib / web / client / views / process / exceptionlist / empty.js View on Github external
var View = require('ampersand-view')
var templates = require('../../../templates')

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

ampersand-view

A smart base view for Backbone apps, to make it easy to bind collections and properties to the DOM.

MIT
Latest version published 6 years ago

Package Health Score

54 / 100
Full package analysis

Popular ampersand-view functions