```
Then you can render all buttons with
SimpleView:
```javascript
let view = new SimpleView({
defaultConfig:
{
faceMode: ButtonFaceMode.shadow
},
widgetConfigs: >{
btn0: {
text: 'BUTTON-1'
},
btn1: {
text: 'BUTTON-2'
},
btn2: {
text: 'BUTTON-3'
}
}
});
view.render();
```
In another way, you can also define a subclass of SimpleView and mark it as IOC component with @compo:
```javascript
@compo('JS.sample.ButtonsView')
export class ButtonsView extends SimpleView {
initialize() {
this._config = {
defaultConfig: {
faceMode: ButtonFaceMode.shadow
},
widgetConfigs: >{
btn0: {
text: 'BUTTON-1'
},
btn1: {
text: 'BUTTON-2'
},
btn2: {
text: 'BUTTON-3'
}
}
};
super.initialize();
}
}
```
* *The render method will be called automatically when ButtonsView is instantiated*
It will be automatically instantiated when it is injected by other components:
```javascript
@compo('JS.sample.ClassA')
export class ClassA {
@inject()
public view: ButtonsView = null;//Must be initialized to null because TS ignores uninitialized class properties at compile time
}
```
Or it will be automatically instantiated when the IOC container gets it:
```javascript
let view = Compos.get(ButtonsView);
```
### Template View
Let's continue with the example above to see how to use TemplateView to achieve the same requirement.
Because TemplateView will merge data with its template to generate HTML fragment, so there is no need to write button tags in your HTML file(just write a div container):
```html
```
Initialize a TemplateView object:
```javascript
JS.imports([
'$handlebars', //Must import handlebars as tpl engine
'$jsfx'
]).then(()=>{
let view = new TemplateView({
container: '#buttons',
defaultConfig: {
faceMode: ButtonFaceMode.shadow
},
widgetConfigs: >{
btn0: {
text: 'BUTTON-1'
},
btn1: {
text: 'BUTTON-2'
},
btn2: {
text: 'BUTTON-3'
}
},
tpl:
`{{#.}}
{{/.}}`
});
})
```
* *The template engine used by JSDK is handlebars, so the template syntax is also the syntax of handlebars.*
Load data and automatically complete rendering:
```javascript
//load local data
view.data([{
"id":"btn0"
},{
"id":"btn1"
},{
"id":"btn2"
}]);
//or load remote data
//view.load('buttons.json');
```
## Component & IOC Container
The JS.ioc.Compos is IOC container. It can register, initialize and destroy all IOC components in it and save memory cost effectively.
- *The IOC container only supports single instance mode*
### Define IOC Component
Use @compo to mark a IOC component class, indicates that this class will be managed by the IOC container:
```javascript
module JS {
export namespace sample {
@compo('JS.sample.ClassA') //Argument must be full name of the class
export class ClassA {
}
}
}
```
### Dependency Lookup
Compos can lookups the component object through get method by the class name or constructor:
```javascript
let clsA = Compos.get(ClassA);
Konsole.print(clsA.a);
```
### Dependency Injection
Suppose the type of property a in component ClassA is component ClassB, you can use the @inject annotation to automatically instantiate property a.
```javascript
module JS {
export namespace sample {
@compo('JS.sample.ClassB')
export class ClassB {
}
@compo('JS.sample.ClassA')
export class ClassA {
@inject()
public a: ClassB = null; //Must be initialized to null because TS ignores uninitialized class properties at compile time
}
}
}
```
### Safe Component
If a class has modifiable properties, we call it stateful class, otherwise we call it stateless class.
In a singleton container, only one instance of each class exists. If the component instance is stateful, it may cause its property value to be modified by internal code unexpectedly, so it is unsafe.
In order to make safe components, we advocate defining stateless components. This means that a component is safe when its properties are of the following types:
- constant
- other safe component classes
*Note: if a component class is unsafe, all other component classes that depend on this component will also become unsafe*