{"id":25092829,"url":"https://github.com/biril/backbone-control","last_synced_at":"2025-04-01T22:26:41.173Z","repository":{"id":26989196,"uuid":"30453046","full_name":"biril/backbone-control","owner":"biril","description":"Common UI elements, reinvented as data-driven Backbone components","archived":false,"fork":false,"pushed_at":"2022-10-19T01:19:19.000Z","size":213,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T14:41:57.705Z","etag":null,"topics":["backbone","backbonejs","discontinued","ui","ui-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biril.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-07T10:55:47.000Z","updated_at":"2021-04-26T09:34:14.000Z","dependencies_parsed_at":"2023-01-14T09:15:10.377Z","dependency_job_id":null,"html_url":"https://github.com/biril/backbone-control","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/biril%2Fbackbone-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biril%2Fbackbone-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biril%2Fbackbone-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biril%2Fbackbone-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biril","download_url":"https://codeload.github.com/biril/backbone-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246719854,"owners_count":20822804,"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":["backbone","backbonejs","discontinued","ui","ui-components"],"created_at":"2025-02-07T14:35:03.042Z","updated_at":"2025-04-01T22:26:41.147Z","avatar_url":"https://github.com/biril.png","language":"JavaScript","readme":"Backbone Control\n================\n\n[![Build Status](https://travis-ci.org/biril/backbone-control.png)](https://travis-ci.org/biril/backbone-control)\n\n[![Sauce Test Status](https://saucelabs.com/browser-matrix/backbone-control.svg)](https://saucelabs.com/u/backbone-control)\n\nCommon UI elements, reinvented as data-driven Backbone components.\n\nBy design, HTML controls attain specific state as a response to user interaction. A checkbox will\ngo into and out of the 'checked' state as a response to the user clicking on it; a text input will\nbe populated with whatever input the user types into it. Essentially, application state is\npersisted directly on the document - on the view - rather than on the model. Additionally,\nvalidations or any appropriate constraint-enforcing logic is executed too late, as a response to\nstate change rather than as a prerequisite thereof. Consequently, HTML controls are hard to fit\ninto MV* applications - such as those built with Backbone - where models act as the\nsingle-source-of-truth and views act as their projection onto the presentation layer.\n\nBackbone Control is an implementation of common UI elements (button, switch (check box / radio\nbutton), text field, drop-down list, etc) as Backbone Views driven by Backbone Models. As an\nexample, building a user-details form based on Backbone Control elements is intended to look\nsomething like this:\n\n```javascript\nvar user = new Backbone.Model({\n    name: 'David',\n    emailAddress: 'Davidbowman@home.com',\n    country: 'us',\n    isNotifiedForUpdates: false\n  });\n\n// Create controls for editing the user's name, country and their\n//  notify-for-updates status. Each control is associated with some specific\n//  attribute of the user model. Additionally, through the isAutoWriteToModel\n//  attribute, they're all set up with two-way data binding, i.e. any changes on\n//  the control will be automatically persisted on the model. (Contrast this to\n//  how the email-address text field is used further down)\nvar userNameTextField = new TextField({\n    model: user,\n    modelAttr: 'name',\n    isAutoWriteToModel: true\n  });\n$('.userName').append(userNameTextField.el);\n\nvar userCountryDropList = new DropList({\n    model: user,\n    modelAttr: 'country',\n    items: [\n      { value: 'us', name: 'United States' },\n      { value: 'gb', name: 'United Kingdom' },\n      { value: 'ae', name: 'United Arab Emirates' },\n      { value: 'tz', name: 'United Republic of Tanzania' }\n    ],\n    isAutoWriteToModel: true\n  });\n$('.userCountry').append(userCountryDropList.el);\n\nvar notifyForUpdatesSwitch = new Switch({\n    model: user,\n    modelAttr: 'isNotifiedForUpdates',\n    isAutoWriteToModel: true\n  });\n$('.notifyForUpdates').append(notifyForUpdatesSwitch.el);\n\n// For the user's email-address text field we only want one-way data-binding\n//  (notice that the isAutoWriteToModel attribute is set to false). That is to\n//  say, the view should always reflect the model's state but changes on the view\n//  should not be automatically persisted on the model. Instead, a listener is\n//  set up for the controls 'submitted' / 'blurred' events, which performs a\n//  validation step before commiting the value to the model\nvar userEmailAddressTextField = new TextField({\n    model: user,\n    modelAttr: 'emailAddress',\n    isAutoWriteToModel: false\n  });\n$('.userEmailAddress').append(userEmailAddressTextField.el);\nuserEmailTextField.on('submitted blurred', function (attrs) {\n  if (isValidEmailAddress(attrs.emailAddress)) {\n    user.set(attrs);\n  }\n});\n\n// The button is a stateless view, not associated with any model. A listener\n//  is set up for the button's 'clicked' event, which saves the model's\n//  current state\nvar submitButton = new TextField({ label: 'Apply Changes' });\n$('.submit', submitButton.el);\nsubmitButton.on('clicked', function () {\n  user.save();\n});\n\n```\n\nNote that this is an early, 0.0.x revision and as such still very much in flux.\n\n\nLicense\n-------\n\nLicensed under the MIT License (LICENSE.txt).\n\nCopyright (c) 2014-2015 Alex Lambiris\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiril%2Fbackbone-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiril%2Fbackbone-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiril%2Fbackbone-control/lists"}