使用 famo.us 和没有名望的流星答案

【问题标题】：Use famo.us with meteor without famous-views使用 famo.us 和没有名望的流星
【发布时间】：2015-05-22 04:49:05
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以通过创建一个空 div 并使用 blaze 渲染到 Famous Surfaces 中渲染反应模板，将结果作为内容传递给您的 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')
)

【讨论】：

【解决方案2】：

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

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

那就叫它吧：

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

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

【讨论】：

【解决方案3】：

有一个名为 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 存储库中示例中打包的代码。

【讨论】：