ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Ampersand​JS Snippets

by HSH ST2/ST3

Sublime Text Code Snippets for AmpersandJS

Details

Installs

  • Total 364
  • Win 279
  • OS X 47
  • Linux 38
Aug 24 Aug 23 Aug 22 Aug 21 Aug 20 Aug 19 Aug 18 Aug 17 Aug 16 Aug 15 Aug 14 Aug 13 Aug 12 Aug 11 Aug 10 Aug 9 Aug 8 Aug 7 Aug 6 Aug 5 Aug 4 Aug 3 Aug 2 Aug 1 Jul 31 Jul 30 Jul 29 Jul 28 Jul 27 Jul 26 Jul 25 Jul 24 Jul 23 Jul 22 Jul 21 Jul 20 Jul 19 Jul 18 Jul 17 Jul 16 Jul 15 Jul 14 Jul 13 Jul 12 Jul 11
Windows 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 2 0
OS X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

AmpersandJS Code Snippets

JavaScript Style Guide

Snippets to create faster and better AmpersandJS JavaScript apps.

Installation

Use Sublime Text's Package Control to install this plugin.

Manual Installation

Open up Terminal.app and execute these commands:

Sublime Text 2

cd ~/Library/"Application Support"/"Sublime Text 2"/Packages/
git clone git@github.com:HSH/AmpersandJS-Sublime-Text-Snippets.git

Sublime Text 3

cd ~/Library/"Application Support"/"Sublime Text 3"/Packages/
git clone git@github.com:HSH/AmpersandJS-Sublime-Text-Snippets.git

Snippets

To use a snippet, type the trigger codes (listed below in bold) then hit tab or ctrl + enter. Remember, you can press tab / shift + tab for speedy navigation from one part of the code to another.

Ampersand initialize function

Trigger: initialize

<snippet>
  <content><![CDATA[
initialize: function (${1:opts}) {
  var ${2:self} = this
},
]]></content>
  <tabTrigger>initialize</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Ampersand initialize function</description>
</snippet>

General Ampersand-State extend

Trigger: ampersandState

<snippet>
  <content><![CDATA[
var AmpersandModel = require('ampersand-state')

module.exports = AmpersandModel.extend({
  extraProperties: ${1:'ignore'},
  props: {
    ${2:}
  },
  session: {
    ${3:}
  },
  derived: {
    ${4:}
  }
})
]]></content>
  <tabTrigger>ampersandState</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Ampersand State</description>
</snippet>

Ampersand derived property definition

Trigger: deps

<snippet>
  <content><![CDATA[
deps: ['${1:property}'],
fn: function () {
  ${2:}
},
cache: ${3:true}
]]></content>
  <tabTrigger>deps</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>derived property</description>
</snippet>

Ampersand props property definition

Trigger: prop

<snippet>
  <content><![CDATA[
${1:prop}: {
  type: '${2:string}',
  required: ${3:true},
  default: '${4:}', 
  values: ['${5:}'],
  allowNull: ${6:false},
  setOnce: ${7:false}
}
]]></content>
  <tabTrigger>prop</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>State props property</description>
</snippet>

General Ampersand-Model extend

Trigger: ampersandModel

<snippet>
  <content><![CDATA[
var AmpersandModel = require('ampersand-model')

module.exports = AmpersandModel.extend({
  ajaxConfig: function () {
    var model = this
    return {
      headers: {

      },
      xhrFields: {

      }
    }
  },
  url: function () {
    var model = this

    return model.urlRoot
  },
  urlRoot: '',
  props: {},
  session: {},
  derived: {}
})
]]></content>
  <tabTrigger>ampersandModel</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Ampersand Model</description>
</snippet>

General Ampersand-Rest-Collection extend

Trigger: ampersandCollection

<snippet>
  <content><![CDATA[
var AmpersandRestCollection = require('ampersand-rest-collection')
var ${1:Model} = require('${2:../models/${3:}}')

module.exports = AmpersandRestCollection.extend({
  model: ${1:Model},
  mainIndex: '${4:_id}',
  url: '${5:}'
})

]]></content>
  <tabTrigger>ampersandCollection</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Ampersand REST Collection</description>
</snippet>

General Ampersand-View extend

Trigger: ampersandView

<snippet>
  <content><![CDATA[
var AmpersandView = require('ampersand-view')

module.exports = AmpersandView.extend({
  template: function () {},
  events: {

  },
  bindings: {

  }
})

]]></content>
  <tabTrigger>ampersandView</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Ampersand View</description>
</snippet>

Simple Ampersand bindings declaration

Trigger: model.

<snippet>
  <content><![CDATA[
'model.${1:name}': {
  type: '${2:text}',
  selector: '${3:[data-hook="${4:name}"]}'
}
]]></content>
  <tabTrigger>model.</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>model binding property</description>
</snippet>

registerSubview function

Trigger: registerSubview

<snippet>
  <content><![CDATA[
view.registerSubview(${1:viewInstance})
]]></content>
  <tabTrigger>registerSubview</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>registerSubview function</description>
</snippet>

render function

Trigger: render

<snippet>
  <content><![CDATA[
render: function (${1:opts}) {
  var view = this
  ${2:view._upsertBindings()}
  ${3:view.renderWithTemplate(view)}
  ${4:}
  return view
}
]]></content>
  <tabTrigger>render</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>render function</description>
</snippet>

renderCollection function

Trigger: renderCollection

<snippet>
  <content><![CDATA[
view.renderCollection(${1:collection}, ${2:ItemView}, ${3:containerEl}${4:, ${5:viewOptions}})
]]></content>
  <tabTrigger>renderCollection</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>renderCollection function</description>
</snippet>

renderSubview function

Trigger: renderSubview

<snippet>
  <content><![CDATA[
view.renderSubview(${1:viewInstance}, ${2:containerEl})
]]></content>
  <tabTrigger>renderSubview</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>renderSubview function</description>
</snippet>

renderWithTemplate function

Trigger: renderWithTemplate

<snippet>
  <content><![CDATA[
view.renderWithTemplate(${1:view}, ${2:view.template})
]]></content>
  <tabTrigger>renderWithTemplate</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>renderWithTemplate function</description>
</snippet>

subviews definition

Trigger: subviews

<snippet>
  <content><![CDATA[
subviews: {
  ${1:myStuff}: {
    selector: '${2:[data-hook=collection-container]}',
    waitFor: 'model.${3:stuffCollection}',
    prepareView: function (el) {
      return new ${4:CollectionRenderer}({
        el: el,
        collection: this.model.${3:stuffCollection}
      })
    }
  }
}
]]></content>
  <tabTrigger>subviews</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>subviews definition property</description>
</snippet>

save Model definition

Trigger: save

<snippet>
  <content><![CDATA[
save(${1:view.model}, {
  success: function (model, response, options) {

  },
  error: function (model, response, options) {

  }
})
]]></content>
  <tabTrigger>save</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Save Ampersand Model</description>
</snippet>

fetch Model definition

Trigger: fetch

<snippet>
  <content><![CDATA[
fetch({
  success: function (model, response, options) {

  },
  error: function (model, response, options) {

  }
})
]]></content>
  <tabTrigger>fetch</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Fetch Ampersand Model</description>
</snippet>

destroy Model definition

Trigger: destroy

<snippet>
  <content><![CDATA[
destroy({
  success: function (model, response, options) {

  },
  error: function (model, response, options) {

  }
})
]]></content>
  <tabTrigger>destroy</tabTrigger>
  <scope>source.js, source.jsx, source.ts</scope>
  <description>Destroy Ampersand Model</description>
</snippet>