PageRenderTime 44ms CodeModel.GetById 14ms RepoModel.GetById 1ms app.codeStats 0ms

/readme.md

https://github.com/kvikster/backbone.picky
Markdown | 518 lines | 342 code | 176 blank | 0 comment | 0 complexity | 00daa9da8e76794cc3df9bc7f5b46370 MD5 | raw file
  1. # Backbone.Picky
  2. Selectable entities as mixins for Backbone.Model and Backbone.Collection!
  3. ## Source Code And Downloads
  4. You can download the raw source code from the "src"
  5. folder above, or grab one of the builds from the
  6. "lib" folder.
  7. To get the latest stable release, use these links
  8. which point to the 'master' branch's builds:
  9. ### Standard Builds
  10. Development: [backbone.picky.js](https://raw.github.com/derickbailey/backbone.picky/master/lib/backbone.picky.js)
  11. Production: [backbone.picky.min.js](https://raw.github.com/derickbailey/backbone.picky/master/lib/backbone.picky.min.js)
  12. ### AMD/RequireJS Builds
  13. Development: [backbone.picky.js](https://raw.github.com/derickbailey/backbone.picky/master/lib/amd/backbone.picky.js)
  14. Production: [backbone.picky.min.js](https://raw.github.com/derickbailey/backbone.picky/master/lib/amd/backbone.picky.min.js)
  15. ## Documentation
  16. This readme file contains basic usage examples and
  17. details on the full API, including methods,
  18. attributes and events.
  19. ### Annotated Source Code
  20. Picky has annotated source code using the Docco tool to turn
  21. comments in to documentation. This provides an in-depth look
  22. at what each section of is doing.
  23. ##### [View The Annotated Source Code](http://derickbailey.github.com/backbone.picky/docs/backbone.picky.html)
  24. ## Method Name Overrides
  25. #### IMPORTANT NOTE ABOUT METHOD NAME "select"
  26. The Picky collections override the metho `select` on collections. At this
  27. point, I can't think of a better name for specifying a model has been
  28. selected. Once I find a better name, the API will change. But for now,
  29. you will not be able to use the standard `select` method on any
  30. collection that has a Picky collection mixin.
  31. ## Model and Collection Interactions
  32. If you implement a `Selectable` model, the methods on the models and the
  33. `MultiSelect` collection will keep each other in sync. That is, if you
  34. call `model.select()` on a model, the collection will be notified of the
  35. model being selected and it will correctly update the `selectedLength` and
  36. fire the correct events.
  37. Therefore, the following are functionally the same:
  38. ```js
  39. model = new MyModel();
  40. col = new MyCollection([model]);
  41. model.select();
  42. ```
  43. ```js
  44. model = new MyModel();
  45. col = new MyCollection([model]);
  46. col.select(model);
  47. ```
  48. ### Model Requirements For Picky Collections
  49. Your model for a Picky collection must implement the following API to be
  50. usable by the selection methods and functionality:
  51. * `select: function(){...}`
  52. * `deselect: function(){...}`
  53. The easiest way to do this is to have your model extend `Selectable`. You
  54. can, however, implement your own version of these methods.
  55. ## Backbone.Picky's Components:
  56. * **Picky.Selectable:** Creates select / deselect capabilities for a model
  57. * **Picky.MultiSelect:** Allows a collection to know about the selection of multiple models, including select all / deselect all
  58. * **Picky.SingleSelect:** Allow a collection to have an exclusively selected model
  59. ## Picky.Selectable
  60. Creates selectable capabilities for a model, including tracking whether or
  61. not the model is selected, and raising events when selection changes.
  62. ```js
  63. var selectable = new Backbone.Picky.Selectable(myModel);
  64. ```
  65. ### Basic Usage
  66. Extend your model with the `Selectable` instance to make your model
  67. selectable directly.
  68. ```js
  69. SelectableModel = Backbone.Model.extend({
  70. initialize: function(){
  71. var selectable = new Backbone.Picky.Selectable(this);
  72. _.extend(this, selectable);
  73. }
  74. });
  75. ```
  76. ### Selectable Methods
  77. The following methods are included in the `Selectable` object
  78. #### Selectable#select
  79. Select a model, setting the model's `selected` attribute to true and
  80. triggering a "select" event.
  81. ```js
  82. var myModel = new SelectableModel();
  83. myModel.on("select", function(){
  84. console.log("I'm selected!");
  85. });
  86. myModel.select(); //=> logs "I'm selected!"
  87. myModel.selected; //=> true
  88. ```
  89. #### Selectable#deselect
  90. Deselect a model, setting the model's `selected` attribute to false and
  91. triggering a "deselect" event.
  92. ```js
  93. var myModel = new SelectableModel();
  94. myModel.on("deselect", function(){
  95. console.log("I'm no longer selected!");
  96. });
  97. // must select it before it can be deselected
  98. myModel.select();
  99. myModel.deselect(); //=> logs "I'm no longer selected!";
  100. myModel.selected; //=> false
  101. ```
  102. #### Selectable#toggleSelected
  103. Toggles the selection state between selected and deselected by calling
  104. the `select` or `deselect` method appropriately.
  105. ```js
  106. var myModel = new SelectableModel();
  107. myModel.on("select", function(){
  108. console.log("I'm selected!");
  109. });
  110. myModel.on("deselect", function(){
  111. console.log("I'm no longer selected!");
  112. });
  113. // toggle selection
  114. myModel.toggleSelected(); //=> "I'm selected!"
  115. myModel.toggleSelected(); //=> "I'm no longer selected!"
  116. ```
  117. ### Selectable Attributes
  118. The following attributes are manipulated by the Selectable object
  119. #### Selectable#selected
  120. Returns a boolean value indicating whether or not the model is
  121. currently selected.
  122. ### Selectable Events
  123. The following events are triggered from Selectable models
  124. #### "selected"
  125. Triggers when a model is selected.
  126. #### "deselected"
  127. Triggers when a model is deselected.
  128. ## Picky.SingleSelect
  129. Creates single-select capabilities for a `Backbone.Collection`, allowing
  130. a single model to be exclusively selected within the colllection. Selecting
  131. another model will cause the first one to be deselected.
  132. ```js
  133. var singleSelect = new Backbone.Picky.SingleSelect(myCollection) ;
  134. ```
  135. ### Basic Usage
  136. Extend your collection with the `SingleSelect` instance to make your
  137. collection support exclusive selections directly.
  138. ```js
  139. SelectableModel = Backbone.Model.extend({
  140. initialize: function(){
  141. var selectable = new Backbone.Picky.Selectable(this);
  142. _.extend(this, selectable);
  143. }
  144. });
  145. SingleCollection = Backbone.Collection.extend({
  146. model: SelectableModel,
  147. initialize: function(){
  148. var singleSelect = new Backbone.Picky.SingleSelect(this);
  149. _.extend(this, singleSelect);
  150. }
  151. });
  152. ```
  153. ### SingleSelect Methods
  154. The following methods are provided by the `SingleSelect` object.
  155. #### SingleSelect#select(model)
  156. Select a model. This method will store the selected model in
  157. the collection's `selected` attribute, and call the model's `select`
  158. method to ensure the model knows it has been selected.
  159. ```js
  160. myModel = new SelectableModel();
  161. myCol = new MultiCollection();
  162. myCol.select(myModel);
  163. ```
  164. Or
  165. ```js
  166. myModel = new SelectableModel();
  167. myCol = new MultiCollection([myModel]);
  168. myModel.select();
  169. ```
  170. If the model is already selected, this is a no-op. If a previous model
  171. is already selected, the previous model will be deselected.
  172. #### SingleSelect#deselect(model)
  173. Deselect the currently selected model. This method will remove the
  174. model from the collection's `selected` attribute, and call the model's
  175. `deselect` method to ensure the model knows it has been deselected.
  176. ```js
  177. myModel = new SelectableModel();
  178. myCol = new MultiCollection();
  179. myCol.deselect(myModel);
  180. ```
  181. Or
  182. ```js
  183. myModel = new SelectableModel();
  184. myCol = new MultiCollection();
  185. myModel.deselect();
  186. ```
  187. If the model is not currently selected, this is a no-op. If you try to
  188. deselect a model that is not the currently selected model, the actual
  189. selected model will not be deselected.
  190. ### SingleSelect Attributes
  191. The following attribute is set by the multi-select automatically
  192. ### SingleSelect#selected
  193. Returns the one selected model for this collection
  194. ```js
  195. myCol = new MultiCollection();
  196. myCol.select(model);
  197. myCol.selected; //=> model
  198. ```
  199. ### SingleSelect Events
  200. The following events are triggered by the MultiSelect based on changes
  201. in selection:
  202. #### "selected"
  203. Triggered when a model has been selected. Provides the selected model
  204. as the first parameter.
  205. #### "deselected"
  206. Triggered when a model has been deselected. Provides the deselected model
  207. as the first parameter.
  208. This fires whether `deselect` has been called explicitly, or the
  209. selection is being replace through another call to `select`.
  210. ## Picky.MultiSelect
  211. Creates multi-select capabilities for a `Backbone.Collection`, including
  212. select all, select none and select some features.
  213. ```js
  214. var multiSelect = new Backbone.Picky.MultiSelect(myCollection) ;
  215. ```
  216. ### Basic Usage
  217. Extend your collection with the `MultiSleect` instance to make your
  218. collection support multiple selections directly.
  219. ```js
  220. SelectableModel = Backbone.Model.extend({
  221. initialize: function(){
  222. var selectable = new Backbone.Picky.Selectable(this);
  223. _.extend(this, selectable);
  224. }
  225. });
  226. MultiCollection = Backbone.Collection.extend({
  227. model: SelectableModel,
  228. initialize: function(){
  229. var multiSelect = new Backbone.Picky.MultiSelect(this);
  230. _.extend(this, multiSelect);
  231. }
  232. });
  233. ```
  234. ### MultiSelect Methods
  235. The following methods are provided by the `MultiSelect` object
  236. #### MultiSelect#select(model)
  237. Select a model. This method will store the selected model in
  238. the collection's `selected` list, and call the model's `select`
  239. method to ensure the model knows it has been selected.
  240. ```js
  241. myCol = new MultiCollection();
  242. myCol.select(myModel);
  243. ```
  244. If the model is already selected, this is a no-op.
  245. #### MultiSelect#deselect(model)
  246. Deselect a model. This method will remove the model from
  247. the collection's `selected` list, and call the model's `deselect`
  248. method to ensure the model knows it has been deselected.
  249. ```js
  250. myCol = new MultiCollection();
  251. myCol.deselect(myModel);
  252. ```
  253. If the model is not currently selected, this is a no-op.
  254. #### MultiSelect#selectAll
  255. Select all models in the collection.
  256. ```js
  257. myCol = new MultiCollection();
  258. myCol.selectAll();
  259. ```
  260. Models that are already selected will not be re-selected.
  261. Models that are not currently selected will be selected.
  262. The end result will be all models in the collection are
  263. selected.
  264. #### MultiSelect#deselectAll
  265. Deselect all models in the collection.
  266. ```js
  267. myCol = new MultiCollection();
  268. myCol.deselectAll();
  269. ```
  270. Models that are selected will be deselected.
  271. Models that are not selected will not be deselected again.
  272. The end result will be no models in the collection are
  273. selected.
  274. #### MultiSelect#toggleSelectAll
  275. Toggle selection of all models in the collection:
  276. ```js
  277. myCol = new MultiCollection();
  278. myCol.toggleSelectAll(); // select all models in the collection
  279. myCol.toggleSelectAll(); // de-select all models in the collection
  280. ```
  281. The following rules are used when toggling:
  282. * If no models are selected, select them all
  283. * If 1 or more models, but less than all models are selected, select them all
  284. * If all models are selected, deselect them all
  285. ### MultiSelect Attributes
  286. The following attribute is set by the multi-select automatically
  287. ### MultiSelect#selected
  288. Returns a hash of selected models, keyed from the model `cid`.
  289. ```js
  290. myCol = new MultiCollection();
  291. myCol.select(model);
  292. myCol.selected;
  293. //=> produces
  294. // {
  295. // "c1": (model object here)
  296. // }
  297. ```
  298. #### MultiSelect#selectedLength
  299. Returns the number of items in the collection that are selected.
  300. ```js
  301. myCol = new MultiCollection();
  302. myCol.select(model);
  303. myCol.selectedLength; //=> 1
  304. ```
  305. ### MultiSelect Events
  306. The following events are triggered by the MultiSelect based on changes
  307. in selection:
  308. #### "select:all"
  309. Triggered when all models have been selected
  310. #### "select:none"
  311. Triggered when all models have been deselected
  312. #### "select:some"
  313. Triggered when at least 1 model is selected, but less than all models have
  314. been selected
  315. ## Building Backbone.Picky
  316. If you wish to build Backbone.Picky on your system, you will
  317. need Ruby to run the Jasmine specs, and NodeJS to run the
  318. grunt build.
  319. ### To Run The Jasmine Specs
  320. 1. Be sure you have Bundler installed in your Ruby Gems. Then
  321. run `bundle install` from the project folder
  322. 2. Once this is done, you can run `rake jasmine` to run the
  323. Jasmine server
  324. 3. Point your browser at `http://localhost:8888` and you will
  325. see all of the specs for Backbone.Picky
  326. ### To Build The Packages
  327. 1. Be sure you have NodeJS and NPM installed on your system
  328. 2. Run `npm install -g grunt` to install the grunt build system
  329. 3. From the project folder, run `grunt` to produce a build
  330. ## Release Notes
  331. ### v0.1.0
  332. * Added Picky.SingleSelect
  333. * Fleshed out the specs more
  334. ### v0.0.1
  335. * Initial release of untested code
  336. * Basic "Selectable" mixin for models
  337. * Basic "MultiSelect" mixin for collections
  338. ## Legal Mumbo Jumbo (MIT License)
  339. Copyright (c) 2012 Derick Bailey, Muted Solutions, LLC
  340. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  341. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  342. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.