Как Метеор вспыхивает и Famo.us играют вместе?

2 Технологии:

  • Метеор с двигателем пламени templating
  • Famo.us с их потрясающей инфраструктурой gui

Я исхожу из метеорной стороны, мне лично нравится использовать {{усы}} (руля) для управления gui от данных, реактивный сеанс/база данных делает это действительно эффективным и интуитивно понятным.

Теперь появился famo.us и все его преимущества, но недостатком GUI на основе кода является то, что больше нет рулей...

  • Какова нынешняя практика совместного использования обеих технологий?
  • Они полностью диссоциативны?
  • Использует механизм "наблюдать" / "Deps.autorun" повсюду, где элемент famo.us обновляется метеорным реактивным элементом?

ОТВЕТЫ

Ответ 1

Я только что выпустил предварительный просмотр famous-components, который является попыткой плотной интеграции между Blaze и Famous. Все другие подходы, которые я видел до сих пор, делают большую часть Blaze и требуют записи большого количества кода в JavaScript, что для меня было очень неестественным в Meteor. Код Метеор должен быть небольшим, кратким и легким с мощными результатами. Вот несколько примеров того, как это выглядит: (каждый шаблон формирует renderNode, любой HTML помещается на поверхность. Модификаторы/представления/параметры указаны как атрибуты компонента)

<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 (можно разделить на под шаблоны):

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

События:

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

Он также работает с коробкой с железным маршрутизатором. Более подробная информация, документы, живые демонстрации, все в http://famous-views.meteor.com/

Ответ 2

Вот презентация от Февральского 2014 года Devshop о интеграции Метеор с известными. Я не видел его через два месяца, но я отчетливо помню, как они отмечали, что да, вы используете шаблон Collection.observe.

Короче говоря, как и при использовании Реагировать или Three.js, знаменитый тупой к движку шаблонов Blaze. Он полностью обходит его и делает все элементы плоскими DOM. Прочитайте Отметьте ответ об этом.

Пакет, который использует API require.js, был представлен в Atmosphere несколько дней назад. Он назывался Famono.

Я успешно использовал его, чтобы подкрепить минималистическое доказательство концепции, observe. Вы можете найти исходный код на Github, и я также развернул его с развертыванием метеоров.

Сам код очень прост. Коллекция:

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

Маленькое крепление на сервере для добавления элемента:

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

И файл 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);
};

Ответ 4

В дополнение к ответу "Namal Goel": вот пример того, как сделать шаблон Meteor на знаменитую поверхность:

В файле .html

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

Добавление шаблона в контекст:

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

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

aContext.add(meteorTest);

Ответ 5

Здесь ванильная реализация без использования библиотеки.

Создайте и очистите div для пламени, чтобы отобразить и передать это как содержимое вашей знаменитой поверхности. теперь у вас есть реактивный контент в знаменитом.

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)