使用 famo.us with meteor without famous-views

Question

我想在我的流星应用程序中使用 famo.us。我想在没有 famous-views 包的情况下编写纯 famo.us javascript。现在，我有一个问题：是否可以与 blaze 一起使用？例如，我可以使用 {{data}} 在具有反应数据的表面中创建内容吗？

Answer 1

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

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

然后直接调用它：

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

路由还不是很好，但你可以用它创建一个真正的 "single page" 应用程序。

Answer 2

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

 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 存储库示例中的代码。

Answer 3

您可以通过创建一个空的 div 并使用 blaze 渲染它来在 Famous surface 中渲染响应式模板，将结果作为内容传递给您的 surface 并开始使用。

  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')
)

使用 famo.us with meteor without famous-views

Use famo.us with meteor without famous-views

meteor

famo.us