将famo.us嵌入现有DOM中

nic*_*las 3 famo.us

有没有办法在现有的DOM结构中创建一个famo.us容器?

我的意思是创建一个famo.us上下文,以及生成的.famous-container(?),并将其附加到现有元素.

tal*_*ves 5

绝对.这问得很多. 正如Famo.us的Mike O'Brien在视频中所示,这很容易做到.

jsBin上的示例代码.

var el = document.getElementById('famous-app');

var mainContext = Engine.createContext(el);

var surface = new Surface({
    size: [200, 200],
    content: "Hello World, I'm Famo.us",
    classes: ["red-bg"],
    properties: {
        lineHeight: "200px",
        textAlign: "center",
      backgroundColor: 'rgba(0,0,0,0.5)'
    }
});

mainContext.add(surface);
Run Code Online (Sandbox Code Playgroud)

id='famous-app'在这种情况下,DOM具有元素.它可以是DOM中的任何元素.

  <body>
    <div>Not Famous here</div>
    <div id="famous-app"></div>
  </body>
Run Code Online (Sandbox Code Playgroud)

将其附加到DOM.

示例2 jsBin上的代码.

var el = document.createElement('div');
el.id = 'test';
document.body.appendChild(el);

var mainContext = Engine.createContext(el);

var surface = new Surface({
    size: [200, 200],
    content: "Hello World,<br/> Famo.us-ly added",
    classes: ["red-bg"],
    properties: {
        lineHeight: "40px",
        textAlign: "center",
      backgroundColor: 'rgba(255,0,0,0.5)'
    }
});

mainContext.add(surface);
Run Code Online (Sandbox Code Playgroud)
  <body>
    <div>Not Famous here</div>
  </body>
Run Code Online (Sandbox Code Playgroud)