Реализация Famo.us

Я пытаюсь научиться пользоваться библиотекой Famo.us. Для начала я просто хочу представить поверхность в моем <body>. Так что я попытался это:Реализация Famo.us

<html> 
<head> 
<script> 

    var Engine = require('js/famous/core/Engine'); 
    var Surface = require('js/famous/core/Surface'); 

    var mainContext = Engine.createContext(); 

    var firstSurface = new Surface({ 
     size: [100, 100], 
     properties: { 
     backgroundColor: '#FA5C4F' 
     } 
    }); 

    mainContext.add(firstSurface); 
</script> 

</head> 

<body> 
</body> 
</html>

Однако я получаю следующее сообщение об ошибке:

Uncaught ReferenceError: require is not defined

Так что я пытался добавить сценарии к <head>:

<script type="text/javascript" src="js/lib/functionPrototypeBind.js"></script> 
<script type="text/javascript" src="js/lib/classList.js"></script> 
<script type="text/javascript" src="js/lib/requestAnimationFrame.js"></script> 
<script type="text/javascript" src="js/lib/require.js"></script>

И теперь я получение этой ошибки:

Uncaught Error: Module name "js/famous/core/Engine" has not been loaded yet for context: _. Use require([]) 
http://requirejs.org/docs/errors.html#notloaded

Что я делаю неправильно и как я могу представить эту Поверхность в <body>?

источник

2014-12-28 Igal

Вот что вам не хватает, используя Require.js:

нужно иметь требуете загружено до использования require.js
обернуть код в модуле (определить)
Требуются модуль
Может помещать некоторый контент на вашу поверхность (по желанию)

Примечание: Смотрите ниже стандартной глобальной сборки без require.js

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="description" content="Famo.us 0.3.4" /> 
    <meta charset="utf-8"> 
    <title>Famous 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" /> 
    <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 src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script> 

    <!-- famous --> 
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" /> 
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous.min.js"></script> 
    <script type="text/javascript"> 
     define('main', function (require, exports, module) { 
     var Engine = require('famous/core/Engine'); 
     var Surface = require('famous/core/Surface'); 

     var mainContext = Engine.createContext(); 

     var firstSurface = new Surface({ 
      content:'My First Surface', 
      size: [100, 100], 
      properties: { 
      backgroundColor: '#FA5C4F' 
      } 
     }); 

     mainContext.add(firstSurface); 
     }); 

     require(['main']); 
     console.log('------------start------------') 

    </script> 
    </head> 
    <body class='famous-root'> 
    </body> 
</html>

Помните: Вы не должны использовать require.js для Famo.us. Существует также стандартная глобальная сборка javascript. Библиотека как раз случается быть написана для require.js

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title>Famo.us App</title> 
    <meta name="description" content="Famo.us 0.3.1 global-seed" /> 
    <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> 

    <!-- famous --> 
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" /> 
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous-global.min.js"></script> 
    <script type="text/javascript"> 
     var Engine = famous.core.Engine; 
     var Surface = famous.core.Surface; 

     var mainContext = Engine.createContext(); 

     var firstSurface = new Surface({ 
     content:'My First Surface', 
     size: [100, 100], 
     properties: { 
      backgroundColor: '#FA5C4F' 
     } 
     }); 

     mainContext.add(firstSurface); 

    </script> 
    </head> 
    <body></body> 
</html>

источник

2014-12-28 18:52:11 talves

Я прошу прощения за столь поздний ответ ... Большое спасибо за объяснение! Это мне очень помогло! :) – Igal

Реализация Famo.us

ответ

Смежные вопросы