How to use view - 10 common examples

function Dashboard() {
  if (!(this instanceof Dashboard)) {
    return new Dashboard();
  }

  // Define template
  View.call(this, template);


/**
 * Model of each item on the list.
 * @type {Array}
 */
  this.items = [];

  this.loadItems();
}

define(function(require, exports, module) {
'use strict';

/**
 * Dependencies
 */

var debug = require('debug')('view:focus');
var View = require('view');

/**
 * Exports
 */

module.exports = View.extend({
  name: 'focus',
  fadeTime: 500,

  initialize: function() {
    this.render();
    this.setFocusState('none');
  },

  render: function() {
    this.el.innerHTML = this.template();
    delete this.template; // Clean up
    debug('rendered');
    return this;
  },

  setFocusState: function(state) {

//var painter = require('painter')
//var fingers = require('fingers')
var painter = require('painter')
var fingers = require('fingers')
var keyboard = require('keyboard')

var mat4 = require('math/mat4')
var vec4 = require('math/vec4')
module.exports = require('view').extend(function App(proto, base){
	proto.name = 'App'
	// lets define some props
	proto.props = {
	}

	proto._onConstruct = function(){
		base._onConstruct.call(this)
		
		var viewTodoMap = this.$viewTodoMap = []
		var app = this

		// our layout object used for running turtles on the view tree
		var layout = this.$turtleLayout = {
			$writeList: [],
			Turtle:this.Turtle,
			beginTurtle:function(){

// simple drawing app
module.exports = require('view').extend(function DrawView(proto){

	proto.tools = {
		Background:require('shaders/backgroundshader'),
		Rect:require('shaders/rectshader'),
		Line:require('shaders/lineshader'),
		Text:require('shaders/fontshader').extend({
			font:require('fonts/ubuntu_medium_256.font')
		})
	}
})

define(function(require, exports, module) {
'use strict';

/**
 * Dependencies
 */

var FaceView = require('views/face');
var View = require('view');

/**
 * Exports
 */

module.exports = View.extend({
  name: 'faces',
  faces: [],

  initialize: function(options) {
    options = options || {};
    this.el.innerHTML = this.template();
    this.FaceView = options.FaceView || FaceView;
  },

  // It creates the DOM elements that will display circles
  // around the detected faces.
  createFaces: function(maxNumberFaces) {
    var faceView;
    var i;
    for(i = 0; i < maxNumberFaces; ++i) {
      faceView = new this.FaceView();

// This view might've been destroyed by the time the callback returns. We currently don't
            // associate callbacks with views, so just explicitly check that we're still loaded here.
            if(!this.loaded()) {
                return;
            }
            if(!preview) {
                this.renderedValue = val;
                var tip = this.$el.data('bs.popover').$tip;
                tip.find('.popover-content').html(val);
            } else {
                this.$('.view').html(val);
            }
        }
    });

    var AlertEntryView = View.extend({
        tagName: 'tr',
        template: Templates['alerts/alertentry'],
        keys: null,
        full: false,
        initialize: function(options) {
            this.full = options.full;
            this.keys = options.keys;
            this.preview = options.preview;
        },
        _render: function() {
            var search = this.App.Data.Searches.get(this.model.get('search_id'));
            var vars = this.model.toJSON();
            _.extend(vars, {
                preview: this.preview,
                full: this.full,
                search_id: search ? search.get('id'):0,

View = require('view'),
        NavbarView = require('views/navbar'),
        Templates = require('templates'),
        Config = require('config'),
        Util = require('util'),
        Moment = require('moment');


    var AdminNavbarView = NavbarView.extend({
        title: 'Admin',
    });

    /**
     * The admin View
     */
    var AdminView = View.extend({
        template: Templates['admin'],
        events: {
            'click #save-button': 'saveSettings'
        },
        _load: function() {
            // Retrieve config.
            this.App.ajax({
                url: Config.api_root + 'admin',
                success: this.cbLoaded(function(resp) {
                    this.data = resp;
                    this.data['timezones'] = Moment.tz.names();

                    this.render();
                }),
                complete: $.proxy(this.App.hideLoader, this.App)
            });

define(function(require) {
    var _ = require('underscore'),
        View = require('view'),
        ChartView = require('views/chart'),
        Templates = require('templates'),
        Config = require('config'),
        Data = require('data');


    /**
     * The index View
     */
    var IndexView = View.extend({
        template: Templates['index'],
        data: null,
        _load: function() {
            // If logged in, load up dashboard data.
            if(this.App.Data.User) {
                this.App.ajax({
                    url: Config.api_root + 'dashboard',
                    success: this.cbLoaded(function(resp) {
                        this.data = resp;
                        this.render();
                    }),
                    complete: $.proxy(this.App.hideLoader, this.App)
                });
            } else {
                this.render();
            }

pointBackgroundColor: "rgba(148,159,177,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(148,159,177,0.8)"
        },
        { // dark grey
            backgroundColor: "rgba(77,83,96,0.2)",
            borderColor: "rgba(77,83,96,1)",
            pointBackgroundColor: "rgba(77,83,96,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(77,83,96,1)"
        }
    ];

    var ChartView = View.extend({
        title: '',
        tagName: 'div',
        template: Templates['chart'],
        data: null,
        chart: null,
        initialize: function(options) {
            this.title = options.title;
            this.data = options.data;
        },
        _render: function() {
            this.$el.html(this.template({title: this.title}));
            var ctx = this.$('.chart')[0].getContext('2d');

            // FIXME: View could get destroyed before this triggers.
            _.defer($.proxy(function() {
                this.chart = new Chart(ctx, {

/**
 * Constants
 */

var SWIPE_DISTANCE_THRESHOLD = window.innerWidth / 3; // pixels
var SWIPE_VELOCITY_THRESHOLD = 1.0;                   // pixels/ms

var SWIPE_DURATION = 250;   // How long to animate the swipe
var FADE_IN_DURATION = 500; // How long to animate the fade in after swipe

/**
 * Locals
 */

return View.extend({
  name: 'preview-gallery',
  className: 'offscreen',

  initialize: function() {
    debug('initialized');
  },

  render: function() {
    this.el.innerHTML = this.template();
    this.els.frameContainer = this.find('.js-frame-container');
    this.els.previewMenu = this.find('.js-preview-menu');
    this.els.mediaFrame = this.find('.js-media-frame');
    this.els.countText = this.find('.js-count-text');
    this.els.options = this.find('.js-options');
    this.els.header = this.find('.js-header');
    this.els.share = this.find('.js-share');