Question

如果您查看famo.us网站上的任何演示，它们都会让您输入代码，右侧的输出会实时更新。我到处寻找，但我似乎无法找到有关如何实现这一目标的任何文件。

实施例： http://famo.us/examples/0.2.0/core/context/example

Answer 1

我决不知道这是否是如何实现这个具体的例子，但我能够很快地把一些东西放在一起，至少可以给你一些指导。

在以下示例中，我使用FlexibleLayout来划分页面。然后我添加一个TextareaSurface来创建一个编辑器和一个Container表面来渲染结果。我还将一个RenderNode添加到ContainerSurface，以便我可以保留相同的容器，并冲洗并重用RenderNode。

现在如何改进......

1） Famo.us演示使您可以创建自己的上下文并添加到其中。在我的例子中，'outputNode'是输出显示的出口。在我的情况下，这只是为了简单，但为了实现他们已经实现的目标，我将自己解析代码并用我知道的要呈现的节点替换主上下文。

2）我在自己的代码中使用的名称使用某种前缀应该更加独特。现在，编辑器中代码的名称很容易与我用来编写编辑器的变量名冲突。

无论如何，这就是我所做的，希望它有所帮助！

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var RenderNode          = require("famous/core/RenderNode");

var FlexibleLayout      = require("famous/views/FlexibleLayout");

var ContainerSurface    = require("famous/surfaces/ContainerSurface");
var TextareaSurface     = require("famous/surfaces/TextareaSurface");

var context             = Engine.createContext();

var layout = new FlexibleLayout({ratios:[0.5,0.5]});

var layoutCells = [];
layout.sequenceFrom(layoutCells);

var editor = new TextareaSurface({
  size:[undefined,undefined],
  properties:{
    fontSize:'18px',
    fontFamily:'courier',
    padding:'10px'
  }
});

var code = ""
code += "var surface = new Surface({      " + "\n";
code += "  size:[200,200],                " + "\n";
code += "  content:'Hello',               " + "\n";
code += "  properties:{                   " + "\n";
code += "    backgroundColor:'green',     " + "\n";
code += "    lineHeight:'200px',          " + "\n";
code += "    textAlign:'center'           " + "\n";
code += "  }                              " + "\n";
code += "});                              " + "\n";
code += "                                 " + "\n";
code += "outputNode.add(surface);         " + "\n";

editor.setValue(code);

var outputNode;

var evalCode = function(code){
  try {
    outputNode.render = function(){return null};
    makeOutput();
    outputContainer.add(outputNode);
    eval(code);
  }
  catch (err) {
    console.log("Error: "+err);
  }
}

editor.on('keyup',function(){
  var code = editor.getValue();
  evalCode(code);
})

layoutCells.push(editor);

var makeOutput = function(){
  outputNode = new RenderNode({
    size:[undefined,undefined],
    backgroundColor:'white'
  })
}

outputContainer = new ContainerSurface({
  size:[undefined,undefined],
  backgroundColor:'white'
})

outputContainer.add(outputNode);

makeOutput();
evalCode(code);

layoutCells.push(outputContainer);

context.add(layout);

他们如何在famo.us演示中进行实时内容更新？

1 个答案: