12

2 テクノロジー:

  • blaze テンプレート エンジンを使用した Meteor
  • すばらしい GUI フレームワークを備えた Famo.us

私はメテオ側から来ました。個人的には {{mustache}} (ハンドルバー) を使用してデータから GUI を駆動するのが好きです。リアクティブ セッション/データベースにより、これは非常に効率的かつ直感的になります。

famo.us とそのすべての利点が登場しましたが、コード ベースの GUI の欠点は、ハンドルバーの場所がなくなったことです…</p>

  • 両方の技術を一緒に混合するための現在の慣行は何ですか?
  • それらは完全に解離性ですか？
  • 「observe」/「Deps.autorun」メカニズムを使用することは、流星反応アイテムによって更新される famo.us 要素のどこでも一般的な方法ですか?
4

5 に答える 5

16

Blaze と Famous を緊密に統合する試みとして、famous-componentsのプレビューをリリースしました。私がこれまで見てきた他のすべてのアプローチは、Blaze の大部分を回避しており、JavaScript で大量のコードを記述する必要があり、Meteor では非常に不自然に感じました。Meteor のコードは、小さく、簡潔で、簡単で強力な結果をもたらす必要があります。それがどのように見えるかのいくつかの例を以下に示します: (各テンプレートは renderNode を形成し、HTML は Surface に配置されます。モディファイア/ビュー/オプションはコンポーネント属性として指定されます)

<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/にあります。

于 2014-04-18T17:08:21.493 に答える
1

Famo.us のサーフェスは単なる div であり、Blaze テンプレートを直接サーフェスにプラグインできることに注意することが重要です。

GitHub の Zol には、Famous-Meteor リーダーボードのコードがあります。

于 2014-05-12T05:40:22.473 に答える
0

これは、ライブラリを使用する必要のないバニラの実装です。

blaze がレンダリングする 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)
于 2015-05-21T20:52:43.470 に答える