In che modo le fiamme di Meteor e Famo.us giocano insieme?

Question

2 Technologies:

• Meteor con il motore di template fiammata
• Famo.us con il loro quadro GUI impressionante

Io vengo dal lato meteora, io personalmente come l'utilizzo di {{}} baffi (manubri) per guidare la GUI dai dati, la sessione reattiva/database rende questo davvero efficiente e intuitivo.

Ora è venuto famo.us e tutti i suoi vantaggi, ma l'inconveniente di una GUI basata codice è che non c'è posto per i manubri più ...

• Qual è la prassi corrente per la miscelazione di entrambe le tecnologie insieme?
• Sono completamente dissociativi?
• Sta usando il meccanismo "osserva"/"Deps.autorun" una pratica comune ovunque un elemento famo.us che deve essere aggiornato da un oggetto reattivo meteorico?

Answer 1

Ho appena rilasciato un'anteprima di famous-components, che è un tentativo di una stretta integrazione tra Blaze e Famous. Tutti gli altri approcci che ho visto fino ad ora hanno superato gran parte di Blaze e richiedono la scrittura di grandi quantità di codice in JavaScript, cosa che mi è sembrata molto poco naturale in Meteor. Il codice Meteor dovrebbe essere piccolo, conciso e facile con risultati potenti. Ecco alcuni esempi di ciò che appare: (ogni modello forma un renderNode, qualsiasi HTML viene inserito in una superficie.Modificatori/vista/opzioni sono specificati come attributi dei componenti)

<template name="test"> 
    {{#Surface size=reactiveSizeHelper}} 
    <p>hello there</p> 
    {{/Surface}} 

    {{#if loggedIn}} 
    {{>SequentialLayout template='userBar' direction="X"}} 
    {{else}} 
    {{>Surface template='pleaseLogIn' origin="[0.5,0.5]"}} 
    {{/if}} 
</template> 

Scrollview (può essere diviso in modelli sub):

<template name="famousInit"> 
    {{#Scrollview size="[undefined,undefined]"}} 
    {{#famousEach items}} 
     {{#Surface size="[undefined,100]"}}{{name}}{{/Surface}} 
    {{/famousEach}} 
    {{/Scrollview}} 
</template> 

Template.famousInit.items = function() { return Items.find() }; 

Eventi:

Template.blockSpring.events({ 
    'click': function(event, tpl) { 
    var fview = FView.fromTemplate(tpl); 
    fview.modifier.setTransform(
     Transform.translate(Math.random()*500,Math.random()*300), 
     springTransition 
    ); 
    } 
}); 

funziona anche la scatola con ferro-router. Maggiori dettagli, documenti, dimostrazioni dal vivo, tutti a http://famous-views.meteor.com/

Answer 2

Ecco una presentazione del Devshop di febbraio 2014 sull'integrazione di Meteor with Famous. Non l'ho visto in due mesi, ma ricordo distintamente che menzionano che sì, si fa leva sul modello Collection.observe.

In breve, proprio come con React o Three.js, Luogo è ottuso al motore di template Blaze. Lo elimini completamente e rende tutti gli elementi come DOM piatti. Leggi Mark's answer about this.

Un pacchetto che sfrutta l'API require.js è stato inviato ad Atmosphere pochi giorni fa. Si chiama Famono.

L'ho utilizzato con successo per creare una dimostrazione di concetto minimalista, con observe. È possibile trovare il source code on Github e io anche deployed it with meteor deploy.

Il codice stesso è davvero semplice. Una collezione:

// collections/clicks.js 
Clicks = new Meteor.Collection('clicks'); 

Un po 'appuntamento fisso sul server per aggiungere un elemento:

// server/fixtures.js 
if (Clicks.find().count() === 0) { 
    Clicks.insert({ 'number': 0 }); 
} 

e il file index.js:

// client/index.js 
UI.body.rendered = function() { 
    require("famous-polyfills"); // Add polyfills 
    require("famous/core/famous"); // Add the default css file 

    var Engine = require('famous/core/Engine'); 

    var Surface = require('famous/core/Surface'); 
    var Modifier = require('famous/core/Modifier'); 

    var mainContext = Engine.createContext(); 

    var containerModifier = new Modifier({ 
    origin: [0.5, 0.5] 
    }); 

    mainContext = mainContext.add(containerModifier); 

    var square = new Surface({ 
    size: [200, 200], 
    properties: { 
     lineHeight: '200px', 
     textAlign: 'center', 
     background: 'rgba(200, 200, 200, 0.5)' 
    } 
    }); 

    Clicks.find().observe({ 
    added: function(clickCounter) { 
     // This is the way that you replace content in your surface. 
     // Injecting handlebars templates here will probably do nothing. 
     square.setContent(clickCounter.number); 
    }, 

    changed: function(clickCounter) { 
     square.setContent(clickCounter.number); 
    } 
    }); 

    square.on('click', function() { 
    // Hardcoded to work with only the first item in the collection. 
    // Like I said, minimal proof of concept. 
    var clickCounter = Clicks.findOne(); 

    Clicks.update(clickCounter._id, { number: clickCounter.number + 1 }); 
    }); 

    mainContext.add(square); 
}; 

Answer 3

È importante notare che le superfici in Famo.us sono solo div, e puoi collegare i modelli di Blaze direttamente alle superfici.

Zol on GitHub has code for a Famous-Meteor leaderboard

Answer 4

Oltre a "Namal Goel" 's risposta: ecco un esempio su come rendere un modello Meteor in una famosa superficie:

In un file .html

<template name="test"> 
    This is rendered using Blaze template 
</template> 

Aggiungendo il modello a un contesto:

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

var meteorTest = new MeteorSurface({ 
    template: Template.test, 
    size: [200, 200] 
}) 

aContext.add(meteorTest); 

Answer 5

Ecco un vanill un'implementazione senza dover utilizzare una libreria.

Creare e svuotare div per fiammata per renderlo e passarlo come contenuto alla tua famosa superficie. ora hai un contenuto reattivo in famoso.

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)