Meteor's blaze和Famo.us一起玩

How do Meteor's blaze and Famo.us play together?

本文关键字：Famo us 一起 blaze Meteor      更新时间：2023-09-26

2技术：

  • 带火焰模板引擎的流星
  • Famo.us及其出色的gui框架

我来自流星方面，我个人喜欢使用{{胡子}}（车把）从数据驱动gui，反应式会话/数据库使这非常高效和直观。

现在famo.us及其所有优点都出现了，但基于代码的gui的缺点是再也没有把手了…

  • 目前将这两种技术混合在一起的做法是什么
  • 它们是完全游离的吗
  • 使用"observe"/"Deps.autorun"机制是否是一种常见的做法？一个著名的元素将由流星反应项目更新

我刚刚发布了著名组件的预览，这是Blaze和famous之间紧密集成的尝试。到目前为止，我看到的所有其他方法都超越了Blaze的大部分，需要用JavaScript编写大量代码，这对我来说在Meteor中非常不自然。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>

滚动视图（可以拆分为子模板）：

<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/

以下是2014年2月Devshop关于Meteor与Famous集成的演示。我已经两个月没有看到它了，但我清楚地记得他们提到是的，你利用了Collection。观察模式。

简而言之，就像使用React或Three.js一样，Famous对Blaze模板引擎是迟钝的。它完全避开了它，并将所有元素呈现为平面DOM。阅读马克对此的回答。

几天前向Atmosphere提交了一个利用require.js API的软件包。它叫Famono。

我已经成功地用observe构建了一个极简主义的概念证明。你可以在Github上找到源代码，我也用Metrodeploy部署了它。

代码本身非常简单。一个集合：

// 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);
};

除了"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);

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

GitHub上的Zol有著名流星排行榜的代码

这是一个不需要使用库的普通实现。

创建并清空div，让blaze渲染到其中，并将其作为内容传递给您著名的曲面。你现在有一个反应性的内容在著名。

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)
相关文章：