Some extensions for spine framework
npm install extended-spine
|10||downloads in the last week|
|10||downloads in the last month|
|Version||1.3.1 last updated 3 months ago|
|Keywords||spine, angular, browser, controller, mvc|
|Dependencies||spine, is-mobile, dependency-injection|
You can use it for example with SimQ.
$ npm install extended-spine
Controller = require 'extended-spine' Controller.init($)
Now only spine controller is extended.
Controller = require 'extended-spine/Controller' class MyController extends Controller constructor: (@el) -> super module.exports = MyController
As you can see, everything is same like in classic spine, only extended class is different.
Creating controllers from data-controller attribute
This module will automatically look for elements in your page with
data-application attribute. If it will not find it, whole html page will
be used. Every element inside this
data-application element with
data-controller element will be used for controller.
Example is much better for explain.
... <div data-application> ... <div data-controller="/path/to/controller/for/this/element">...</div> ... </div> ...
data-controller attribute is path used in require method.
This means that now you don't have to instantiate controllers on your own. :-)
If you like dependency injection pattern with autowired dependencies (again for example like in angular), you can use this feature also with this module.
Uses dependency-injection module.
DI = require 'dependency-injection' di = new DI Controller.init($, di)
Controller = require 'extended-spine/Controller' class Chat extends Controller http: null jquery: null model: null constructor: (@el, @http, @jquery, @model) -> module.exports = Chat
Chat module is dependent on three services. First argument will always be the container element and others will be services from DI container.
Check documentation of dependency-injection module to see how to add services into your DI container.
This works only with controllers which were created with data-controller attribute.
If your application uses for example ajax for repainting elements, you can use two methods, showed below for refreshing your controllers.
Controller = require 'extended-spine/Controller' Controller.init($) el = $('#element-which-will-be-repainted') $.get(url, (data) -> Controller.unbind(el) el.html(data) Controller.refresh(el) )
refresh manipulates also with element on which it was called. You can of course disable that.
Controller.unbind(el, false) Controller.refresh(el, false)
From jQuery element:
menu = $('#menu').getController() // or menu = $('[data-controller="/app/controller/Menu"]').getController()
menu = Controller.find('/app/controller/Menu')
If you don't want to instantiate some controller immediately, you can add html attribute
<div data-controller="/path/to/my/controller" data-lazy></div>
Now when you want to create instance of this controller, you have to get it's controller factory and use it.
factory = Controller.find('/path/to/my/controller') // for lazy controllers, factory function is returned controller = factory() // just call it and it will return created controller
Mobile/computer specific controllers
You can also set if some of your controllers is only for mobile or only for computers.
<div data-controller="/app/controllers/just/for/mobile" data-mobile> <div data-controller="/app/controllers/just/for/computer" data-computer>
$ npm test
- Bug in
- Bug in
- Added dependency injection (package extended-spine-di will be removed)
- Added property fullName into controllers
- Updated dependencies
- Better find method
- Tests modules does not need to be installed globally
- Some updates
- Added find method
- Added lazy controller option
- Added lazy option
- Added badges
- Added travis
- Automatically creates html id
- Some optimization
- Wrong variable names
1.0.2 - 1.0.3
- Bug with inheritance
- Typo in tests
- Better documentation
- Initial version