{"id":18284184,"url":"https://github.com/blimpllc/zeppelin","last_synced_at":"2025-12-12T03:06:13.923Z","repository":{"id":58235920,"uuid":"20780019","full_name":"blimpllc/zeppelin","owner":"blimpllc","description":"A Backbone Framework used to build Blimp Boards (https://github.com/GetBlimp/boards).","archived":false,"fork":false,"pushed_at":"2014-06-12T22:17:08.000Z","size":188,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-21T00:26:06.609Z","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/blimpllc.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":"2014-06-12T19:21:43.000Z","updated_at":"2022-11-28T16:18:42.000Z","dependencies_parsed_at":"2022-08-31T09:22:59.108Z","dependency_job_id":null,"html_url":"https://github.com/blimpllc/zeppelin","commit_stats":null,"previous_names":["blimpio/zeppelin","getblimp/zeppelin","blimpllc/zeppelin"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blimpllc%2Fzeppelin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blimpllc%2Fzeppelin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blimpllc%2Fzeppelin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blimpllc%2Fzeppelin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blimpllc","download_url":"https://codeload.github.com/blimpllc/zeppelin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305414,"owners_count":20917197,"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-11-05T13:12:34.050Z","updated_at":"2025-12-12T03:06:08.537Z","avatar_url":"https://github.com/blimpllc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Zeppelin\n========\n\nThe [Blimp Boards frontend](https://github.com/GetBlimp/boards-web) is built on top of a set of components that leverage the Backbone library called Zeppelin. Zeppelin was built to solve structuring problems encountered while building the [Blimp project management app](http://www.getblimp.com/). Building big Backbone apps can sometimes be difficult as the library does not provide a clear way to structure apps, a \"weakness\" that makes Backbone so powerful. Zeppelin borrows ideas from frameworks that work on top of Backbone (Chaplin, Marionette, Thorax, etc.) while introducing new concepts and functionality that help structure and develop apps faster.\n\nInstalling\n----------\n\nOn node:\n\n    npm install blimp-zeppelin\n\nOn the browser:\n\n    bower install zeppelin\n\n*Be sure to put the Zeppelin library after the Backbone library.*\n\nBuilding\n--------\n\n1. Run `npm install`.\n2. Run `gulp build`. The library will be build placed in the `build/` directory.\n\nTesting\n-------\n\n1. Build Zeppelin.\n2. Run `bower install`.\n3. Run `gulp test`.\n\n## Components\n\n### `Zeppelin.Application`\n\nThe application is top-level component that's usually assign to the `window` object. `Zeppelin.Application` extends `Backbone.Router` so all routes are define in the application object. The application object is also a good place to put global data, for example `window.Application.API_URL`.\n\n    var Application = Zeppelin.Application.extend({\n      routes: {\n        'help': function() {\n          console.log('Get some help!');\n        }\n      }\n    });\n\n    window.App = new Application();\n    App.start({pushState: true});\n    App.navigate('/help/', {trigger: true});\n\n### `Zeppelin.Controller`\n\nA controller represents the current page, there can only be one controller active at a time. Controllers can have `views`, `layouts` and `regions`. The logic inside a controller is up to you. Usually this is where you would fetch data and render the main layout and child views as well as respond to any global events related to the current page (like state changes).\n\n    var MainController = Zeppelin.Controller.extend({\n      layouts: {\n        main: MainLayout\n      },\n\n      initialize: function() {\n        this.getLayout('main').render();\n        this.posts = Zeppelin.Util.getInstance(Z.Collection);\n        this.posts.fetch();\n      }\n    });\n\n    var controller = new MainController();\n\n### `Zeppelin.Layout`\n\nA layout is a container of regions that manages their lifecycle (init and unplug). Layouts are assigned a DOM element like `Backbone.View`, in this element you can render a template that will hold the elements that the regions will use to render views. Layouts are a good place to handle DOM events that aren't handled by views.\n\n    var MainLayout = Zeppelin.Layout.extend({\n      el: 'div.main',\n\n      template: function() {\n        return '\u003cdiv class=\"content\"\u003e\u003c/content\u003e'\n      },\n\n      regions: {\n        content: ContentRegion\n      },\n\n      onRender: function() {\n        this.getRegion('content').show(SomeView);\n      }\n    });\n\n    var layout = new MainLayout();\n    layout.render();\n\n### `Zeppelin.Region`\n\nA region manages view rendering on a specific element. In a Zeppelin app views don't have a defined `el` property, this means that a view is not attached to a specific element in the document. A view can be rendered and inserted into any element by using a region. By using regions to render and remove views from elements views are more component-like because they are not exclusive to any part of the document so they can be used in multiple locations/cases.\n\n    var ContentRegion = Zeppelin.Region.extend({\n      el: 'div.content',\n\n      onShow: function() {\n        this.$el.addClass('has-a-rendered-view');\n      }\n    });\n\n    var content = new ContentRegion();\n    content.show(SomeView);\n\n### Simple app structure example:\n\n[http://jsbin.com/wadam/6/edit](http://jsbin.com/wadam/6/edit)\n\n## Views\n\nIn addition to components that help structure your app, Zeppelin has a couple of views that solve common tasks like rendering a collection or binding a model to a form.\n\n### `Zeppelin.ModelView`\n\nPlain view that works with a model, used by `Zeppelin.CollectionView` to render collections and inherited by `Zeppelin.FormView` to bind form elements to model attributes.\n\n    var PostView = Zeppelin.ModelView.extend({\n      bindings: {\n        model: {\n          'change:title': 'onChangeTitle'\n        }\n      },\n\n      onChangeTitle: function(post, title) {\n        this.find('h1').text(title);\n      }\n    });\n\n    var post = new PostView({ model: PostModel });\n    PostModel.set('title', 'Hello World');\n    console.log(post.find('h1').text()); // Hello World\n\n### `Zeppelin.CollectionView`\n\nA view that automatically renders a collection and reacts to `remove` and `add` events. It can also render filtered collections.\n\n    var PostsView = Zeppelin.CollectionView.extend({\n      tagName: 'ol',\n\n      itemView: PostView,\n\n      collection: PostsCollection,\n\n      addMethod: 'prepend',\n\n      listSelector: 'ol.posts',\n\n      template: function() {\n        return '\u003ch1\u003ePosts\u003c/h1\u003e' + '\u003col class=\"posts\"\u003e\u003c/ol\u003e';\n      },\n\n      emptyTemplate: function() {\n        return '\u003cp\u003eNo posts...\u003c/p\u003e';\n      }\n    });\n\n    var posts = new PostsView();\n\n    // Renders posts that are awesome.\n    posts.filter(function(post) {\n      return post.get('isAwesome') === true;\n    });\n\n### `Zeppelin.FormView`\n\nA view that binds form elements to model attributes. The view validates the model when submitting the for and reacts to the model's `valid` and `invalid` events.\n\n    var CreatePostForm = Zeppelin.FormView.extend({\n      model: PostModel,\n\n      events: {\n        'click [data-action=cancel]': 'onCancel'\n      },\n\n      elements: {\n        titleInput: 'input[name=title]'\n      },\n\n      onCancel: function() {\n        this.reset();\n        this.getElement('titleInput').removeClass('is-focused');\n      },\n\n      onSubmit: function() {\n        this.reset();\n      },\n\n      onValidationSuccess: function() {\n        this.broadcast('post:created', this.model);\n      },\n\n      onValidationError: function() {\n        this.$el.addClass('show-error-messages');\n      }\n    });\n\n    var form = new CreatePostForm();\n    form.render();\n    form.getAttributeElement('title').val('Blimp');\n    form.getAttributeValue('title'); // Blimp\n\n## Models and Collections\n\n### `Zeppelin.Model`\n\nModels in Zeppelin extend `Backbone.Model` to add local attributes, attribute caching to `localStorage`/`sessionStorage` and attribute validations.\n\n    var PostModel = Zeppelin.Model.extend({\n      defaults: {\n        edited: false\n      },\n\n      localAttributes: ['edited'],\n\n      validations: {\n        title: [{\n          isEmpty: false,\n          message: 'Every card requires at least a name.'\n        }, {\n          isOfMaximumLength: 140,\n          message: 'The title can\\'t be longer than 140 characters.'\n        }]\n      },\n\n      cacheId: 'Post#123'\n    });\n\n    var post = new PostModel();\n    post.save(); // Won't save because the model is not valid.\n    post.set({ title: 'A post.', edited: true });\n    post.save(); // Will only send the title attribute to the server.\n    post.saveCache(); // Will save the model to localStorage under the key 'Post#123'\n\n### `Zeppelin.Collection`\n\nExtends `Backbone.Collection` to add models caching to `localStorage`/`sessionStorage` (works like model caching).\n\n## TODO\n\n- API documentation.\n- Tests.\n- More examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblimpllc%2Fzeppelin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblimpllc%2Fzeppelin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblimpllc%2Fzeppelin/lists"}