https://github.com/garciaguimeras/TypeScriptTools
https://github.com/garciaguimeras/TypeScriptTools
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/garciaguimeras/TypeScriptTools
- Owner: garciaguimeras
- License: gpl-3.0
- Created: 2019-02-27T17:38:46.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-21T13:38:01.000Z (almost 5 years ago)
- Last Synced: 2024-07-31T20:45:47.122Z (9 months ago)
- Language: TypeScript
- Size: 84 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- cuban-opensource - TypeScriptTools
README
# TypeScriptTools (TST)
Are you
- Fan of TypeScript?
- Bored of using jQuery on your web apps?
- Thinking that jQuery programming generates confusing and hard to maintain code?
- Needing/Wanting not to use Angular or React?
Ok, you can use **glue**!!
## glue Controllers
Suppose you need to manage a web page fragment like that:
``` html
Write your name:
Accept
```
Using **glue**, you could write some code like that:
``` ts
@Controller('person-form')
class PersonFormController {
@Outlet('person-name')
personName: Element;
@Action('accept-button', 'click')
onAcceptButtonClick() {
let name = personName.getAttribute('value');
console.log('Person name is ' + name);
}
}
```
You can add some jQuery flavour to your code, including **glue-jquery**:
``` ts
@Controller('person-form')
class PersonFormController {
@JQueryOutlet()
@Outlet('person-name')
personName: JQuery;
@Action('accept-button', 'click')
onAcceptButtonClick() {
let name = personName.val();
console.log('Person name is ' + name);
}
}
```
Do you need to use another controller's instance on your code?
``` ts
@Controller('foo')
class FooController {
...
}
@Controller('bar')
class BarController {
...
@Inject('foo')
foo: FooController;
...
}
```
And if you need to capture the on-load event?
``` ts
@Controller('foo')
class FooController {
...
@LoadMethod()
didLoad() {
...
}
...
}
```
## glue Templates
You can create a controller template using TSX, including the **react-jsx-polyfill**:
``` tsx
let template: Element = (
Write your name:
Accept
)
```
``` ts
@Template(template)
class PersonFormTemplate {
@Outlet('person-name')
personName: Element;
someData: string;
@Action('accept-button', 'click')
onAcceptButtonClick() {
let name = personName.getAttribute('value');
console.log('Person name is ' + name);
}
}
```
Inject it dynamically into the DOM using **glue-methods**:
``` ts
GlueMethods.templateToController(parentController, PersonFormTemplate, 'person-form', 'parent-div');
```
or
``` ts
GlueMethods.templateToController('parent-controller-id', PersonFormTemplate, 'person-form', 'parent-div');
```
or even injecting it somo initialization data
``` ts
var params = {
someData: 'some value'
}
GlueMethods.templateToController(parentController, PersonFormTemplate, 'person-form', 'parent-div', params);
```
and remove the controller dynamically from DOM:
``` ts
GlueMethods.removeController('person-form');
```
## Using glue with require.js
Include require.js on your web page:
``` html
```
In your main script, write something like that:
``` js
var requirements = ['glue', 'my-controller'];
require(requirements, function (glue) {
glue.$glue.bootstrap();
});
```