< NativeScript
NativeScript - template-hello-world-ts
Indulás
ns create HelloWorld --template @nativescript/template-hello-world-ts
Könyvtárszerkezet
app01/
|-app/
| |-app-root.xml
| |-app.css
| |-app.ts
| |-main-pages.ts
| |-main-pages.xml
| `-man-view-model.ts
|-App_Resources/
|-hooks/
|-node_modules/
|-platforms/
|-.editorconfig
|-.gitignore
|-nativescript.config.ts
|-package-lock.json
|-package.json
|-references.d.ts
|-tsconfig.json
`-webpack.config.js
A főlap
- app/main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<ActionBar title="My App" icon="" />
<StackLayout class="p-20">
<Label text="Tap the button" class="h1 text-center" />
<Button text="TAP" tap="{{ onTap }}" class="-primary" />
<Label text="{{ message }}" class="h2 text-center" textWrap="true" />
</StackLayout>
</Page>
- app/main-page.ts
import { EventData, Page } from '@nativescript/core'
import { HelloWorldModel } from './main-view-model'
export function navigatingTo(args: EventData) {
const page = <Page>args.object
page.bindingContext = new HelloWorldModel()
}
- app/main-view-model.ts
import { Observable } from '@nativescript/core'
export class HelloWorldModel extends Observable {
private _counter: number
private _message: string
constructor() {
super()
// Initialize default values.
this._counter = 42
this.updateMessage()
}
get message(): string {
return this._message
}
set message(value: string) {
if (this._message !== value) {
this._message = value
this.notifyPropertyChange('message', value)
}
}
onTap() {
this._counter--
this.updateMessage()
}
private updateMessage() {
if (this._counter <= 0) {
this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!'
} else {
this.message = `${this._counter} taps left`
}
}
}