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

将famo.us与普通meteor/html应用程序混合使用,meteor,famo.us,Meteor,Famo.us,我已经开始使用famo.us开发流星应用程序,而famo.us似乎并不“玩得好” 它接管了应用程序的主呈现,从而丢失了正常的滚动和其他类似html的行为 我禁用了著名的.css,但它似乎在famo.usjavascript或垫片中更深入。我想知道是否有人可以评论一种让你出名的方法 例如,使用famo.us制作一个浮华的topmenu可能很好,但是如果网站内部有文本视图,你就不希望受到干扰。“全著名”网站的一个例子是他们自己的大学,在那里,许多文档页面将更易于作为普通html使用,就像Flash所

我已经开始使用famo.us开发流星应用程序,而famo.us似乎并不“玩得好” 它接管了应用程序的主呈现,从而丢失了正常的滚动和其他类似html的行为

我禁用了著名的.css,但它似乎在famo.usjavascript或垫片中更深入。我想知道是否有人可以评论一种让你出名的方法

例如,使用famo.us制作一个浮华的topmenu可能很好,但是如果网站内部有文本视图,你就不希望受到干扰。“全著名”网站的一个例子是他们自己的大学,在那里,许多文档页面将更易于作为普通html使用,就像Flash所处的位置一样


谢谢

就像你提到的,大多数技术都有自己的位置。这是关于为正确的工作找到正确的工具。你是对的,网站上的文档感觉有点奇怪,但这两种技术都可以做得更好。Famo.us将在构建类似桌面/移动应用程序的应用程序方面脱颖而出,而不是构建类似网页的应用程序。这也将是一个精彩的游戏选择

虽然我对meteor渲染的工作原理不太熟悉,但是使用Famo.us实现您可能需要的功能的想法应该是相同的。在Famo.us中,最重要的事情是不要与上下文对象作斗争。战斗从来都不是好事。我提供了一个快速的示例,返回了默认的浏览器滚动条。您只需使用单个曲面作为“body wrapper”div,并将其overflow属性设置为scroll。然后将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);
var-Engine=require('著名/核心/引擎');
var表面=要求(“著名/核心/表面”);
var context=Engine.createContext();
var context_size=context.getSize();
洛雷姆=“Lorem ipsum door sit amet,adipiscing elit,sed do eiusmod\n进驻劳工和就业市场。但最低限度的成本是由ullamco Laboratoris nisi和aliquip在商品市场上进行的。两人或两人在婚姻中相互尊重\n在婚姻无效的情况下死亡。除非圣约翰未经事先批准,否则不应因疏忽而导致动物死亡。”;
content=“+lorem+”;
曲面=新曲面({
大小:上下文大小,
内容:内容
});
添加(表面);
将Famo.us元素合并到网页中的其他方法很少。与Facebook小部件的工作方式类似,您可以简单地使用iframe。这两种方法都可以。您可以托管Famo.us小部件并将其插入HTML网站,或者将HTML文档插入Famo.us应用程序

还记得Famo.us还只是一个婴儿。他们想听听你的反馈。我想使用Famo.us进行更流畅的布局会有很多,类似于盒子模型可以实现的布局

我希望这能有所帮助


祝你好运!

Atmosphere上有一个插件可以帮助你实现Famo.us和Meteor的集成:它叫famono

Youtube上有一段很好的视频,用一些代码解释了一些rational,这对你也有很大帮助:

和你一样,我正在检查Famo.us是否能满足我对Meteor的需求。我会在我的博客上发布我的进展:

部分重复我的答案:

我刚刚发布了一个预览版,这是一个在Blaze和名人之间紧密集成的尝试。到目前为止,我所看到的所有其他方法都会避开Blaze的大部分部分,并且需要用JavaScript编写大量代码,这在Meteor中让我觉得非常不自然。Meteor代码应该小、简洁、简单,并具有强大的效果。这里是e它的几个示例:(每个模板形成一个renderNode,任何HTML都放在一个表面上。修改器/视图/选项被指定为组件属性)

它还可以与iron router一起制作盒子。带有示例代码的实时演示:


关于滚动等,根据johntraver的回答,您可以将CSS溢出属性更改为滚动以返回滚动条,对于其中的所有内容,请像往常一样使用Meteor模板。该软件包根本不会妨碍Meteor的模板,而只是提供了一些额外的帮助,用于从中声明曲面、视图等侧模板(例如,列表的滚动视图,可以在Meteor编码的无限滚动机制上运行,无需额外工作)。

预览[Meteor著名组件](),到目前为止,它帮助我减少了必须编写的CSS

但它可以像下面那样设置曲面属性吗

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

or

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

fomono有点老了,目前可能不起作用。虽然Meteor integration很快就会有更新。这似乎是事实上的线索。我没有运气就尝试从名人.css中删除了
溢出:隐藏的
,所以我想你是对的,它在内心深处,我最终会与上下文管理器发生冲突。因此,我想在这一点上我是对的禁止使用famo.us,除非我在同一个应用程序中放弃任何类型的普通html/引导类型的内容-将所有内容传送到著名的surface并不是一个切实可行的选择(这是一个meteor应用程序,已经有足够复杂的DOM hijinks在进行)
<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
    );
  }
});
var firstSurface = new Surface({
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

or

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