如何在流星應用程序中使用famo.us CDN鏈接？

隨着famo.us的發佈，它將所有庫作爲CDN託管的庫。我怎樣才能在流星應用程序中使用它們？如何在流星應用程序中使用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>

然後，我已經採取了main.js鍋爐板的src文件夾，放入的客戶端/兼容性文件夾流星。但它並不真正起作用。回來與

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); 
});

從查看源，它看起來像它的，因爲流星編制main.js並列入在famo.us的東西被加載之前。

來源

2014-05-23 Keith Nicholas

你試過把它作爲一個包裹來添加嗎？ –

流星沒有辦法添加單個JS文件作爲Atmosphere包不可用嗎？如果是這樣，只需從CDN下載famous.js並將其保存到您的項目中。這樣Meteor的構建系統就可以打包。 –

與famo.us的作品 –

您是否嘗試過直接在腳本標記中加載main.js，而不是使用腳本標記來「需要」它。我正在做類似的工作，我直接將main.js代碼注入到html中，但在此處是一個例子，我已經把它分離出來並且可以工作（儘管我沒有使用流星）。

很明顯，我也對代碼做了一些修改而不是使用define，但是這個改變是直截了當。下面是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-25 21:20:22 rich

不一樣那麼簡單，流星的作品有點不同。它可以找到你項目中的所有js，並將它們集中在一起，似乎在加載CDN腳本之前就這樣做了。 –

實際上，隨着一些黑客入侵，我得到了這個工作，謝謝！ –

截至2015年2月，與Meteor一起使用Famo.us的推薦方式是添加一個[Famo.us包]（https://atmospherejs.com/?q=famous）。 –

很大的問題; famo.us正在從約曼/咕嚕

遠

清理豐富的答案，這裏有一個簡單的的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-28 20:59:13 neaumusic

截至2015年2月，與流星一起使用Famo.us的推薦方式是添加一個[Famo.us軟件包]（https://atmospherejs.com/?q=famous）。 –

由您推薦 – neaumusic

號碼[由幾百人推薦]（https://github.com/gadicc/meteor-famous-views）。 –

您是否嘗試導入MJN：著名的包到您的流星的項目？

meteor add mjn：着名的

來源

2015-02-11 20:47:26

截至2015年2月，推薦使用Famo的方式。我們與Meteor是添加一個[Famo.us包]（https://atmospherejs.com/?q=famous）。 –

如何在流星應用程序中使用famo.us CDN鏈接？

回答

相關問題