Glimmer-Native

您是否曾经想要使用 Ember/Glimmer 来创建原生移动应用？现在您可以实现这个目标！请注意，Glimmer Native 目前处于 ALPHA 阶段。请在生产环境中自行承担风险。

借鉴的代码/概念来源： Svelte、Vue、Glimmer 集成教程、Nativescript 示例

如何创建您的第一个 Glimmer-Native 项目

1. 遵循 NativeScript 安装指南
2. 在命令行中运行 ember new hello-glimmer-native -b glimmer-native-blueprint
3. 运行 tns run ios --bundle （或调试 tns debug ios --bundle --debug-brk）

如何使用 Glimmer-Native

有一套默认的 Glimmer 组件可供您使用，这些组件可以渲染原生元素

• AbsoluteLayout
• ActionBar
• ActionItem
• ActivityIndicator
• Border
• Comment
• Button
• DatePicker
• DockLayout
• FlexboxLayout
• FormattedString
• GridLayout
• HtmlView
• Image
• Label
• ListPicker
• ListView
• NavigationButton
• Page
• Span
• StackLayout
• ScrollView
• Tabs
• TabView
• TabViewItem
• TextField
• TextView
• Switch
• WebView
• WrapLayout

事件处理

有一个内置的 action 帮助器，以及一个内置的 on 修饰符，允许进行事件处理

路由/导航

提供了一个 LinkTo 组件，允许进行导航。您向其传递一个 target，告诉 GlimmerNative 要渲染哪个组件以及导航到哪里。 <LinkTo @target="Dashboard" @text="Dashboard" @model={{this.model}} /> 会创建一个侦听点击事件的组件。点击后，Glimmer Native 会查找 Dashboard Glimmer 组件，渲染它，然后导航到它。

为了导航，顶级元素必须是 Page 组件（因此，在 Dashboard 组件中，第一个元素必须是 Page）

示例

<Page class="page">
    <ActionBar class="action-bar">
        <Label text={{this.title}} class="action-label" />
    </ActionBar>
    <TabView>
        <TabViewItem title="ToDo">
            <ScrollView>
                <StackLayout class="tasks">
                    {{#each tasks key="@index" |task|}}
                        <Task @task={{task}} />
                    {{/each}}
                </StackLayout>
            </ScrollView>
        </TabViewItem>
        <TabViewItem title="Calendar">
            <Button
                text={{this.buttonText}}
                class="btn"
                {{on "tap" (action buttonClick)}} />
            <Label text="Coming soon" />
        </TabViewItem>
    </TabView>
</Page>

以及组件 ts 文件

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Task extends Component {
    @tracked
    public title = 'Welcome to glimmer';

    public buttonText = 'Click Me!';

    public buttonClick() {
        this.title = 'Tracked yo';
    }
}

已知问题

1. 需要演示应用
2. 需要测试
3. 需要文档网站

感谢以下人士的帮助/指导

• @chadhietala
• @pzuraq
• @acorncom

部分由 Gavant 软件 赞助