3

随着 famo.us 的发布，它拥有所有库作为 CDN 托管库。如何在流星应用程序中使用这些？

我在famo.us代码中的“定义”遇到了很多问题......

我所做的是创建一个新的流星应用程序，然后从 famo.us 样板文件中获取 html 并将其放入客户端文件夹中，这样看起来像

<head>  
  <title>famo.us App</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <!-- shims for backwards compatibility -->
        <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

        <!-- module loader -->
        <script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>

        <!-- famous -->
        <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
        <script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>

        <!-- app code -->
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <script type="text/javascript">
            require.config({'localhost:3000': 'public/'});
            require(['main']);
        </script>

</head>

<body>  
</body>

然后我把样板的 src 文件夹中的 main.js 放到了流星的 client/compatibility 文件夹中。但它并没有真正起作用。回来了

Uncaught ReferenceError: define is not defined

来自 main.js

main.js 看起来像

define(function(require, exports, module) {
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var ImageSurface = require('famous/surfaces/ImageSurface');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: 'http://code.famo.us/assets/famous_logo.svg',
        classes: ['double-sided']
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
        origin: [0.5, 0.5],
        transform : function(){
            return Transform.rotateY(.002 * (Date.now() - initialTime));
        }
    });

    mainContext.add(centerSpinModifier).add(logo);
});

从查看源代码来看，它看起来像是因为meteor 已经编译了main.js 并在famo.us 内容加载之前包含在内。

4

3 回答 3

3

您是否尝试过直接在脚本标签中加载 main.js 而不是使用脚本标签来“要求”它。我正在做类似的事情，我将 main.js 代码直接注入到 html 中，但这里有一个示例我已经把它分开了，它可以工作（虽然我没有使用流星。）

显然，我还对代码进行了一些更改，而不是使用定义，但这种更改是直截了当的。这里是 html 和 js... html:

<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>

js：

require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example 
//var Engine  = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var surface = new Surface({
    size: [200, 200],
    content: 'Hello World',
    classes: ['red-bg'],
    properties: {
    lineHeight: '200px',
    textAlign: 'center'
}
});

mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example

});
于 2014-05-25T21:20:22.640 回答
1

您是否尝试过将 mjn: Famous 包导入您的流星项目？

流星添加 mjn：著名

于 2015-02-11T20:47:26.450 回答
0

好问题；famo.us 正在远离 Yeoman / Grunt

清理丰富的答案，这里有一个简单的index.html

<html>
  <script src='http://code.famo.us/lib/require.js'></script>
  <script src='http://code.famo.us/famous/0.2/famous.min.js'></script>

  <script>
    require([
      'famous/core/Engine',
      'famous/core/Surface',
      'famous/core/Modifier'
    ], function(Engine, Surface, Modifier){
      var context = Engine.createContext();

      var helloSurf = new Surface({
        content: 'hello world',
        properties: {
          backgroundColor:'red'
        }
      });

      var helloMod = new Modifier({
        size: [100, 100],
        origin: [.5, 0]
      });

      context.add(helloMod).add(helloSurf);
    });
  </script>
<html>
于 2014-05-28T20:59:13.053 回答