使用 durandal 创建一个安卓应用答案

【问题标题】：Create an android app using durandal使用 durandal 创建一个安卓应用
【发布时间】：2013-10-29 04:37:52
【问题描述】：

我昨天刚开始使用 durandal 来试用 Android 应用程序开发。这也是我第一次尝试应用程序开发。

我正在使用含羞草通过docs，但它并没有像预期的那样锻炼。

涵盖的步骤

从 durandal 下载了入门工具包。
执行mimosa build -mo 并得到main-built.js。
将所有文件从资产复制到 phonegap 示例项目。
在 phonegap 项目的 index.html 中包含 main-built.js 的路径。

我必须在 index.html 中进行哪些更改

目前看起来像

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/main-built.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

要使 durandal 的入门套件成为 Android 应用程序，我需要做哪些更改？

【问题讨论】：

好问题..有关这方面的 Durandaljs 文档非常少 :( 想要使用 Weyland 构建让这只小狗也可以在 Phonegap 上运行！这方面有什么进展吗？
我从durandaljs.com/version/latest/HTML%20Samples.zip 复制了示例并将此文件复制到phonegap 示例并包含我复制的所有js，然后我按照durandal 站点中的步骤操作，示例应用程序开始工作。但是卡在使用 ajax 调用的场景中
谢谢，我会尽快查看

标签： cordova durandal android mimosa

【解决方案1】：

我已经用 Durandal/Phonegap 为 Android 和 ios 做了一些应用程序，我自己也走过这条路，这并不好笑，但我离题了。 index.html 中的第一个 app.initialize() 是 NO-NO。绝对不是去这里的方式。您要做的是让您的索引查看 durandal 的喜好 - 没有所有 javascript！例外是 phonegap.js，您需要直接在 index.html 中引用它。我还没有完全弄清楚异步加载和初始化cordova，但那里有一些资源。

所有的魔法都会像您在 main.js 中所期望的那样发生，您显然会在使用 mimosa 或 weyland 构建之前执行此操作。见下文

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'],

function (system, app, viewLocator) {

    document.addEventListener('deviceready', function(){ setTimeout(onDeviceReady, 500); }, false);

    function onDeviceReady(){
    app.title = 'My App';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });


    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        app.setRoot('viewmodels/shell', 'entrance');
    });
   };
});

在调用该函数之前，我设置了 1/2 秒的时间等待科尔多瓦完成它的业务，否则我遇到了一些不一致的问题。将 main.js 重写为 AMD 模块并将其注入 shell。然后，您可以从 shell.js 中的 activate 或 compositionComplete 调用 app.initialize。

问题 #1

你可能在安卓平台上工作时无意中遇到了另一个问题，这让我好几天都差点把头发扯掉。当您在视图中创建链接时，您可能会想<a href="#somewhere">Go Somewhere</a> Android 不喜欢这样，它只会在 logcat 中喷出大量乱码。你最好这样做<a data-bind="click:goSomewhere">Go Somewhere</a>，然后在你的模型上定义一个使用 router.navigate 的函数。

希望对你有所帮助。

【讨论】：

【解决方案2】：

刚刚解决了TTS问题：

app.speakText = function (textToSpeak) {
    if (window.cordova) {
        var deferred = $.Deferred();
        window.TTS.speak({
            text: textToSpeak,
            locale: 'en-US',
            rate: 0.75
        }, function () {
            deferred.resolve(true);
        }, function (reason) {
        });
        return deferred.promise();
    }
};

【讨论】：