Question

我想在我的流星应用程序中使用famo.us。我想写没有Famous-views包的纯famo.us javascript。现在，我有一个问题：是否可以使用火焰？我可以使用{{data}}在表面中使用被动数据创建示例内容吗？

Answer 1

您可以通过创建一个空div并使用blaze渲染到其中来渲染Famous表面中的反应模板，将结果作为内容传递到曲面并且您可以继续使用。

  mainContext = famous.core.Engine.createContext();

  div = document.createElement('div');
  Blaze.render(Template.moo,div)

  surface = new famous.core.Surface(  
    content: div,
    size: [200, 200],
    properties: {
      backgroundColor: 'rgb(240, 238, 233)',
      textAlign: 'center',
      padding: '5px',
      border: '2px solid rgb(210, 208, 203)',
      marginTop: '50px',
      marginLeft: '50px'
    }
  )

  mainContext.add(surface)


<template name="moo">
  hey ho /{{moo}}/
</template>

Template.moo.helpers( 
  "moo": ->
    Session.get('moo')
)

Answer 2

您可以通过从famono调用一种特殊的模板在表面中包含一个流星模板。

var MeteorSurface = require('library/meteor/core/Surface');

然后就叫它：

var MeteorSurface({
    template: Template.yourtemplate
 });

路由不是很好，但你可以创建一个真正的“单页”应用程序。

Answer 3

有一个名为famono的Meteor插件可以让你使用正常的Famo.us语法。只需将它添加到您的Meteor项目中，然后使用Meteor.startup函数将代码放在客户端/文件夹（或Meteor.isClient内）的.js文件中：

 if (Meteor.isClient) {
// Rig some famo.us deps
famous.polyfills;
famous.core.famous;

// Make sure dom got a body...
Meteor.startup(function() {
    var mainContext = famous.core.Engine.createContext();
    var renderController = new famous.views.RenderController();
    var surfaces = [];
    var counter = 0;

    for (var i = 0; i < 10; i++) {
        surfaces.push(new famous.core.Surface({
             content: "Surface: " + (i + 1),
             size: [200, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: 'center'
             }
        }));
    }

    renderController.show(surfaces[0]);

    famous.core.Engine.on("click", function() {
        var next = (counter++ + 1) % surfaces.length;
        this.show(surfaces[next]);
    }.bind(renderController));

    mainContext.add(new famous.core.Modifier({align: [.5, .5], origin: [.5, .5]})).add(renderController);

  });
}

这只是GitHub存储库中示例中打包的代码。

将famo.us与没有名人观点的流星一起使用

3 个答案: