{"id":16482505,"url":"https://github.com/f/popeye","last_synced_at":"2026-06-10T08:31:13.548Z","repository":{"id":4335553,"uuid":"5471213","full_name":"f/popeye","owner":"f","description":"Popeye.js ~ Backbone.js PowerUp Wrapper","archived":false,"fork":false,"pushed_at":"2012-08-31T20:04:12.000Z","size":104,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-28T22:41:29.595Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/f.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":"2012-08-19T13:42:27.000Z","updated_at":"2019-06-17T12:16:58.000Z","dependencies_parsed_at":"2022-08-23T17:10:29.323Z","dependency_job_id":null,"html_url":"https://github.com/f/popeye","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/f/popeye","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fpopeye","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fpopeye/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fpopeye/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fpopeye/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f","download_url":"https://codeload.github.com/f/popeye/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Fpopeye/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34144679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-11T13:11:02.958Z","updated_at":"2026-06-10T08:31:13.531Z","avatar_url":"https://github.com/f.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Popeye.js v0.1 (Alpha)\n==============\n\nWARNING: DO NOT USE! STILL IN DEVELOPMENT\n==============\n\nA Backbone Power-up Kit for Backbone.js developers. Adds some features and makes development and code easier. In the background, there is Backbone.js's power. It also designed to seperate the logics with the module definitions.\n\nGetting Started\n---------------\n\nIt makes your life simpler, easier and saves your time. You can spend your time with your family instead of coding lines of Backbone Code!\n\n  - You can use `module` or `component` and `app` project global namespace system.\n  - Module dependency control. Looks like AMD but simpler.\n  - Easier `model`, `view` and `collection` definitions.\n  - Model, Collection, View definition with construction.\n\n### A Traditional Backbone Code\n\nHere is a traditional Backbone code. Cool, but hard to read!\n\n```js\n(function (module) {\n  \n  var apple,\n      apples,\n      appleView,\n      applesView;\n      \n  apple = this.apple = Backbone.Model.extend({\n    defaults: {\n      color: 'red'\n    }\n  });\n  \n  apples = this.apples = Backbone.Collection.extend({\n    model: apple\n  });\n  \n  appleView = this.appleView = Backbone.View.extend({\n    template: _.template($('script#apple').html()),\n    render: function () {\n      this.setElement(this.template(this.model.toJSON()));\n    }\n  });\n  \n  applesView = this.applesView = Backbone.View.extend({\n    el: 'ul#apples',\n    initialize: function () {\n      // something cool!\n    }\n  });\n  \n}).call(todo.module('module')); // If you have a todo variable and module pattern somewhere!\n```\n\n### A Popeye Version of The Same Code\n\n```js\napp ('todo');\nmodule ('module', function () {\n  \n  var apple,\n      apples;\n  \n  apple = this.apple = model ({\n    defaults: {\n      color: 'red'\n    }\n  });\n  \n  apples = this.apples = list (apple);\n  \n  this.views.apple = view (apple, $template('apple'));\n  \n  this.views.apples = view ('ul#apples', function () {\n    // something cool!\n  });\n});\n```\n\n## API\n\n### Application Namespace\n\n```js\napp ('todo'); \n```\n  \nYou just created an application namespace. So how can you reach this namespace?\n\n```js\ntodo\n```\n\n`Window` has a todo variable now! It's a global.\n\n### Module Definition\n\nIt looks like AMD definitions. Also you can use `component` identifier to define modules.\n\n```js\nmodule ('list.ui', ['list.core'], function (core) {\n  // something cool.\n});\n\ncomponent ('list.ui', ['list.core'], function (core) {\n  // something cool.\n});\n```\nIf module doesn't have any dependency you don't have to define dependency array.\n\n```js\nmodule ('list.core', function () {\n  // something very core...\n});\n```\n\n#### Module Events\n\n```js\ntodo.on('init:list.ui', function () {\n  // Do something cool when list.ui module initialized!\n});\n```\n\n### Initializing Modules\n\nYou can initialize modules using `init` function.\n\n```js\ninit ('list.ui');\n```\n\nThis code will initialize the module with name **`list.ui`** and its dependencies.\n\nAlso you can initialize modules with `module` function:\n\n```js\nmodule ('list.ui');\n```\n\nIt will return you the instance of created module.\n\n```js\nvar listUI = module ('list.ui');\n```\n\n   \n### Auto Initialize Modules\n\nWith the @fatihacet's module initialization idea, you can use the `\u003cbody\u003e` tag's `data-module` attribute to initialize modules.\n\n```html\n\u003cbody data-module=\"list\"\u003e\n  // something very coool!!!!\n\u003c/body\u003e\n```\n\nThe module named `list` will be initialized automatically.\n\n### Model\n\nIn Backbone, defining model is simple but Popeye.js has simpler writing.\n\n```js\nthis.apple = model ();\n```\n\nThis is actually:\n\n```js\nthis.apple = Backbone.Model.extend();\n```\n\nWriting simpler is simpler. :)\n\nAlso you can define models with a constructor. It's a need sometimes.\n\n```js\nthis.apple = model (function () {\n  // this is the model itself.\n  this.defaults = {\n    color: 'red'\n  };\n});\n```\n\nAlso you can still define with the traditional style:\n\n```js\nthis.apple = model ({\n  defaults: {\n    color: 'red'\n  }\n});\n```\n\n### Collections\n\n\"Collection\" name is too long. Popeye.js has a shorter name: **`list`**. Collections are lists!\n\n```js\nthis.apples = list (apple);\n```\n\nYou see the trick? I gave the model with the first argument. It is actually that:\n\n```js\nthis.apples = Backbone.Collection.extend({\n  model: apple\n});\n```\n\nPopeye.js makes things easier! :)\n\n### Views\n\nThere are logically two kinds of views;\n  \n  - Views of models\n  - Views of existing elements (lists)\n  \nPopeye.js has two types of models too. (**Every module has `views` property.**)\n\n#### View of a Model\n\nYou can see the example below; It creates a view of a `apple` model.\n\n```js\nthis.views.apple = view (apple, $template('apple'));\n```\n\n#### View of an Element (To Be Developed)\n    \nAlso you can define a view of an element.\n\n```js\nthis.views.main = view ('#main-view', function () {\n  // something cool!\n});\n```\n\nor\n\n```js\nthis.views.main = view ('#main-view', {\n  // something cool!\n});\n```\n\n#### `$template()` Method\n\nThis is the in-page template finder with ID.\n\n```js\nthis.views.apple = view (apple, $template('apple'));\n```    \nThis example finds the `\u003cscript type=\"text/template\" id=\"apple\"\u003e\u003c/script\u003e` and creates\nthe template function. Then binds to the view of apple model.\n\n#### `template()` Method\n\nThis is the same of `$template` but you give the parameter the template itself instead of ID.\n\n```js\nthis.views.apple = view (apple, template([\n  '\u003cdiv\u003e',\n    '\u003c%= color %\u003e',\n  '\u003c/div\u003e'\n]));\n```\n\nAs you see you can use `Array` or `String` as parameter.\n\n## TODO\n\n  - Nested model wrapper.\n  - Documentation development.\n\n## License\n\n![CC SA](http://i.creativecommons.org/l/by-sa/3.0/88x31.png)\n\nThis work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Fpopeye","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff%2Fpopeye","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Fpopeye/lists"}