将 Meteor 与 vanilla Famo.us 反应性地使用答案

【问题标题】：Using Meteor reactively with vanilla Famo.us将 Meteor 与 vanilla Famo.us 反应性地使用
【发布时间】：2015-03-17 05:12:17
【问题描述】：

我想通过 Meteor 使用 Fameo.us。

关于 Meteor 我对由它，只有 模板变量 和 模板助手 提到游标。
关于 Famo.us 我对由提供的高性能 gui 感兴趣它。

问题 A： 是否有可能通过 vanilla Fameo.us Surfaces 实现 1. 中的**反应性 strong> 和 Layouts 并为他们的 content 提供 Meteor cursors?**

简单的喜欢：

//Announcements, a Meteor Mongo reactive data source
Annos = new Mongo.Collection('annos');

//surface, a Famo.us Surface.
var surface = new Surface({
    content: Annos.find()//a Meteor cursor
})

更新：我现在使用cursor.observe() 来检测数据源的变化并采取.observe() 提供的回调操作，例如addedAt、changedAt。此回调使用数据源中添加或更改的数据创建或更新 Surfaces。

但我在浏览器屏幕上创建的表面中只看到[object Object]。当我只使用doc.key 而不是下面的Blaze 函数时，我可以根据需要查看数据。但这让我放弃了 Meteor 模板 以及它的 事件地图 和简单的 模板语法。

问题 B： 我应该怎么做才能从 Blaze 渲染中获取 HTML 字符串格式的返回？

问题 C： 如何以这种不同的方法将 Meteor 事件用于 Meteor 模板？现在如果我使用Template.myTemplate.events({events map})，它不起作用。

与问题相关的代码片段是：

//For Reactivity
    cursorToArray = function(cursor, renderables, createFn){
        cursor.observe({
            addedAt: function(document, atIndex, before) {
                renderables.splice(atIndex, 0, createFn(document));
            },
            changedAt: function(newDocument, oldDocument, atIndex) {
                //there was a note on this on the github,
                //look outdated oldest repo for if reactiveSurface defined there too.
                renderables[atIndex] = createFn(newDocument);
            }
        });
    }
    cursorToArray(Ilans.find(), ilansSurfaces, createSurface);


        var ilansSurfaces = [];

        function createSurface(doc) {
            var surface = new Surface({
                size: [undefined, 100],
                //content: doc.key
                content: Blaze.renderWithData(Template.ilanTemplate, doc)
            });
            surface.pipe(scrollview);
            return surface;
        }

我的模板是：

    <head>
  <title>Meteor + Famous Playground</title>

  <!-- Blatanly stolen Meteor favicon. -->

  <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
</body>

<template name="ilanTemplate">
    <p>{{key}}</p>
</template>

【问题讨论】：

关于这个话题的文章很多很多。只是谷歌“流星和著名”。有一些软件包可以让它变得简单。
其实我已经做到了。但找不到我要找的东西。
meteor devshop 中的方法现在似乎已经过时了，而不是直接作为流星模板方式。
请查看 Stack Overflow 指南。您尝试过哪些方法？您尝试了哪些无效的软件包？
方法我在这里询问是否可能目前似乎不可用。这与我尝试过的方法无关。你的第二个问题也不适用，因为我尝试过一些软件包，gadicohen: Famous-views、rain:famono 和 mjn: Famous，当然他们按照他们承诺的方式工作，但不是我的方式问我到目前为止所看到的。所以不能说这些软件包不起作用。他们工作。

标签： meteor famo.us

【解决方案1】：

问题 A： 已在问题更新部分回答。应该观察数据源上的游标对象，例如； Anno.find() 类似于 Ann.find().observe() 并使用后者的预定义回调并为其中的每个回调定义要采取的所需操作。并通过在 Blaze 渲染函数和 Meteor 模板中将返回的文档数据传递给 Surface 的content:，使用这些回调在为每个定义的函数中返回的文档对象创建或更新创建的表面。

问题 B：如果 HTML 是 Blaze 渲染的所需输出，则应使用 Blaze.toHTMLWithData() 方法而不是 Blaze.renderWithData() 方法。

As Meteor docs says on Blaze sections 在这些部分：

对于Blaze.toHTMLWithData()：

使用数据上下文将模板或视图呈现为 HTML。

对于Blaze.renderWithData()：

使用数据上下文将模板或视图呈现给 DOM 节点。

，这样famo.us Surface的放在屏幕和放在内容字段的输出是HTML而不是DOM对象[objects, Object]。

【讨论】：