Question

我已经开始使用famo.us作为流星应用程序，而Famo.us似乎并没有“好玩”＃34; 它接管应用程序的主要渲染，使得正常滚动和其他类似html的行为丢失。

我禁用了famous.css，但它似乎更深入famo.us javascript，或者也许是垫片。我想知道是否有人可以评论一种切换着名的方式？

例如，使用famo.us进行华丽的topmenu可能会很棒，但是那些带有短暂视图的网站内部你不想要干扰。一个＆＃34;所有着名的＆＃34;网站是他们自己的大学，其中许多文档页面更像是普通的HTML，就像Flash一样。

提示赞赏！

Answer 1

就像你提到的那样，大多数技术都有它的地位。这是为正确的工作找到合适的工具。你是正确的，网站上的文档感觉有点奇怪，但任何一种技术都可以做得更好。 Famo.us将脱颖而出，构建看起来像桌面/移动应用程序的应用程序，而不是看起来像网页的应用程序。它也将是游戏的绝佳选择。

虽然我对流星渲染的工作原理不太了解，但是围绕使用Famo.us的想法应该是相同的。在Famo.us中最重要的事情就是与Context对象作战。战斗永远不会好。我把一个快速示例放在一起，带回了默认的浏览器滚动条。您只需使用单个曲面作为“body-wrapper”div，并将其设置为overflow属性以进行滚动。然后将剩下的HTML注入该表面。

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

var context = Engine.createContext();
var context_size = context.getSize();

lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
content = "<div style='overflow:scroll;width:100%;height:100%'><div style='width:100%;height:200%;background-color:#aaffaa;font-size:72px;line-height:72px'>" + lorem + "</div></div>";
surface = new Surface({
  size: context_size,
  content: content
});
context.add(surface);

您可以将Famo.us元素纳入网页的其他方法很少。类似于Facebook小部件的工作方式，您可以简单地使用iframe ..这可以是两种方式。您可以托管一个Famo.us小部件并将其注入HTML网站，或者您可以将一个html文档注入Famo.us应用程序。

还记得Famo.us还是个孩子。他们希望听到您的反馈。我假设使用Famo.us可以获得更多流畅的布局，类似于使用盒子模型可以实现的布局。

我希望其中一些有帮助！

祝你好运！

Answer 2

How do Meteor's blaze and Famo.us play together?的部分副本我的答案来自：

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

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

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

Scrollview（可以拆分为子模板）：

<template name="famousInit">
  {{#Scrollview size="[undefined,undefined]" items=items}}
    {{#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.dataFromTemplate(tpl);
    fview.modifier.setTransform(
      Transform.translate(Math.random()*500,Math.random()*300),
      springTransition
    );
  }
});

它还可以使用铁制路由器。带示例代码的现场演示：

http://famous-views.meteor.com/

关于滚动等，根据johntraver的回答，您可以更改CSS overflow属性以滚动以获取滚动条的背面，对于其中的所有内容，像往常一样使用Meteor模板。该软件包根本不会妨碍Meteor的模板，而只是提供一些额外的帮助，用于从模板内部声明表面，视图等（例如Scrollview列表，可以在Meteor上运行） - 编码无限滚动机制，无需额外工作）。

Answer 3

Atmosphere上有一个插件可以帮助你整合Famo.us和Meteor：它被称为famono。

Youtube上的这个精彩视频用一些代码解释了一些理性，这些代码也应该对你有很大的帮助： https://www.youtube.com/watch?feature=player_embedded&v=bmd-cXSGQAA

就像你一样，我正在检查Famo.us是否能满足我对Meteor的需求。我会在我的博客上发布我的进展：http://pem-musing.blogspot.fr/

Answer 4

预览[着名的流星组件]（https://atmospherejs.com/package/famous-components），到目前为止，它帮助我减少了我必须写的CSS。

但它可以设置如下的表面属性吗？

var firstSurface = new Surface({
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

or

firstSurface.setproperties({color: 'red'})

将famo.us与普通的流星/ html应用程序混合使用

4 个答案: