2技术:
我来自流星方面,我个人喜欢使用{{mustache}}(把手)从数据驱动gui,反应式会话/数据库使这真正高效和直观。
现在来了famo.us及其所有优点,但基于代码的gui的缺点是没有把手的地方了......
答案 0 :(得分:16)
我刚刚发布了famous-components的预览版,这是Blaze和Famous之间紧密整合的尝试。到目前为止,我所看到的所有其他方法都是Blaze的大部分步骤,并且需要在JavaScript中编写大量代码,这对我来说在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/
答案 1 :(得分:3)
以下是2014年2月Devshop关于整合Meteor with Famous的演示文稿。我在两个月内没有看到它,但我明确记得他们提到是的,你利用了Collection.observe 模式。
简而言之,就像使用 React 或 Three.js 一样,Famous对Blaze模板引擎很不敏感。它完全回避它,并将所有元素呈现为扁平DOM。阅读Mark's answer about this。
几天前,一个利用require.js API的软件包被提交给Atmosphere。它被称为Famono。
我用observe
成功地用它来制作简约的概念证明。您可以找到source code on Github,我也deployed it with meteor deploy。
代码本身非常简单。集合:
// 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);
};
答案 2 :(得分:1)
重要的是要注意Famo.us中的曲面只是div,您可以将Blaze模板直接插入曲面。
答案 3 :(得分:1)
除了“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);
答案 4 :(得分: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)