0

我已经开始将 famo.us 用于流星应用程序，而 Famo.us 似乎并不“玩得很好”，它接管了应用程序的主要渲染，从而丢失了正常的滚动和其他类似 html 的行为。

我禁用了着名的.css，但它似乎在 famo.us javascript 内部更深，或者可能是 shims。我想知道是否有人可以评论切换名人的方式？

例如，将 famo.us 用于华丽的顶级菜单可能很棒，但是您不希望干扰具有文本视图的站点的内部结构。“著名”网站的一个例子是他们自己的大学，其中许多文档页面更适合作为纯 html 使用，就像 Flash 有它的位置一样。

提示赞赏！

4

4 回答 4

1

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

虽然我对流星渲染的工作原理不太熟悉，但使用 Famo.us 来满足您的需求的想法应该是相同的。在 Famo.us 中不要做的最重要的事情是与 Context 对象作斗争。战斗从来都不是好事。我整理了一个带回默认浏览器滚动条的快速示例。您只需使用单个表面作为“body-wrapper”div，并将其溢出属性设置为滚动。然后将其余的 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 来实现更流畅的布局，类似于使用盒子模型可以实现的布局。

我希望这能有所帮助！

祝你好运！

于 2014-04-20T06:31:04.633 回答
1

Meteor's blaze 和 Famo.us 如何一起玩的部分副本？ 我从那里的回答：

我刚刚发布了 Famous -components的预览版，这是对 Blaze 和 Famous 紧密集成的一次尝试。到目前为止，我看到的所有其他方法都避开了 Blaze 的大部分内容，并且需要用 JavaScript 编写大量代码，这在 Meteor 中对我来说非常不自然。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>

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

<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://着名-views.meteor.com/

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

于 2014-04-21T07:18:04.837 回答
0

预览 [Famous-Components with Meteor] ( 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'})
于 2014-06-20T21:49:20.537 回答
0

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/

于 2014-04-21T00:01:07.683 回答