luca 0.9.8 → 0.9.9
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG +49 -0
- data/Gemfile +8 -1
- data/Gemfile.lock +97 -53
- data/Guardfile +3 -25
- data/README.md +5 -16
- data/ROADMAP +15 -9
- data/Rakefile +24 -75
- data/app.rb +10 -42
- data/app/assets/javascripts/luca/basic.coffee +1 -1
- data/app/assets/javascripts/luca/components/application.coffee +187 -104
- data/app/assets/javascripts/luca/components/collection_view.coffee +115 -51
- data/app/assets/javascripts/luca/components/controller.coffee +87 -10
- data/app/assets/javascripts/luca/components/fields/base.coffee +74 -13
- data/app/assets/javascripts/luca/components/fields/button_field.coffee +60 -13
- data/app/assets/javascripts/luca/components/fields/checkbox_array.coffee +12 -7
- data/app/assets/javascripts/luca/components/fields/select_field.coffee +82 -23
- data/app/assets/javascripts/luca/components/fields/text_area_field.coffee +25 -10
- data/app/assets/javascripts/luca/components/fields/text_field.coffee +9 -3
- data/app/assets/javascripts/luca/components/form_view.coffee +105 -33
- data/app/assets/javascripts/luca/components/grid_layout_view.coffee +42 -0
- data/app/assets/javascripts/luca/components/index.coffee +6 -0
- data/app/assets/javascripts/luca/components/nav_bar.coffee +60 -6
- data/app/assets/javascripts/luca/components/page.coffee +70 -0
- data/app/assets/javascripts/luca/components/simple_collection_view.coffee +10 -0
- data/app/assets/javascripts/luca/components/table_view.coffee +7 -3
- data/app/assets/javascripts/luca/components/table_view_scrollable.coffee +23 -0
- data/app/assets/javascripts/luca/concerns/collection_event_bindings.coffee +4 -1
- data/app/assets/javascripts/luca/concerns/development_tool_helpers.coffee +23 -14
- data/app/assets/javascripts/luca/concerns/dom_helpers.coffee +2 -2
- data/app/assets/javascripts/luca/concerns/filterable.coffee +8 -11
- data/app/assets/javascripts/luca/concerns/form_model_bindings.coffee +20 -0
- data/app/assets/javascripts/luca/concerns/modal_view.coffee +40 -15
- data/app/assets/javascripts/luca/concerns/query_collection_bindings.coffee +7 -1
- data/app/assets/javascripts/luca/concerns/state_model.coffee +40 -26
- data/app/assets/javascripts/luca/concerns/templating.coffee +3 -1
- data/app/assets/javascripts/luca/config.coffee +5 -0
- data/app/assets/javascripts/luca/containers/card_view.coffee +87 -52
- data/app/assets/javascripts/luca/containers/container.coffee +305 -108
- data/app/assets/javascripts/luca/containers/modal_view.coffee +9 -9
- data/app/assets/javascripts/luca/containers/page_controller.coffee +25 -0
- data/app/assets/javascripts/luca/containers/panel_toolbar.coffee +5 -6
- data/app/assets/javascripts/luca/containers/tab_view.coffee +19 -10
- data/app/assets/javascripts/luca/containers/viewport.coffee +12 -16
- data/app/assets/javascripts/luca/core/collection.coffee +19 -5
- data/app/assets/javascripts/luca/core/events.coffee +5 -5
- data/app/assets/javascripts/luca/core/model.coffee +1 -1
- data/app/assets/javascripts/luca/core/panel.coffee +18 -6
- data/app/assets/javascripts/luca/core/registry/component_definition.coffee +2 -1
- data/app/assets/javascripts/luca/core/registry/meta_data.coffee +2 -0
- data/app/assets/javascripts/luca/core/registry/registry.coffee +14 -11
- data/app/assets/javascripts/luca/core/templates.coffee +5 -1
- data/app/assets/javascripts/luca/core/view.coffee +200 -47
- data/app/assets/javascripts/luca/dependencies.coffee +2 -0
- data/app/assets/javascripts/luca/development/code_sync_manager.coffee +173 -0
- data/app/assets/javascripts/luca/development/component.coffee +76 -0
- data/app/assets/javascripts/luca/development/components.coffee +57 -0
- data/app/assets/javascripts/luca/development/console.coffee +1 -1
- data/app/assets/javascripts/luca/development/index.coffee +4 -1
- data/app/assets/javascripts/luca/framework.coffee +7 -3
- data/app/assets/javascripts/luca/index.coffee +2 -1
- data/app/assets/javascripts/luca/managers/collection_manager.coffee +2 -3
- data/app/assets/javascripts/luca/managers/index.coffee +1 -1
- data/app/assets/javascripts/luca/managers/socket_manager.coffee +31 -8
- data/app/assets/javascripts/luca/templates/components/nav_bar.jst.ejs +16 -1
- data/app/assets/javascripts/luca/templates/containers/tab_view.jst.ejs +1 -1
- data/app/assets/javascripts/luca/util/index.coffee +1 -0
- data/app/assets/javascripts/luca/util/keybindings.coffee +24 -0
- data/app/assets/javascripts/luca/util/logging.coffee +15 -0
- data/app/assets/javascripts/luca/util/luca.coffee +9 -1
- data/app/assets/stylesheets/luca/components/table_view.scss +85 -0
- data/app/assets/stylesheets/luca/components/viewport.scss +0 -4
- data/app/assets/stylesheets/luca/containers/container.scss +8 -0
- data/app/assets/stylesheets/luca/index.css +2 -2
- data/bin/luca +14 -0
- data/config.ru +1 -2
- data/docs/framework.json +1 -0
- data/docs/luca-framework-documentation.js +1 -0
- data/docs/{application.md → old/application.md} +0 -0
- data/docs/{collection.md → old/collection.md} +0 -0
- data/docs/{collection_manager.md → old/collection_manager.md} +0 -0
- data/docs/{container_philosophy.md → old/container_philosophy.md} +0 -0
- data/docs/{event_binding_helpers.md → old/event_binding_helpers.md} +0 -0
- data/docs/{method_caching_and_computed_properties.md → old/method_caching_and_computed_properties.md} +0 -0
- data/docs/{view.md → old/view.md} +0 -0
- data/lib/generators/luca/application/templates/javascripts/dependencies.coffee +2 -5
- data/lib/guard/luca.rb +84 -0
- data/lib/luca.rb +25 -1
- data/lib/luca/asset_compiler.rb +117 -0
- data/lib/luca/cli.rb +68 -0
- data/lib/luca/cli/generate.rb +37 -0
- data/lib/luca/cli/server.rb +20 -0
- data/lib/luca/cli/sync.rb +40 -0
- data/lib/luca/cli/watch.rb +16 -0
- data/lib/luca/collection.rb +64 -0
- data/lib/luca/collection/endpoint.rb +38 -0
- data/lib/luca/collection/file_backend.rb +121 -0
- data/lib/luca/collection/redis_backend.rb +153 -0
- data/lib/luca/compiled_asset.rb +61 -0
- data/lib/luca/component_definition.rb +356 -0
- data/lib/luca/luca_application.rb +258 -0
- data/lib/luca/project.rb +73 -0
- data/lib/luca/project_harness.rb +96 -0
- data/lib/luca/rails.rb +5 -3
- data/lib/luca/rails/engine.rb +8 -0
- data/lib/luca/rails/version.rb +1 -2
- data/lib/luca/server.rb +7 -0
- data/lib/luca/stylesheet.rb +35 -0
- data/lib/luca/template.rb +2 -0
- data/lib/luca/template_asset.rb +64 -0
- data/lib/luca/version.rb +3 -0
- data/lib/luca/watcher.rb +72 -0
- data/lib/railties/luca/tasks.rake +7 -0
- data/site/.bundle/config +2 -0
- data/site/.gitignore +5 -0
- data/site/.rvmrc +1 -0
- data/site/CHANGELOG.md +41 -0
- data/site/DOCS.md +41 -0
- data/site/Gemfile +8 -0
- data/site/Gemfile.lock +134 -0
- data/site/LICENSE.md +19 -0
- data/site/config.rb +84 -0
- data/site/helpers/site_helpers.rb +20 -0
- data/site/html5bp-docs/README.md +38 -0
- data/site/html5bp-docs/contribute.md +104 -0
- data/site/html5bp-docs/crossdomain.md +21 -0
- data/site/html5bp-docs/css.md +135 -0
- data/site/html5bp-docs/extend.md +507 -0
- data/site/html5bp-docs/faq.md +77 -0
- data/site/html5bp-docs/htaccess.md +323 -0
- data/site/html5bp-docs/html.md +170 -0
- data/site/html5bp-docs/js.md +31 -0
- data/site/html5bp-docs/misc.md +25 -0
- data/site/html5bp-docs/usage.md +109 -0
- data/site/readme.md +47 -0
- data/site/source/.htaccess +540 -0
- data/site/source/404.html +157 -0
- data/site/source/app/assets/javascripts/dependencies.js.coffee +6 -0
- data/site/source/app/assets/javascripts/docs-docs.js +1 -0
- data/site/source/app/assets/javascripts/docs/application.coffee +64 -0
- data/site/source/app/assets/javascripts/docs/collections/docs_documentation.coffee +17 -0
- data/site/source/app/assets/javascripts/docs/collections/github_repositories.coffee +7 -0
- data/site/source/app/assets/javascripts/docs/collections/index.coffee +1 -0
- data/site/source/app/assets/javascripts/docs/collections/luca_documentation.coffee +17 -0
- data/site/source/app/assets/javascripts/docs/collections/public_gists.coffee +4 -0
- data/site/source/app/assets/javascripts/docs/config.coffee +5 -0
- data/site/source/app/assets/javascripts/docs/index.coffee +12 -0
- data/site/source/app/assets/javascripts/docs/lib/router.coffee +3 -0
- data/{spec/components/application_spec.coffee → site/source/app/assets/javascripts/docs/lib/util.coffee} +0 -0
- data/site/source/app/assets/javascripts/docs/models/component.coffee +99 -0
- data/site/source/app/assets/javascripts/docs/models/github_repository.coffee +3 -0
- data/site/source/app/assets/javascripts/docs/models/index.coffee +1 -0
- data/site/source/app/assets/javascripts/docs/templates/component_documentation.jst.ejs +55 -0
- data/site/source/app/assets/javascripts/docs/templates/examples_browser/overview.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/examples_browser/selector.jst.ejs +11 -0
- data/site/source/app/assets/javascripts/docs/templates/github_repository.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/layouts/main.jst.ejs +4 -0
- data/site/source/app/assets/javascripts/docs/templates/left_navigation.jst.ejs +5 -0
- data/site/source/app/assets/javascripts/docs/templates/pages/getting_started.jst.ejs +78 -0
- data/site/source/app/assets/javascripts/docs/templates/pages/home.jst.ejs +57 -0
- data/site/source/app/assets/javascripts/docs/views/components/code_editor.coffee +45 -0
- data/{spec/components/collection_loader_view_spec.coffee → site/source/app/assets/javascripts/docs/views/components/code_editor/index.coffee} +0 -0
- data/site/source/app/assets/javascripts/docs/views/components/component_documentation.coffee +72 -0
- data/site/source/app/assets/javascripts/docs/views/index.coffee +3 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source.coffee +46 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source/details.coffee +37 -0
- data/site/source/app/assets/javascripts/docs/views/pages/browse_source/list.coffee +31 -0
- data/site/source/app/assets/javascripts/docs/views/pages/component_editor.coffee +10 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser.coffee +102 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser/docs.coffee +12 -0
- data/site/source/app/assets/javascripts/docs/views/pages/examples_browser/source.coffee +13 -0
- data/site/source/app/assets/javascripts/docs/views/pages/home.coffee +10 -0
- data/site/source/app/assets/javascripts/docs/views/views/api_browser/index.coffee +43 -0
- data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/grid_layout_view_example.coffee +14 -0
- data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/table_view_example.coffee +39 -0
- data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/basic_example.coffee +38 -0
- data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/complex_layout.coffee +110 -0
- data/site/source/app/assets/javascripts/docs/views/views/top_navigation.coffee +6 -0
- data/site/source/app/assets/javascripts/luca-docs.js +1 -0
- data/site/source/app/assets/javascripts/luca-framework-documentation.js +1 -0
- data/site/source/app/assets/javascripts/site.js.coffee +4 -0
- data/site/source/app/assets/javascripts/vendor/codemirror.js +4786 -0
- data/site/source/app/assets/javascripts/vendor/coffeescript.js +346 -0
- data/site/source/app/assets/javascripts/vendor/css.js +465 -0
- data/site/source/app/assets/javascripts/vendor/htmlmixed.js +84 -0
- data/site/source/app/assets/javascripts/vendor/javascript.js +422 -0
- data/site/source/app/assets/javascripts/vendor/js-beautify.js +1353 -0
- data/site/source/app/assets/javascripts/vendor/modernizr-2.6.1.min.js +4 -0
- data/site/source/app/assets/javascripts/vendor/vim.js +2511 -0
- data/site/source/app/assets/stylesheets/docs/api-browser.css.scss +5 -0
- data/site/source/app/assets/stylesheets/docs/application.css.scss +35 -0
- data/site/source/app/assets/stylesheets/docs/browse-source.css.scss +5 -0
- data/site/source/app/assets/stylesheets/docs/scrollable-table.css.scss +5 -0
- data/site/source/app/assets/stylesheets/site.css.scss +2 -0
- data/site/source/app/assets/stylesheets/vendor/codemirror.css +240 -0
- data/site/source/app/assets/stylesheets/vendor/prettify-tomorrow-night-bright.css +160 -0
- data/site/source/app/assets/stylesheets/vendor/twilight.css +26 -0
- data/site/source/crossdomain.xml +15 -0
- data/site/source/documentation.html.haml +1 -0
- data/site/source/favicon_base.png +0 -0
- data/site/source/humans.txt +15 -0
- data/site/source/images/background.png +0 -0
- data/site/source/images/middleman.png +0 -0
- data/site/source/index.html.haml +1 -0
- data/site/source/layouts/layout.haml +55 -0
- data/site/source/readme.md +63 -0
- data/site/source/robots.txt +3 -0
- data/spec/{components/grid_view_spec.coffee → javascripts/components/application_spec.coffee} +0 -0
- data/spec/{components/pagination_control_spec.coffee → javascripts/components/collection_loader_view_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/collection_view_spec.coffee +1 -1
- data/spec/{components → javascripts/components}/controller_spec.coffee +0 -0
- data/spec/{components → javascripts/components}/fields/checkbox_array_spec.coffee +0 -0
- data/spec/javascripts/components/form_view_spec.coffee +162 -0
- data/spec/{components/record_manager_spec.coffee → javascripts/components/grid_view_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/multi_collection_view_spec.coffee +0 -0
- data/spec/{components/template_spec.coffee → javascripts/components/pagination_control_spec.coffee} +0 -0
- data/spec/{concerns/paginatable_spec.coffee → javascripts/components/record_manager_spec.coffee} +0 -0
- data/spec/{components → javascripts/components}/table_view_spec.coffee +0 -0
- data/spec/{containers/modal_view_spec.coffee → javascripts/components/template_spec.coffee} +0 -0
- data/spec/{concerns → javascripts/concerns}/collection_event_bindings_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/dom_helpers_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/filterable_spec.coffee +0 -0
- data/spec/{concerns → javascripts/concerns}/model_presenter_spec.coffee +0 -0
- data/spec/{containers/panel_view_spec.coffee → javascripts/concerns/paginatable_spec.coffee} +0 -0
- data/spec/{concerns → javascripts/concerns}/state_model_spec.coffee +5 -0
- data/spec/javascripts/containers/card_view_spec.coffee +108 -0
- data/spec/{containers/tab_view_spec.coffee → javascripts/containers/modal_view_spec.coffee} +0 -0
- data/spec/{containers/viewport_spec.coffee → javascripts/containers/panel_view_spec.coffee} +0 -0
- data/spec/{core/observer_spec.coffee → javascripts/containers/tab_view_spec.coffee} +0 -0
- data/spec/{managers/socket_manager_spec.coffee → javascripts/containers/viewport_spec.coffee} +0 -0
- data/spec/{core → javascripts/core}/collection_spec.coffee +1 -1
- data/spec/{core → javascripts/core}/concerns_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/container_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/define_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/events_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/field_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/framework_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/model_spec.coffee +0 -0
- data/spec/javascripts/core/observer_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/util_spec.coffee +0 -0
- data/spec/{core → javascripts/core}/view_spec.coffee +51 -39
- data/spec/{dependencies → javascripts/dependencies}/index.coffee +0 -0
- data/spec/{dependencies → javascripts/dependencies}/jasmine-html.js +0 -0
- data/spec/{dependencies → javascripts/dependencies}/jasmine.js +0 -0
- data/spec/{dependencies → javascripts/dependencies}/sinon.js +0 -0
- data/spec/{helper.coffee → javascripts/helper.coffee} +0 -0
- data/spec/{managers → javascripts/managers}/collection_manager_spec.coffee +0 -0
- data/spec/javascripts/managers/socket_manager_spec.coffee +0 -0
- data/spec/lib/component_definition_spec.rb +63 -0
- data/spec/lib/input_compiler_spec.rb +9 -0
- data/spec/lib/luca_application_spec.rb +30 -0
- data/spec/support/fixtures/application.coffee +45 -0
- data/spec/support/fixtures/component.coffee +34 -0
- data/tutorials/component-definitions.md +0 -0
- data/tutorials/component-definitions/01_intro.md +0 -0
- data/tutorials/component-driven-design.md +140 -0
- data/tutorials/structure-of-a-project.md +63 -0
- data/vendor/assets/javascripts/backbone-min.js +37 -33
- data/vendor/assets/javascripts/backbone-query.min.js +1 -1
- data/vendor/assets/javascripts/hogan.js +707 -0
- data/vendor/assets/javascripts/jquery.js +5 -4
- data/vendor/assets/javascripts/keymaster.min.js +4 -0
- data/vendor/assets/javascripts/luca-dependencies.min.js +8 -0
- data/vendor/assets/javascripts/luca-development.min.js +1 -0
- data/vendor/assets/javascripts/luca-spec.js +6 -6
- data/vendor/assets/javascripts/luca-ui.js +7386 -0
- data/vendor/assets/javascripts/luca-ui.min.js +5 -0
- data/vendor/assets/javascripts/luca.full.min.js +12 -0
- data/vendor/assets/javascripts/luca.min.js +5 -0
- data/vendor/assets/javascripts/underscore-min.js +1 -5
- data/vendor/assets/javascripts/underscore-string.min.js +1 -1
- data/vendor/assets/stylesheets/luca-components.css +202 -0
- data/vendor/assets/stylesheets/luca-development.css +23 -0
- data/vendor/assets/stylesheets/luca-ui.css +198 -0
- metadata +324 -94
- data/app/assets/javascripts/luca/components/base_toolbar.coffee +0 -17
- data/app/assets/javascripts/luca/components/form_button_toolbar.coffee +0 -28
- data/app/assets/javascripts/luca/components/grid_view.coffee +0 -269
- data/app/assets/javascripts/luca/components/page_controller.coffee +0 -7
- data/app/assets/javascripts/luca/components/template.coffee +0 -5
- data/app/assets/javascripts/luca/components/toolbar_dialog.coffee +0 -25
- data/lib/luca/code_browser.rb +0 -55
- data/lib/luca/command_line.rb +0 -69
- data/lib/luca/component_documentation.rb +0 -72
- data/site/assets/bootstrap.min.js +0 -7
- data/site/assets/dependencies.js +0 -94
- data/site/assets/glyphicons-halflings-white.png +0 -0
- data/site/assets/glyphicons-halflings.png +0 -0
- data/site/assets/luca-ui-bootstrap.css +0 -1331
- data/site/assets/luca-ui-bootstrap.js +0 -9
- data/site/assets/luca-ui-development-tools.css +0 -234
- data/site/assets/luca-ui-development-tools.js +0 -18561
- data/site/assets/luca-ui-development-tools.min.js +0 -15
- data/site/assets/luca-ui-full.min.js +0 -8
- data/site/assets/luca-ui.min.js +0 -4
- data/site/assets/sandbox.css +0 -62
- data/site/assets/sandbox.js +0 -469
- data/site/docs/application.html +0 -41
- data/site/docs/caching.html +0 -43
- data/site/docs/collection.html +0 -75
- data/site/docs/collection_manager.html +0 -71
- data/site/docs/containers.html +0 -118
- data/site/docs/events.html +0 -153
- data/site/docs/view.html +0 -128
- data/site/img/glyphicons-halflings-white.png +0 -0
- data/site/img/glyphicons-halflings.png +0 -0
- data/site/index.html +0 -20
- data/site/source-map.js +0 -1
- data/spec/components/form_view_spec.coffee +0 -84
- data/spec/containers/card_view_spec.coffee +0 -50
- data/spec/luca-spec.coffee +0 -9
data/site/docs/application.html
DELETED
@@ -1,41 +0,0 @@
|
|
1
|
-
<h1>Luca.Application</h1>
|
2
|
-
<p>A large single-page app generally needs some sort of globally available state tracking object, as well as something which acts as a single entry point into the application, and some sort of gateway to important objects.
|
3
|
-
|
4
|
-
</p>
|
5
|
-
<p>Luca.Application is a type of Viewport class which handles things such as:
|
6
|
-
|
7
|
-
</p>
|
8
|
-
<ul>
|
9
|
-
<li>collection manager ( manages your collections for you ) </li>
|
10
|
-
<li>socket manager ( relays websocket events as Backbone.Events )</li>
|
11
|
-
<li>url fragment router (<code>Backbone.Router</code>)</li>
|
12
|
-
<li>global attributes and change event bindings</li>
|
13
|
-
<li>page controller ( displays a unique page of the application) </li>
|
14
|
-
<li>active view, active sub view helpers</li>
|
15
|
-
</ul>
|
16
|
-
<p>The Luca.Application stores its state in a <code>Backbone.Model</code>, which means you can <code>get()</code> and <code>set()</code> attributes directly on the application, as well as bind to change events on the application itself, and expect the same API you would from a normal model.
|
17
|
-
|
18
|
-
</p>
|
19
|
-
<p>The ability to treat the Luca.Application instance as both a view, and a model allows for some clean patterns. Your views can declaratively list its dependency on the global application state attributes.
|
20
|
-
|
21
|
-
</p>
|
22
|
-
<pre><code class="lang-coffeescript"> _.def("MyView").extends("Luca.View").with
|
23
|
-
name: "my_view"
|
24
|
-
|
25
|
-
applicationEvents:
|
26
|
-
"change:status" : "onStatusChange"
|
27
|
-
|
28
|
-
onStatusChange: (app, currentStatus)->
|
29
|
-
if currentStatus is "inactive"
|
30
|
-
@markInactive()
|
31
|
-
|
32
|
-
markInactive: ()->
|
33
|
-
# mark this view inactive if the application
|
34
|
-
# goes into inactive status
|
35
|
-
|
36
|
-
|
37
|
-
app = Luca.getApplication()
|
38
|
-
|
39
|
-
# this will cause the view named 'my_view' to
|
40
|
-
# to fire its markInactive() method
|
41
|
-
app.set("status", "inactive")</code></pre>
|
data/site/docs/caching.html
DELETED
@@ -1,43 +0,0 @@
|
|
1
|
-
<h1>Method Caching and Computed Properties on Luca Collection and Model</h1>
|
2
|
-
<p>The concept of computed properties ( on the model ) or cached methods ( on the collection )
|
3
|
-
optimizes for cases where you call a method that performs calculations or some other operations
|
4
|
-
whose value is dependent on the model and its underlying attributes.
|
5
|
-
|
6
|
-
</p>
|
7
|
-
<h2>Cached Methods on Luca.Collection</h2>
|
8
|
-
<p>Luca provides a configuration API for Luca.Collection where you specify the method whose value
|
9
|
-
you wish to cache, and the change events which get bubbled up from the models that would change
|
10
|
-
the value, in essence expiring the cache. In addition to change events, standard events on the
|
11
|
-
collection for when a model is added or removed will expire the cached value.
|
12
|
-
|
13
|
-
</p>
|
14
|
-
<pre><code class="lang-coffeescript"> _.def("MyCollection").extends("Luca.Collection").with
|
15
|
-
name:"my_collection"
|
16
|
-
|
17
|
-
cachedMethods:[
|
18
|
-
"expensiveMethod:attributeOne,attributeTwo",
|
19
|
-
"anotherExpensiveMethod"
|
20
|
-
]
|
21
|
-
|
22
|
-
expensiveMethod: ()->
|
23
|
-
@map (model)-> model.get('attributeOne') + model.getAttribute('two')
|
24
|
-
|
25
|
-
anotherExpensiveMethod: ()->
|
26
|
-
@map (model)-> model.value()</code></pre>
|
27
|
-
<p>In the example above, the expensiveMethod is dependent on the attributeOne and attributeTwo attributes
|
28
|
-
on each of the models in the collection, therefor if any of these values change, the cache needs to be expired.
|
29
|
-
|
30
|
-
</p>
|
31
|
-
<p>the anotherExpensiveMethod call is not dependent on any specific values, so will only expire any time a new model
|
32
|
-
is added or removed, or the collection is reset.
|
33
|
-
|
34
|
-
</p>
|
35
|
-
<h2>Computed Properties on Luca.Model</h2>
|
36
|
-
<pre><code class="lang-coffeescript"> _.def("MyModel").extends("Luca.Model").with
|
37
|
-
computed:
|
38
|
-
"expensiveMethod" : ["dependencyOne","dependencyTwo"]
|
39
|
-
|
40
|
-
expensiveMethod: ()->
|
41
|
-
@get("dependencyOne") + @get("dependencyTwo")</code></pre>
|
42
|
-
<p>In the example above, once expensiveMethod is called, its value will be cached and will be invalidated
|
43
|
-
any time the dependencyOne or dependencyTwo attribute changes and triggers a change:dependencyTwo event.</p>
|
data/site/docs/collection.html
DELETED
@@ -1,75 +0,0 @@
|
|
1
|
-
<h1>Luca.Collection</h1>
|
2
|
-
<p>The <code>Luca.Collection</code> class is the base class for Luca components. A number of patterns and optimizations that are helpful in your collection classes have been extracted into the base class.
|
3
|
-
|
4
|
-
</p>
|
5
|
-
<h2>Backbone Query Integration</h2>
|
6
|
-
<p>Luca.Collection either extends from <code>Backbone.Collection</code>, or if it is available <code>Backbone.QueryCollection</code>. The Query Collection was developed by <a href="https://github.com/davidgtonge">Dave Tonge</a> and the project can be found on <a href="https://github.com/datapimp/backbone_query">Github</a>.
|
7
|
-
|
8
|
-
</p>
|
9
|
-
<p><code>Luca.Collections</code> which extend from <code>Backbone.QueryCollection</code> will have a query method which provides you with an API for filtering your collection's models with an API similar to <a href="http://www.mongodb.org/display/DOCS/Advanced+Queries">MongoDB</a>
|
10
|
-
|
11
|
-
</p>
|
12
|
-
<h2>Bootstrapping your models on page load for performance</h2>
|
13
|
-
<p>A good habit for any single page application is to not populate all of your collections via remote calls to your RESTful API. In a lot of cases it is better to put the data that needs to end up in your collections into the initial page load.
|
14
|
-
|
15
|
-
</p>
|
16
|
-
<p>Luca.Collection classes optimize for this pattern through the bootstrap functionality that is baked into the component.
|
17
|
-
|
18
|
-
</p>
|
19
|
-
<p>The bootstrap configuration for <code>Luca.Collection</code> classes depends on the collection being defined with a <code>@cache_key</code> property. <code>@cache_key</code> is either a function which returns a string, or a string, for simple cases.
|
20
|
-
|
21
|
-
</p>
|
22
|
-
<p>To make an array of objects available as models for a collection, either store the objects in <code>Luca.Collection._bootstrapped_models</code> on a property matching the value of <code>@cache_key</code> or use the <code>Luca.Collection.cache()</code> method like such:
|
23
|
-
|
24
|
-
</p>
|
25
|
-
<pre><code class="lang-html"> <body>
|
26
|
-
<script type="text/javascript">
|
27
|
-
Luca.Collection.cache("books",[{author:"Jonathan Soeder"}]
|
28
|
-
</script></code></pre>
|
29
|
-
<p>This will work with the following collection:
|
30
|
-
|
31
|
-
</p>
|
32
|
-
<pre><code class="lang-coffeescript"> _.def("BooksCollection").extends("Luca.Collection").with
|
33
|
-
name:"books"
|
34
|
-
cache_key: "books"</code></pre>
|
35
|
-
<p>Any calls to <code>(new BooksCollection()).fetch()</code> will look in the cached models first, and avoid an API call.
|
36
|
-
|
37
|
-
</p>
|
38
|
-
<p>If you want to refresh the BooksCollection from your API, just pass in an options hash like such:
|
39
|
-
|
40
|
-
</p>
|
41
|
-
<pre><code class="lang-coffeescript"> booksCollection.fetch(refresh:true)</code></pre>
|
42
|
-
<h2>Base Params for RESTful API</h2>
|
43
|
-
<p>There are a lot of cases where you need every API call to pass along the same parameters ( authentication_tokens, keys, etc )
|
44
|
-
|
45
|
-
</p>
|
46
|
-
<p><code>Luca.Collection</code> will wrap the <code>@url</code> property or method with a function which appends the base parameters as an HTTP Query Parameter string.
|
47
|
-
|
48
|
-
</p>
|
49
|
-
<pre><code class="lang-coffeescript"> _.def("BooksCollection").extends("Luca.Collection").with
|
50
|
-
name: "books"
|
51
|
-
url: "/api/v1/books"
|
52
|
-
|
53
|
-
app = Luca.getApplication()
|
54
|
-
|
55
|
-
app.on "authenticated", ()->
|
56
|
-
Luca.Collection.baseParams =
|
57
|
-
auth_token: app.get("authentication_token")
|
58
|
-
|
59
|
-
app.collection("books").url() # => "/api/v1/books?auth_token=123456"</code></pre>
|
60
|
-
<h2>onceLoaded and ifLoaded helpers</h2>
|
61
|
-
<p>There are cases where you want to do something on a collection if it has data, but if it doesn't, you need to fetch that data, and bind a callback to the reset event. This can get tedious.
|
62
|
-
|
63
|
-
</p>
|
64
|
-
<p>Passing a callback to <code>collection.ifLoaded(callback)</code> will eliminate the boilerplate in this pattern.
|
65
|
-
|
66
|
-
</p>
|
67
|
-
<p>If you only want the callback to run once, use <code>collection.onceLoaded()</code>.
|
68
|
-
|
69
|
-
</p>
|
70
|
-
<p>In either of these methods, if you don't watch to automatically call <code>@fetch()</code> on the collection, pass an autoFetch option set to false
|
71
|
-
|
72
|
-
</p>
|
73
|
-
<pre><code> app.collection("books").ifLoaded ()->
|
74
|
-
@doSomething()
|
75
|
-
, autoFetch: false</code></pre>
|
@@ -1,71 +0,0 @@
|
|
1
|
-
<h1>The Luca Collection Manager</h1>
|
2
|
-
<p>The CollectionManager is a single instance which acts as a gateway to
|
3
|
-
the instances of Luca.Collection created in your app. The intention is
|
4
|
-
to provide a central place for creating one, and only one instance of a
|
5
|
-
given collection type.
|
6
|
-
|
7
|
-
</p>
|
8
|
-
<p>You can use CollectionManager independently, or you will get one by default
|
9
|
-
when you use a Luca.Application with the default configuration.
|
10
|
-
|
11
|
-
</p>
|
12
|
-
<p>A CollectionManager has a name property which is 'primary' by default. If
|
13
|
-
you call <code>Luca.CollectionManager.get()</code> it will return the CollectionManager
|
14
|
-
named 'primary' or the first one ever created. Attempting to create an additional
|
15
|
-
CollectionManager instance with a name that is already used, will throw an error.
|
16
|
-
|
17
|
-
</p>
|
18
|
-
<h2>Named Collections and Auto-Registering</h2>
|
19
|
-
<p>You can configure your Luca.Collection classes to have their instances automatically
|
20
|
-
register with the collection manager. By specifying a <code>@name</code> property on your collection prototypes, they will automatically attempt to register with the running collection manager instance ( via <code>Luca.CollectionManager.get()</code> ) as soon as they are initialized.
|
21
|
-
|
22
|
-
</p>
|
23
|
-
<p>You can specify which manager you want a collection to register with by specifying a <code>@manager</code> property on your collection. This can either be a string, which will get resolved when needed to a variable, or a direct reference to the collection manager. The string is useful since, when declaring your Luca.Collection prototypes, the collection manager will most likely not be instantiated.
|
24
|
-
|
25
|
-
</p>
|
26
|
-
<pre><code class="lang-coffeescript"> _.def("MyCollection").extends("Luca.Collection").with
|
27
|
-
name: "my_collection"
|
28
|
-
manager: "AppInstance.collectionManager"</code></pre>
|
29
|
-
<h2>Private Collections</h2>
|
30
|
-
<p>You may not always want to use the global, single authoritative instance of a collection. In this case, you can specify a <code>@private</code> or <code>@anonymous</code> property on your collection, and it will skip registering with the collection manager.
|
31
|
-
|
32
|
-
</p>
|
33
|
-
<h2>Collection Class Naming</h2>
|
34
|
-
<p>Your custom Luca.Collection classes get named like MyApp.collections.SampleCollection. Through some string magic "SampleCollection" will get turned into "sample_collection". If you try to call collectionManager.getOrCreate("sample_collection") it will attempt to get a collection named "sample_collection", and if it fails, will create a new instance of MyApp.collections.SampleCollection. If you want to force your CollectionManager to look in a specific namespace, set a reference to MyApp.collections on Luca.Collection.namespace, otherwise it will look in all of the namespaces it knows about in the Luca.registry and find an appropriate collection.
|
35
|
-
|
36
|
-
</p>
|
37
|
-
<h2>Initial Collections</h2>
|
38
|
-
<p>The CollectionManager can be configured with an @initialCollections property, which is an array of names of collection classes, similar to "sample_collection", or actual references to Collection Classes, or strings with their names. The CollectionManager will create instances of the collection for you, and call fetch() on all of them.
|
39
|
-
|
40
|
-
</p>
|
41
|
-
<pre><code class="lang-coffeescript"> _.def("App.collections.SampleCollection").extends("Luca.Collection").with
|
42
|
-
name: "sample_collection"
|
43
|
-
|
44
|
-
_.def("App.collections.ExampleCollection").extends("Luca.Collection").with
|
45
|
-
name: "example_collection"
|
46
|
-
|
47
|
-
class App.CollectionManager extends Luca.CollectionManager
|
48
|
-
initialCollections:[
|
49
|
-
"sample_collection"
|
50
|
-
"example_collection"
|
51
|
-
]
|
52
|
-
|
53
|
-
# this will create instances of both of the above collections
|
54
|
-
# and call fetch() on all of them
|
55
|
-
collectionManager = new App.CollectionManager()</code></pre>
|
56
|
-
<h2>Event Relaying</h2>
|
57
|
-
<p>By default <code>@relayEvents</code> is set to true on the CollectionManager. This means that
|
58
|
-
any event that is triggered by a collection that is managed by the collection manager will be bubbled up to the manager. This feature is used by the collectionEvents configuration API used by Luca.View, but can also be used in custom situations as well. Simply bind to the CollectionManager instance.
|
59
|
-
|
60
|
-
</p>
|
61
|
-
<p>Event triggers will look like <code>collection_name event</code>:
|
62
|
-
|
63
|
-
|
64
|
-
</p>
|
65
|
-
<pre><code class="lang-coffeescript"> collection = new App.collections.SampleCollection([],name:"sample_collection")
|
66
|
-
manager = new Luca.CollectionManager(collectionNamespace:App.collections)
|
67
|
-
|
68
|
-
manager.on "sample_collection reset", ()=> @doSomething()
|
69
|
-
|
70
|
-
# will trigger 'reset' and call doSomething()
|
71
|
-
collection.fetch()</code></pre>
|
data/site/docs/containers.html
DELETED
@@ -1,118 +0,0 @@
|
|
1
|
-
<h1>Container Views in Luca.js</h1>
|
2
|
-
<p>Containers are types of views which are made up of one or more components. A component
|
3
|
-
is simply another Backbone.View, Luca.View, or one of their descendants.
|
4
|
-
|
5
|
-
</p>
|
6
|
-
<p>The purpose of a Container is to faciliate the communication between the components.
|
7
|
-
|
8
|
-
</p>
|
9
|
-
<p>The classic example is a FormView. A FormView is a component which inherits from
|
10
|
-
Luca.core.Container and is made up of many Field components, and facilitates the communication between
|
11
|
-
the fields and a Backbone.Model. The internal implementation of the model and field classes should never know
|
12
|
-
or reference any other component. This is the job of the FormView.
|
13
|
-
|
14
|
-
</p>
|
15
|
-
<h2>Containers are meant to generate your structural DOM elements</h2>
|
16
|
-
<p>Containers generate the structural DOM elements which wrap the individual components, and the container renders these components to the DOM element
|
17
|
-
that is assigned to it. The various types of containers you use will each
|
18
|
-
have their own internal logic for the way these DOM elements are laid out, displayed, hidden, showed, etc.
|
19
|
-
|
20
|
-
</p>
|
21
|
-
<p>For example, a ColumnView will show two components side by side and assign
|
22
|
-
each one to its own DIV element and use css to lay those columns out as configured.
|
23
|
-
A CardView will assign each component to a DIV element, show the active card, and hide the rest.
|
24
|
-
|
25
|
-
</p>
|
26
|
-
<h2>Layout and Rendering Customization</h2>
|
27
|
-
<p>The call to <code>render()</code> on a container will start a rendering chain on all of the nested components. You can customize this to your hearts content by tapping into
|
28
|
-
the method chain.
|
29
|
-
|
30
|
-
</p>
|
31
|
-
<p>All render() methods on Luca.View are wrapped and will trigger <code>before:render</code> and <code>after:render</code> events, as well as call any beforeRender or afterRender methods defined on your component. For more about this, see the section about hooks on Luca.View.
|
32
|
-
|
33
|
-
</p>
|
34
|
-
<p>The chain started by a call to <code>container.render()</code> is as follows:
|
35
|
-
|
36
|
-
</p>
|
37
|
-
<pre><code class="lang-coffeescript"> beforeRender()
|
38
|
-
|
39
|
-
# layout functions
|
40
|
-
@trigger "before:layout" # => or run beforeLayout() if it exists
|
41
|
-
@prepareLayout()
|
42
|
-
@trigger "after:layout" # => or run afterLayout() if it exists</code></pre>
|
43
|
-
<p>prepareLayout is an internal method on Luca.core.Container which will iterate
|
44
|
-
over each of your components and call applyDOMconfig passing your components
|
45
|
-
configuration to this function. This will create a DOM element and apply
|
46
|
-
any configured inline style declarations, assign a DOM id, css class, as well
|
47
|
-
as some data attributes to the element.
|
48
|
-
|
49
|
-
</p>
|
50
|
-
<p>It will put each DOM container elemement in a @componentContainers property on
|
51
|
-
your container object.
|
52
|
-
|
53
|
-
</p>
|
54
|
-
<p>After prepareLayout is the components cycle:
|
55
|
-
|
56
|
-
</p>
|
57
|
-
<pre><code class="lang-coffeescript"> @trigger "before:components" # => or run beforeComponents() if it exists
|
58
|
-
@prepareComponents()
|
59
|
-
@createComponents()
|
60
|
-
@trigger "before:render:components"
|
61
|
-
@renderComponents()
|
62
|
-
@trigger "after:components" # => or run afterComponents() if it exists</code></pre>
|
63
|
-
<h2>A Note on Container inheritance</h2>
|
64
|
-
<p>If you end up customizing the methods above in the render chain, you may
|
65
|
-
want to call the same method on the component you are inheriting from. Luca
|
66
|
-
provides some syntactic sugar for this:
|
67
|
-
|
68
|
-
</p>
|
69
|
-
<pre><code class="lang-coffeescript"> _.def("MyContainer").extends("Luca.core.Container").with
|
70
|
-
prepareLayout: ()->
|
71
|
-
# This is the normal way you would do this
|
72
|
-
Luca.core.Container::prepareLayout.apply(@, arguments)
|
73
|
-
|
74
|
-
# This is the sugary version which you get if you
|
75
|
-
# use the _.def or Luca.define method for declaring
|
76
|
-
# your prototype definitions
|
77
|
-
@_super("prepareLayout", @, arguments)
|
78
|
-
|
79
|
-
@applyMyOwnLayoutCustomizations()</code></pre>
|
80
|
-
<h2>The <code>ctype</code> property</h2>
|
81
|
-
<p>Every Luca.View which gets registered through the Luca.registry will have a ctype value associated with it. The
|
82
|
-
ctype property is used when adding components to a Container.
|
83
|
-
|
84
|
-
</p>
|
85
|
-
<pre><code class="lang-coffeescript"> _.def("ComponentOne").extends("Luca.View").with()
|
86
|
-
|
87
|
-
_.def("ComponentTwo").extends("Luca.View").with()
|
88
|
-
|
89
|
-
_.def("ContainerOne").extends("Luca.core.Container").with
|
90
|
-
components:[
|
91
|
-
ctype: "component_one"
|
92
|
-
overriddenValue: "customValue"
|
93
|
-
,
|
94
|
-
ctype: "component_two"
|
95
|
-
thisGetsPassedToInitialize: "yep"
|
96
|
-
]</code></pre>
|
97
|
-
<p>In the above example, a View class of ContainerOne will be available, and
|
98
|
-
any time you create an instance of it and call render on it, it will create
|
99
|
-
instances of ComponentOne and ComponentTwo.
|
100
|
-
|
101
|
-
</p>
|
102
|
-
<p>Note, if you do not need to customize any of the properties on the component
|
103
|
-
views, you can just pass an array of ctype strings.
|
104
|
-
|
105
|
-
</p>
|
106
|
-
<pre><code class="lang-coffeescript"> _.def("ContainerTwo").extends("Luca.core.Container").with
|
107
|
-
components:["component_one","component_two"]</code></pre>
|
108
|
-
<h2>Convenience Methods on the Container</h2>
|
109
|
-
<p>You have access to several methods which work on the components which belong to your views. These methods are:
|
110
|
-
|
111
|
-
</p>
|
112
|
-
<ul>
|
113
|
-
<li>pluck : plucks an attribute for each component</li>
|
114
|
-
<li>invoke: invokes a method for each component</li>
|
115
|
-
<li>each: run the passed iterator on eachComponent, recursively. You can turn off the recursion by passing false as your second argument.</li>
|
116
|
-
<li>indexOf: get the index of a component by it's name property</li>
|
117
|
-
<li>selectByAttribute: selects all components whose attribute matches a given value</li>
|
118
|
-
</ul>
|
data/site/docs/events.html
DELETED
@@ -1,153 +0,0 @@
|
|
1
|
-
|
2
|
-
<h2>Event Binding Syntactic Sugar</h2>
|
3
|
-
<p><code>Luca.Events</code> provides you with some additional event binding sugar.
|
4
|
-
|
5
|
-
</p>
|
6
|
-
<p><strong>once</strong>
|
7
|
-
|
8
|
-
</p>
|
9
|
-
<p><code>once</code> is how you would run one function in response to an event, but only once.
|
10
|
-
|
11
|
-
</p>
|
12
|
-
<pre><code class="lang-coffeescript"> view = new Luca.View()
|
13
|
-
|
14
|
-
view.once "event:gets:triggered", ()->
|
15
|
-
alert('sup baby')
|
16
|
-
|
17
|
-
view.trigger("event:gets:triggered")</code></pre>
|
18
|
-
<p><strong>defer until</strong>
|
19
|
-
|
20
|
-
</p>
|
21
|
-
<p><code>defer</code> is similar to `once', but with syntax I like a little better:
|
22
|
-
|
23
|
-
</p>
|
24
|
-
<pre><code class="lang-coffeescript"> _.def("MyView").extends("Luca.View").with
|
25
|
-
initialize: ()->
|
26
|
-
@defer(@setup).until("event:gets:triggered")</code></pre>
|
27
|
-
<p>If you want to defer a callback until an event gets triggered on some other object:
|
28
|
-
|
29
|
-
</p>
|
30
|
-
<pre><code class="lang-coffeescript">
|
31
|
-
_.def("MyView").extends("Luca.View").with
|
32
|
-
|
33
|
-
initialize:()->
|
34
|
-
@defer(@setup).until(@someObject,"triggers:an:event")
|
35
|
-
|
36
|
-
setup: ()-></code></pre>
|
37
|
-
<h2>Component Bindings</h2>
|
38
|
-
<p>Luca provides a number of configuration API for its components
|
39
|
-
which facilitate the binding of a component's methods to events that
|
40
|
-
occur on instances of the CollectionManager and Application objects.
|
41
|
-
|
42
|
-
</p>
|
43
|
-
<p>For Luca.core.Container classes there is also a component events
|
44
|
-
binding API that allows you to declare in your container which events
|
45
|
-
to listen for on that container's components
|
46
|
-
|
47
|
-
</p>
|
48
|
-
<h2>Auto Context Binding For Event Handlers</h2>
|
49
|
-
<p>By setting the @bindAllEvents property to true on your prototype definitions,
|
50
|
-
all event handler methods on your view will automatically be bound to the context
|
51
|
-
of the view.
|
52
|
-
|
53
|
-
</p>
|
54
|
-
<pre><code class="lang-coffeescript"> _.def('MyApp.views.AutoBoundView').extends('Luca.View').with
|
55
|
-
|
56
|
-
bindAllEvents: true
|
57
|
-
|
58
|
-
events:
|
59
|
-
"click a.btn" : "clickHandler"
|
60
|
-
"click a.btn.btn-danger" : "dangerHandler"
|
61
|
-
|
62
|
-
initialize:()->
|
63
|
-
# You no longer need to do this
|
64
|
-
# if you want to have these handlers run
|
65
|
-
# in the context of this view
|
66
|
-
_.bindAll @, "clickHandler", "dangerHandler"</code></pre>
|
67
|
-
<h2>Collection Manager Event Binding</h2>
|
68
|
-
<p>Luca Applications which use the Luca.CollectionManager have the benefit of
|
69
|
-
a declarative event binding syntax which allows you bind to events on collections
|
70
|
-
by their name. This saves you from having to create a reference to the collection
|
71
|
-
in some method, and setup a callback binding. By simply providing a @collectionEvents
|
72
|
-
configuration property on your views, you can eliminate a lot of boilerplate in your components.
|
73
|
-
|
74
|
-
</p>
|
75
|
-
<p>The format of the @collectionEvents hash is a key which is made up of the collection's name and the event
|
76
|
-
separated by a space, and either a function or a name of a method on your view.
|
77
|
-
|
78
|
-
</p>
|
79
|
-
<pre><code class="lang-coffeescript"> SamplesCollection = Backbone.Collection.extend
|
80
|
-
name: "samples"
|
81
|
-
url: "/api/v1/samples"
|
82
|
-
|
83
|
-
_.def("MyView").extends("Luca.View").with
|
84
|
-
# NOTE: you may omit this property and
|
85
|
-
# it will use Luca.CollectionManager.get() to
|
86
|
-
# get the main instance.
|
87
|
-
collectionManager: "main"
|
88
|
-
|
89
|
-
collectionEvents:
|
90
|
-
"samples reset" : "samplesResetHandler"
|
91
|
-
|
92
|
-
samplesResetHandler: (collection)->
|
93
|
-
if collection.length > 1
|
94
|
-
@doSomething()</code></pre>
|
95
|
-
<h2>Application Event Binding</h2>
|
96
|
-
<p>Similar to the CollectionManager event binding API, there is a similar API for binding to the global application
|
97
|
-
object. Most applications will have a single application instance, that is either available on the global object
|
98
|
-
or through a call to <code>Luca.getApplication()</code>.
|
99
|
-
|
100
|
-
</p>
|
101
|
-
<p>It is in the Application instance that global state tracking should occur. Should your views want to respond to changes
|
102
|
-
in global application state, you can provide an @applicationEvents configuration property. The format is a key value
|
103
|
-
pair, where the key represents the event being triggered by the application, and the value is a name of a method on
|
104
|
-
your view or an anonymous function.
|
105
|
-
|
106
|
-
</p>
|
107
|
-
<pre><code class="lang-coffeescript"> App = new Luca.Application
|
108
|
-
name: "main"
|
109
|
-
|
110
|
-
defaultState:
|
111
|
-
currentMode: "solid"
|
112
|
-
|
113
|
-
_.def("AppBoundView").extends("Luca.View").with
|
114
|
-
# NOTE: you may omit this and it will use Luca.getApplication()
|
115
|
-
app: "main"
|
116
|
-
|
117
|
-
applicationEvents:
|
118
|
-
"change:currentMode" : "modeChangeHandler"
|
119
|
-
|
120
|
-
modeChangeHandler: ()->
|
121
|
-
@doSomething()</code></pre>
|
122
|
-
<h2>Luca.core.Container Component Events</h2>
|
123
|
-
<p>Containers are special views whose only purpose is to render multiple components in a specified configuration, and handle
|
124
|
-
all of the communication between the components. This is what allows Luca components to be extremely re-usable, because they
|
125
|
-
never know about views that exist outside of them.
|
126
|
-
|
127
|
-
</p>
|
128
|
-
<p>By providing a @componentEvents configuration property on your container, you can bind to events on the components in your container
|
129
|
-
and relay information about them to other members of the container. The format is a key value pair where the key is a string which
|
130
|
-
contains the name of the component and the event it triggers, separated by a space. The value is a name of a method on your view or an anonymous function.
|
131
|
-
|
132
|
-
</p>
|
133
|
-
<pre><code class="lang-coffeescript"> # ctype = component_one
|
134
|
-
_.def("ComponentOne").extends("Luca.View").with
|
135
|
-
name:"one"
|
136
|
-
eventHandler: ()->
|
137
|
-
@trigger "custom:event"
|
138
|
-
|
139
|
-
# ctype = component_two
|
140
|
-
_.def("ComponentTwo").extends("ComponentOne").with
|
141
|
-
name:"two"
|
142
|
-
eventHandler: ()->
|
143
|
-
@trigger "some:other:event"
|
144
|
-
|
145
|
-
_.def("MyContainer").extends("Luca.core.Container").with
|
146
|
-
components:["component_two","component_one"]
|
147
|
-
componentEvents:
|
148
|
-
"one custom:event" : "customEventHandler"
|
149
|
-
|
150
|
-
# when component named one fires an event
|
151
|
-
# we can handle it here, pass it to two, whatever
|
152
|
-
customEventHandler: ()->
|
153
|
-
Luca('two').eventHandler()</code></pre>
|