0

I want to make use of Fameo.us with Meteor.

  1. About Meteor I am interested in the very easy reactivity supplied by it, only by template variables and template helpers mentioning cursors.
  2. About Famo.us I am interested in the performant gui supplied by it.

Question A: Is it possible to achieve the **reactivity in 1. by vanilla Fameo.us Surfaces and Layouts and supply their content with just Meteor cursors?**

Briefly like:

//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
})

UPDATE: I now use a cursor.observe() to detect changes on data source and take callback actions provided by .observe(), like addedAt, changedAt. This callbacks creates or updates Surfaces with added or changed data in data source.

But I see only [object Object] in my created surfaces on the browser screen. When I use just doc.key instead of the Blaze function below, I can see the data as desired. But this leaves me put Meteor Templates away with its event maps, and easy template syntax.

Question B: What should I do to take the return from Blaze render in HTML string format?

Question C: How can I use Meteor events for Meteor Templates in this different approach? For now it does not work if I use Template.myTemplate.events({events map}).

fragment of my code related to the issue is:

//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;
        }

my template is:

    <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>
sçuçu
  • 2,960
  • 2
  • 33
  • 60
  • There are many, many articles about this topic. Just Google “meteor and famous”. There are packages that make it easy. – Geoffrey Booth Mar 14 '15 at 06:43
  • actually I have did it. but could not find what I was looking for. – sçuçu Mar 14 '15 at 18:01
  • the approach in the [meteor devshop](https://www.youtube.com/watch?v=bmd-cXSGQAA) seems out of date now, and not direct as meteor template way. – sçuçu Mar 14 '15 at 19:36
  • Please review the Stack Overflow guidelines. What approaches have you tried? What packages did you try that didn't work? – Geoffrey Booth Mar 14 '15 at 19:41
  • approach I here ask if possible does seem currently unavailable. that is unrelated to ways I have tried. and your second question is not applicable also because there are packages I have tried, gadicohen:famous-views, rain:famono, and mjn:famous, and of course they are working in their way as they promise, but not in the way I ask as I have seen so far. So one cannot say those packages does not work. They work. – sçuçu Mar 14 '15 at 21:08
  • no offense Geoffrey, currently I have achieved a sample with mjn:famous, but approach I have tried there is using .observe() on the cursor and uses setContent() on the surface. What I am after is not that. An approach makes a vanilla famous surface have a helper just like Template helpers that makes its content property reactively maintained by this helpers same named property which is a cursor. Content property to be a var name in it corresponding helper's property, for example. – sçuçu Mar 14 '15 at 21:11

1 Answers1

0

Question A: It is already answered in the question UPDATE part. One should observe a cursor object on the data source like; Anno.find() like Ann.find().observe() and use the latter's predefined callbacks and define desired actions to be taken for each callback in it. And create or update the created surfaces with the document object returned by these callbacks in defined functions for each, by passing the returned document data to the content: of the Surface in a Blaze render function together with a Meteor Template.

Question B: If HTML is the desired output from the Blaze render, one should use Blaze.toHTMLWithData() method instead of the Blaze.renderWithData() method.

As Meteor docs says on Blaze sections on these parts:

for Blaze.toHTMLWithData():

Renders a template or View to HTML with a data context.

for Blaze.renderWithData():

Renders a template or View to DOM nodes with a data context.

,so that the output to put on screen and put on content field of the famo.us Surface is HTML but not a DOM object [objects, Object].

sçuçu
  • 2,960
  • 2
  • 33
  • 60