Web Atoms Core is a UI abstraction framework along with powerful MVVM pattern to design modern web and mobile applications.
src
+--images
| +--AddButton.svg
|
+--view-Models
| +--TaskListViewModel.ts
| +--TaskEditorViewModel.ts
|
+--web
| +--tasks
| +--TaskListView.tsx
| +--TaskEditorView.tsx
|
+--xf
+--tasks
+--TaskListView.tsx
+--TaskEditorView.tsx
export class UserListViewModel extends AtomViewModel {
public user: any;
public list: IUser[];
public search: string = null;
/// Dependency Injection
@Inject
private listService: ListService;
/// @validate decorator will process this accessor
/// in a way that it will always return null till
/// you call this.isValid. After this.isValid is
/// called, it will display an error if data is invalid
@Validate
public get errorName(): string {
return this.user.name ? "" : "Name cannot be empty";
}
/// You can bind UI element to this field, @watch decorator
/// will process this accessor in a way that UI element bound
/// to this field will automatically update whenever any of
/// fields referenced in this method is updated anywhere else
@Watch
public get name(): string {
return `${this.user.firstName} ${this.user.lastName}`;
}
/// this will be called immediately after the view model
/// has been initialized
/// this will refresh automatically when `this.search` is updated
/// refresh will work for all (this.*.*.*) properties at any level
@Load({ init: true, watch: true })
public async loadItems(ct: CancelToken): Promise<void> {
this.list = await this.listService.loadItems(this.search, ct);
}
/// this will validate all accessors before executing the action
/// and display success message if action was successful
@Action({ validate: true, success: "Added successfully" })
public async addNew(): Promise<any> {
...
}
}
module
patternnamespace
Atom.get
and Atom.set
_
anywhere, not in field name not in get/setset_name
method name, instead use get name()
and set name(v: T)
syntax for properties.src\test.ts
node .\dist\test.js
npm install istanbul --save-dev
npm install remap-istanbul
.\node_modules\.bin\istanbul.cmd cover .\dist\test.js
.\node_modules\.bin\remap-istanbul -i .\coverage\coverage.json -t html -o html-report
Generated using TypeDoc