Как я могу использовать ссылки CDN famo.us в метеорном приложении?

С выпуском famo.us все библиотеки размещены в CDN. Как я могу использовать их из приложения метеора?

У меня много проблем с "define" в коде 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 котла и поместил его в папку 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.


meteor famo.us
person Keith Nicholas    schedule 23.05.2014    source источник
comment
Вы пробовали добавить его как пакет?   -  person Jeremy S.    schedule 23.05.2014
comment
Разве у Meteor нет способа добавить отдельные файлы JS, недоступные в виде пакета Atmosphere? Если это так, просто загрузите знаменитый.js из CDN и сохраните его локально в своем проекте. Таким образом, система сборки Meteor может его упаковать.   -  person Andrew De Andrade    schedule 24.05.2014
comment
не все так просто с тем, как работает famo.us   -  person Keith Nicholas    schedule 24.05.2014

Ответы (3)


arrow_upward
3
arrow_downward

Пробовали ли вы загружать main.js непосредственно в тег script вместо использования тега script, чтобы «требовать» его. Я делаю что-то подобное, когда я ввожу код 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

});
person rich    schedule 25.05.2014
comment
метеор работает немного по-другому. Он находит все js в вашем проекте и объединяет их все вместе, кажется, делает это до загрузки сценариев CDN. - person Keith Nicholas; 26.05.2014
comment
на самом деле, с небольшим количеством взлома, я заставил это работать, спасибо! - person Keith Nicholas; 26.05.2014
comment
По состоянию на февраль 2015 г. рекомендуемый способ использования Famo.us с Meteor – добавить один из пакетов Famo.us. . - person Dan Dascalescu; 18.02.2015

arrow_upward
1
arrow_downward

Вы пытались импортировать пакет mjn:famous в свой метеоритный проект?

метеор добавить mjn:известный

person Lucas Blancas    schedule 11.02.2015
comment
По состоянию на февраль 2015 г. рекомендуемый способ использования Famo.us с Meteor – добавить один из пакетов Famo.us. . - person Dan Dascalescu; 18.02.2015

arrow_upward
0
arrow_downward

отличный вопрос; 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>
person neaumusic    schedule 28.05.2014
comment
По состоянию на февраль 2015 г. рекомендуемый способ использования Famo.us с Meteor – добавить один из пакетов Famo.us. . - person Dan Dascalescu; 18.02.2015
comment
Нет. Рекомендовано несколько сотен человек. - person Dan Dascalescu; 19.02.2015