12

2 技术：

  • Meteor 与 blaze 模板引擎
  • Famo.us 和他们很棒的 gui 框架

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

现在出现了 famo.us 及其所有优点，但基于代码的 gui 的缺点是不再有把手的位置......</p>

  • 目前将这两种​​技术混合在一起的做法是什么？
  • 他们是完全分离的吗？
  • 使用“observe”/“Deps.autorun”机制是否是一种常见的做法，一个由流星反应项目更新的 famo.us 元素？
4

5 回答 5

16

我刚刚发布了 Famous -components的预览版，这是对 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-04-18T17:08:21.493 回答
3

这是 2014 年 2 月 Devshop 关于将Meteor 与 Famous集成的演示文稿。我已经两个月没见过了，但我清楚地记得他们提到是的，你利用了 Collection.observe模式。

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

几天前，一个利用 require.js API 的包被提交到 Atmosphere。它被称为法莫诺。

我已经成功地用它来掀起一个简约的概念证明，使用observe. 你可以在 Github 上找到源代码，我也是用 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);
};
于 2014-04-16T17:10:25.443 回答
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);
于 2014-05-19T07:45:08.843 回答
1

请务必注意，Famo.us 中的表面只是 div，您可以将 Blaze 模板直接插入表面。

GitHub 上的 Zol 有一个 Famous-Meteor 排行榜的代码

于 2014-05-12T05:40:22.473 回答
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)
于 2015-05-21T20:52:43.470 回答