Meteor's blaze 和 Famo.us 如何一起玩?

2024-01-08

2 技术:

  • 使用 blaze 模板引擎的 Meteor
  • Famo.us 及其出色的 GUI 框架

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

现在famo.us 及其所有优点来了,但基于代码的GUI 的缺点是不再有车把的地方了……

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

我刚刚发布了预览版著名组件 https://atmospherejs.com/package/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>

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

Events:

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://known-views.meteor.com/ http://famous-views.meteor.com/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Meteor's blaze 和 Famo.us 如何一起玩? 的相关文章

随机推荐