{"id":23333914,"url":"https://github.com/schultyy/js-cheatsheet","last_synced_at":"2026-01-20T00:34:44.662Z","repository":{"id":10168821,"uuid":"12252092","full_name":"schultyy/js-cheatsheet","owner":"schultyy","description":"My personal JavaScript cheat sheet","archived":false,"fork":false,"pushed_at":"2013-09-15T19:20:47.000Z","size":136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T23:35:28.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schultyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-20T19:26:22.000Z","updated_at":"2013-10-10T23:57:13.000Z","dependencies_parsed_at":"2022-08-31T06:23:10.959Z","dependency_job_id":null,"html_url":"https://github.com/schultyy/js-cheatsheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schultyy%2Fjs-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schultyy%2Fjs-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schultyy%2Fjs-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schultyy%2Fjs-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schultyy","download_url":"https://codeload.github.com/schultyy/js-cheatsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T00:32:54.911Z","updated_at":"2026-01-20T00:34:44.621Z","avatar_url":"https://github.com/schultyy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS Cheat sheet\nThis is my personal JavaScript cheat sheet\n\n## jQuery\n### Get clicked item in event handler\n\nGet the current clicked item in click handler\n```JavaScript\n    function clicked(e){\n      e.preventDefault();\n      var id = $(e.currentTarget);\n    }\n```\n\n## backbone.js\n### Create a new model\n\nArgument to `extend` stays empty.\n\n```JavaScript\n    var PodcastFeed = Backbone.Model.extend({ });\n```\n\nCreate a new feed:\n\n```JavaScript\n    var cre = new PodcastFeed(\n    { \n      id: \"1\",\n      title: \"CRE\", \n      image: \"http://meta.metaebene.me/media/cre/cre-logo-1400x1400.jpg\"\n    });\n```\n\n`PodcastFeed` gets an object with feed properties.\n\n### Access an model property\n```JavaScript\n    var title = cre.get(\"title\");\n```\n\n### Set model property after instantiation\n\n```JavaScript\n    var person = new Person();\n    person.set({ name: \"Thomas\", age: 67});\n```\n\n### Click handlers\n\nConsider this view:\n```JavaScript\n    var PodcastView = Backbone.View.extend({\n      tagName: \"ul\",\n\n      events: {\n        'click .podcast-list-item img' : 'thumbnailClicked'\n      },\n\n      thumbnailClicked: function(e){\n        e.preventDefault();\n        var id = $(e.currentTarget).data(\"id\");\n        var item = this.collection.get(id);\n        alert(item.get(\"title\"));\n      },\n\n      render: function(){\n          var template = $(\"#item-template\");\n          var el = $(this.el);\n          this.collection.each(function(model){\n              var html = template.tmpl(model.toJSON());\n              el.append(html);\n          });\n      }\n    });\n```\nA click handler is specified by an `events` object. The property name specifies the elements where an handler should be attached. The value is the method name which will be called on click.\n\nHtml: \n```HTML\n    \u003c!-- Template for a single item --\u003e\n    \u003cscript id=\"item-template\" type=\"text/x-jquery-tmpl\"\u003e\n      \u003cli class=\"span2\"\u003e\n         \u003cdiv class=\"podcast-list-item\"\u003e\n           \u003ca href=\"#\" class=\"thumbnail\"\u003e\n            \u003cimg data-id=\"${id}\" data-src=\"${image}\" alt=\"${title}\" src=\"${image}\"\u003e\n           \u003c/a\u003e\n         \u003c/div\u003e\n      \u003c/li\u003e\n    \u003c/script\u003e\n\n    \u003c!-- The view will be shown here --\u003e\n    \u003cdiv id=\"feed-list\" class=\"span2\"\u003e\n      \n    \u003c/div\u003e\n```\n### Add class name to view\nThere will be the case you want to add a class to your view being rendered. Simply add a `className` property to your view:\n\n```JavaScript\n    var FooView = Backbone.View.extend({\n       tagName: \"ul\",\n       className: \"unstyled\", //the class unstyled will be added on render automatically\n       render: function(){\n        //render your view here\n       }\n    });\n```\n\n### Base a view on an existing element\n\n```HTML\n  \u003cdiv id=\"foo\"\u003e\n  \u003c/div\u003e\n```\n\n```JavaScript\n  var MyView = Backbone.View.extend({\n    el: \"#foo\",\n    render: function(){\n      $(this.el).empty(); //Empties the view before actual rendering. \n    }\n  });\n  var view = new MyView();\n  view.render();  //No need to insert the rendered html manually into #foo. Backbone handles that automatically in this case.\n```\n\n### Load data from service\n\n```JavaScript\n    var MyModel = Backbone.Model.extend();\n    var MyCollection = Backbone.Collection.extend({\n        url: '/getData',\n        model: MyModel\n    });\n```\nAt first create a new model and collection. The collection needs an `url` where it can fetch data from.\n\nLoad data:\n```JavaScript\n    var foo = new MyCollection();\n    foo.fetch({\n        success: function(){ /*Yay, new data*/ },\n        error: function() { /*Sorry dude, you screw up*/ }\n    });\n```\n\n`fetch` does the actual service call and fills the models.\n\n### Render view after data was loaded\nSource: [StackOverflow](http://stackoverflow.com/a/11290928/2381304)\n\nWe want to render our models *after* they were loaded from service.\n```JavaScript\n    var MyView = Backbone.View.extend({\n        initialize: function(){\n            var self = this;\n            this.collection.fetch().complete(function(){\n                self.render();\n            });\n        },\n        render: function(){\n            this.collection.each(function(element){\n                //render your model here\n            });\n        }\n    });\n    var view = new MyView({\n        collection: myCollection\n    });\n```\n\n### Tutorials\n- http://backbonetutorials.com/what-is-a-model/\n\n## node.js\n\n### Tutorials\n- http://blog.modulus.io/absolute-beginners-guide-to-nodejs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschultyy%2Fjs-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschultyy%2Fjs-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschultyy%2Fjs-cheatsheet/lists"}