Meteor的火焰和Famo.us如何一起玩?

时间:2014-04-15 12:15:06

标签: javascript meteor meteor-blaze famo.us

2技术:

  • 流星与火焰模板引擎
  • Famo.us及其精彩的gui框架

我来自流星方面,我个人喜欢使用{{mustache}}(把手)从数据驱动gui,反应式会话/数据库使这真正高效和直观。

现在来了famo.us及其所有优点,但基于代码的gui的缺点是没有把手的地方了......

  • 将两种技术混合在一起的现行做法是什么?
  • 他们完全分离吗?
  • 正在使用"观察" /" Deps.autorun"机制是一个普遍的做法到处都是由流星反应项更新的famo.us元素?

5 个答案:

答案 0 :(得分:16)

我刚刚发布了famous-components的预览版,这是Blaze和Famous之间紧密整合的尝试。到目前为止,我所看到的所有其他方法都是Blaze的大部分步骤,并且需要在JavaScript中编写大量代码,这对我来说在Meteor中感觉非常不自然。流星代码应该小巧,简洁,易于获得强大的结果。下面是一些示例:(每个模板形成一个renderNode,任何HTML都放在Surface上。修饰符/视图/选项被指定为组件属性)

<template name="test">
  {{#Surface size=reactiveSizeHelper}}
    <p>hello there</p>
  {{/Surface}}

  {{#if loggedIn}}
    {{>SequentialLayout template='userBar' direction="X"}}
  {{else}}
    {{>Surface template='pleaseLogIn' origin="[0.5,0.5]"}}
  {{/if}}
</template>

Scrollview(可以拆分为子模板):

<template name="famousInit">
  {{#Scrollview size="[undefined,undefined]"}}
    {{#famousEach items}}
      {{#Surface size="[undefined,100]"}}{{name}}{{/Surface}}
    {{/famousEach}}
  {{/Scrollview}}
</template>

Template.famousInit.items = function() { return Items.find() };

活动:

Template.blockSpring.events({
  'click': function(event, tpl) {
    var fview = FView.fromTemplate(tpl);
    fview.modifier.setTransform(
      Transform.translate(Math.random()*500,Math.random()*300),
      springTransition
    );
  }
});

它还可以使用铁制路由器。更多细节,文档,现场演示,全部在 http://famous-views.meteor.com/

答案 1 :(得分:3)

以下是2014年2月Devshop关于整合Meteor with Famous的演示文稿。我在两个月内没有看到它,但我明确记得他们提到是的,你利用了Collection.observe 模式。

简而言之,就像使用 React Three.js 一样,Famous对Blaze模板引擎很不敏感。它完全回避它,并将所有元素呈现为扁平DOM。阅读Mark's answer about this

几天前,一个利用require.js API的软件包被提交给Atmosphere。它被称为Famono

我用observe成功地用它来制作简约的概念证明。您可以找到source code on Github,我也deployed it with meteor deploy

代码本身非常简单。集合:

// collections/clicks.js
Clicks = new Meteor.Collection('clicks');

服务器上用于添加项目的小工具:

// server/fixtures.js
if (Clicks.find().count() === 0) {
  Clicks.insert({ 'number': 0 });
}

index.js文件:

// client/index.js
UI.body.rendered = function() {
  require("famous-polyfills"); // Add polyfills
  require("famous/core/famous"); // Add the default css file

  var Engine = require('famous/core/Engine');

  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');

  var mainContext = Engine.createContext();

  var containerModifier = new Modifier({
    origin: [0.5, 0.5]
  });

  mainContext = mainContext.add(containerModifier);

  var square = new Surface({
    size: [200, 200],
    properties: {
      lineHeight: '200px',
      textAlign: 'center',
      background: 'rgba(200, 200, 200, 0.5)'
    }
  });

  Clicks.find().observe({
    added: function(clickCounter) {
      // This is the way that you replace content in your surface.
      // Injecting handlebars templates here will probably do nothing.
      square.setContent(clickCounter.number);
    },

    changed: function(clickCounter) {
      square.setContent(clickCounter.number);
    }
  });

  square.on('click', function() {
    // Hardcoded to work with only the first item in the collection.
    // Like I said, minimal proof of concept.
    var clickCounter = Clicks.findOne();

    Clicks.update(clickCounter._id, { number: clickCounter.number + 1 });
  });

  mainContext.add(square);
};

答案 2 :(得分:1)

重要的是要注意Famo.us中的曲面只是div,您可以将Blaze模板直接插入曲面。

Zol on GitHub has code for a Famous-Meteor leaderboard

答案 3 :(得分:1)

除了“Namal Goel”的回答:以下是如何将Meteor模板渲染到着名表面的示例:

在.html文件中

<template name="test">
    This is rendered using Blaze template
</template>

将模板添加到上下文中:

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

var meteorTest = new MeteorSurface({
    template: Template.test,
    size: [200, 200]
})

aContext.add(meteorTest);

答案 4 :(得分:0)

这是一个无需使用库的香草实现。

为blaze创建并清空div以渲染并将其作为内容传递到着名的曲面。你现在有一个着名的反应内容。

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)