Meteor'ın sesi ve Famo.us nasıl birlikte oynuyor?

Question

2 Teknolojiler:

• Meteor yangını şablon motoru onların müthiş gui çerçevesine
• Famo.us ile Meteor taraftan gelip

, ben şahsen kullanmak gibi {{bıyık}} gui'yi veriden sürmek için (gidonlar), reaktif oturum/veritabanı bunu gerçekten verimli ve sezgisel hale getirir. ...

Şimdi famo.us ve tüm avantajlarını geldi ama bir kod tabanlı gui dezavantajı artık gidon yer yoktur olmasıdır

• birlikte her iki teknolojiyi karıştırmak için geçerli uygulama nedir
  ?
• Tamamen ayrışır mı?
• "Gözlem"/"Deps.autorun" mekanizması, her yerde bir famo.us elementinin meteor reaktif bir öğe tarafından güncellenmesi için yaygın bir uygulamadır.

Answer 1

Sadece olan famous-components önizlemesini yayınladı Blaze ve ünlü arasında sıkı bir entegrasyon girişimi. Şimdiye kadar gördüğüm tüm diğer yaklaşımlar, Blaze'nin çoğunu üste getirdi ve Meteor'da bana çok doğal olmayan bir şekilde, JavaScript'te büyük miktarlarda kod yazmayı gerektiriyor. Meteor kodu, güçlü sonuçlarla küçük, özlü ve kolay olmalıdır. İşte neye benzediğine dair birkaç örnek: (her şablon bir renderNode oluşturur, herhangi bir HTML bir Yüzeye yerleştirilir).Düzenleyiciler/görünümler/seçenekler (alt şablonlar bölünebilir)

<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'a) bir bileşen nitelikleri olarak belirlenmiştir:

<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() }; 

Olaylar:

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

Ayrıca dışarı çalışır demir yönlendirici ile kutu. Daha fazla ayrıntı, doküman, canlı tanıtım, tümü http://famous-views.meteor.com/

Answer 2

İşte, Şubat 2014 Devshop'tan Meteor with Famous'u tümleştirme hakkında bir sunum. Bunu iki ay içinde görmedim, ama onları hatırlıyorum. Bunları hatırlıyorum. evet, Collection.observe modelini kullanıyorsunuz.

Kısacası

, sadece veya Three.js Tepki kullanmak gibi, Ünlü Blaze şablon motoruna geniş olduğunu. Tamamen tersine çevirir ve tüm öğeleri düz DOM olarak işler. Oku Mark's answer about this.

require.js API'sini kullanan bir paket, birkaç gün önce Atmosfer'e gönderildi. Buna Famono denir.

observe ile minimalist bir kavram kanıtı oluşturmak için kullandım. source code on Github ve ayrıca deployed it with meteor deploy'u da bulabilirsiniz.

Kodun kendisi gerçekten çok basit. Koleksiyonu:

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

Ve index.js dosyası: sunucu üzerinde küçük bir fikstür bir öğe eklemek için

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

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

Famo.us'taki yüzeylerin sadece div olduğunu ve Blaze şablonlarını doğrudan yüzeylere takabildiğinizi belirtmek önemlidir. Ayrıca

Zol on GitHub has code for a Famous-Meteor leaderboard

Answer 4

için "Namal Goel" 'in cevabı: Burada ünlü bir yüzey içine bir meteor şablonu işlemek için nasıl bir örnek: Bir .html dosyasında

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

bir bağlama şablonu ekleme

: Burada

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

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

aContext.add(meteorTest); 

Answer 5

bir vanill var Bir kütüphane kullanmak zorunda kalmadan bir uygulama.

oluşturun ve yangını içine işlemek ve ünlü yüzeye içerik olarak bu geçmek için boş div. Artık ünlü bir reaktif içeriğiniz var.

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)