【问题标题】:mixing famo.us with a normal meteor/html app将 famo.us 与普通的流星/html 应用程序混合
【发布时间】:2014-06-04 10:04:33
【问题描述】:

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

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

例如,将 famo.us 用于华丽的顶部菜单可能会很棒,但是您不想干扰带有文本视图的网站内部。 “知名”网站的一个例子是他们自己的大学,那里的许多文档页面更适合作为纯 html 使用,就像 Flash 有它的位置一样。

提示赞赏!

【问题讨论】:

    标签: meteor famo.us


    【解决方案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 来实现与 box-model 可以实现的布局类似的更流畅的布局方面会有很多。

    我希望这会有所帮助!

    祝你好运!

    【讨论】:

    • 这似乎是真正的线索。我尝试从着名的css中删除overflow:hidden但没有运气,所以我想你是对的,它在内心深处是正确的,我最终会与上下文管理器战斗。所以我想在这一点上我被禁止使用 famo.us 除非我在同一个应用程序中放弃任何类型的普通 html/bootstrap 类型的内容 - 将所有内容管道到一个著名的表面并不是一个真正可行的选择(这是一个流星应用程序,已经有足够复杂的 DOM hijinks 进行了)
    【解决方案2】:

    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/

    【讨论】:

    • fomono 有点旧,目前可能无法使用。很快就会有关于 Meteor 集成的更新。
    【解决方案3】:

    How do Meteor's blaze and Famo.us play together? 的部分重复我的回答:

    我刚刚发布了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://famous-views.meteor.com/

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

    【讨论】:

      【解决方案4】:

      预览 [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'})
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-05-21
        • 1970-01-01
        • 1970-01-01
        • 2011-04-10
        • 1970-01-01
        • 2023-03-28
        • 1970-01-01
        • 2018-07-22
        相关资源
        最近更新 更多