CODEWITHSUNDEEP
meteorfamo.us
Luca
Luca

Reputation: 558

Use famo.us with meteor without famous-views

I would like to use famo.us in my meteor application. I would like to write pure famo.us javascript without the famous-views package. Now, I have a question: Is it possible to use with blaze? Can I create for example content in a surface with reactive data by using {{data}}?

Upvotes: 2

Views: 194

Answers (3)

Nath
Nath

Reputation: 6864

You can render reactive templates within Famous surfaces by creating an empty div and using blaze to render into it, pass the result as content to your surface and your good to go.

  mainContext = famous.core.Engine.createContext();

  div = document.createElement('div');
  Blaze.render(Template.moo,div)

  surface = new famous.core.Surface(  
    content: div,
    size: [200, 200],
    properties: {
      backgroundColor: 'rgb(240, 238, 233)',
      textAlign: 'center',
      padding: '5px',
      border: '2px solid rgb(210, 208, 203)',
      marginTop: '50px',
      marginLeft: '50px'
    }
  )

  mainContext.add(surface)


<template name="moo">
  hey ho /{{moo}}/
</template>

Template.moo.helpers( 
  "moo": ->
    Session.get('moo')
)

Upvotes: 1

jondamato
jondamato

Reputation: 83

There's a Meteor plugin called famono that will let you use the normal Famo.us syntax. Just add it to your Meteor project and put the code in a .js file inside your client/ folder (or inside Meteor.isClient) with a Meteor.startup function like this:

 if (Meteor.isClient) {
// Rig some famo.us deps
famous.polyfills;
famous.core.famous;

// Make sure dom got a body...
Meteor.startup(function() {
    var mainContext = famous.core.Engine.createContext();
    var renderController = new famous.views.RenderController();
    var surfaces = [];
    var counter = 0;

    for (var i = 0; i < 10; i++) {
        surfaces.push(new famous.core.Surface({
             content: "Surface: " + (i + 1),
             size: [200, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: 'center'
             }
        }));
    }

    renderController.show(surfaces[0]);

    famous.core.Engine.on("click", function() {
        var next = (counter++ + 1) % surfaces.length;
        this.show(surfaces[next]);
    }.bind(renderController));

    mainContext.add(new famous.core.Modifier({align: [.5, .5], origin: [.5, .5]})).add(renderController);

  });
}

This is simply the code that's packaged in the example in the GitHub repository.

Upvotes: 0

nmac
nmac

Reputation: 680

You can include a meteor template in your surface by calling a special kind of template from famono.

var MeteorSurface = require('library/meteor/core/Surface');

then just call it: 

var MeteorSurface({
    template: Template.yourtemplate
 });

routing isn't very good yet, but you can create a truly "single page" app with just this.

Upvotes: 0

Related Questions