我是流星的新手并做出反应.我一直在寻找使用流星开发基于投票的项目的最佳实践并做出反应.我试图在互联网上找到的一个问题是在流星中使用路由器的两个选项之一的利弊.
kadira:flow-router看起来非常简单,但我在github上看到很多项目实现了react-router.
关于meteor的两个路由器包的比较的任何想法？
我正在尝试让Jade与Meteor的Flow Router和Blaze合作.不知何故,它对我不起作用.我很确定它只是一些我没注意到的小东西.
home.jade和layout.jade文件的HTML版本提供了正确的工作结果.
根据这个,曾经有一个问题,但它在0.2.9版本的mquandalle:jade中得到了解决.
$ meteor list
blaze 2.1.2 Meteor Reactive Templating library
kadira:blaze-layout 2.0.0 Layout Manager for Blaze (works well with FlowRou...
kadira:flow-router 2.3.0 Carefully Designed Client Side Router for Meteor
meteor-platform 1.2.2 Include a standard set of Meteor packages in your...
mquandalle:jade 0.4.3 Jade template language
layout.jade
template(name="layout")
+Template.dynamic(template="main")
home.jade
template(name="home")
p Looks like working!
routes.js
FlowRouter.route('/', {
name: 'home',
action: function() {
BlazeLayout.render('layout', {main: 'home'});
}
});
结果:
<body>
<div id="__blaze-root">
</div>
</body>
我尝试使用页面转换添加到我的应用程序,ReactCSSTransitionGroup但它不起作用.对于某些页面,它有效,但有些页面没有.许多示例显示了如何使用React路由器.但是因为我使用Meteor,我使用不同的路由器(FlowRouter).
这是我的渲染方法:
render() {
return (
<div>
{this.props.content()}
</div>
);
}
这是我尝试添加过渡的方式:
<ReactCSSTransitionGroup
transitionName="pageTransition"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
transitionAppear={true}
transitionAppearTimeout={500}
>
{/* Content */}
{React.cloneElement(this.props.content(), {
key: uuid.v1(),
})}
</ReactCSSTransitionGroup>
css:
//Page transition
.pageTransition-enter {
opacity: 0.01;
}
.pageTransition-enter.pageTransition-enter-active {
animation: fadeIn 1s ease-in;
}
.animation-leave {
opacity: 1;
}
.pageTransition-leave.pageTransition-leave-active {
animation: fadeIn 3s ease-in;
}
.pageTransition-appear {
opacity: 0.01;
}
.pageTransition-appear.pageTransition-appear-active {
animation: opacity 5s ease-in;
}
知道如何使这项工作？
我找到了 FlowRouter.reload() 的 FlowRouter 文档，但我无法找到特定的代码示例，也无法使其工作。
在我的应用程序中，我有一个模板，它使用一些巧妙的 javascript（同位素）在页面大小调整时重新定位元素。有时，用户导航离开，调整浏览器窗口大小，然后返回到一个混乱的页面，该页面应该刷新并重绘以重新定位调整大小的窗口的元素。
这是我的路线。我将如何使用 FlowRouter.reload() 重新加载/刷新“工作”模板区域？或者，我将如何使用它来重新加载/刷新整个布局模板或窗口？
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
我具有以下应用程序结构：
client/
---- main.js
imports/
---- startup/
-------- client/
------------ routes.js
---- ui/
-------- login/
------------ login.html
------------ login.js
-------- register/
------------ register.html
------------ register.js
以下是文件的内容：
客户端/ main.js
import "/imports/startup/client/routes.js";
导入/启动/客户端/routes.js
import "../../ui/login/login.js";
import "../../ui/register/register.js";
// other routing code
导入/ui/login/login.js
import "./login.html";
// other login code
导入/ui/register/register.js
import "./register.html";
// other register code
当我运行流星应用程序并检出app.js加载到Chrome DevTools中的源代码中的JS文件时，我发现登录和注册模板均已加载。我知道为什么会这样。
我不理解的是这种情况下的延迟加载。我所有的模板和HTML的加载方式与渴望加载的方式相同。
我的应用程序结构有问题吗？我正在遵循流星指南中建议的应用程序结构：https : //guide.meteor.com/structure.html#example-app-structure
也许我不正确理解延迟加载？
我有一个Meteor我正在开发的应用程序,我使用React我的路由FlowRouter.我的主要AppContainer项目有很多组件,其中一个是页脚.
class AppContainer extends Component {
render() {
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
<Footer />
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}
我有几条路线可以进入各种聊天室:
例如.
/chatroom/1
/chatroom/2
/chatroom/3
<Footer />如果路线是一个,我有办法隐藏组件/chatroom/<anything>吗？
所以我发现这个导航栏功能与Bootstrap-3,但截至目前我使用的是Flow-Router而不是Iron-Router.因此,我正在寻求将此辅助函数转换为Flow-Router术语:
Template.navItems.helpers({
activeIfTemplateIs: function (template) {
var currentRoute = Router.current();
return currentRoute &&
template === currentRoute.lookupTemplate() ? 'active' : '';
}
});
我已经自己尝试修复问题(虽然我的网站/应用程序的许多部分仍无法正常运行,但我没有费心去测试它),但我要求以"是"或"否"的形式进行确认,也许更多关于我做错了什么的信息.
Template.navItems.helpers({
activeIfTemplateIs: function (template) {
var currentRoute = FlowRouter.current();
return currentRoute &&
template === currentRoute.name ? 'active' : '';
}
});
我从Flow-Router API引导自己.这个解决方案是正确的还是出于某种原因而严格限制与Iron-Router一起使用？
我使用FlowRouter /流星有反应,我想传递一个FlowRouter.go方法的反应按钮,按下按钮时,浏览到一个新的一页.我想这样做是为了保持按钮作为可重复使用的组件,但我在努力搞清楚如何通过FlowRouter.go方法为无状态的功能组件.这是我现在拥有的简化版本:
import React, { Component } from 'react';
import { FlowRouter } from 'meteor/kadira:flow-router';
const ParentComponent = () => {
// define text and styles here
return (
<div>
<Button text={text} style={styles} action={FlowRouter.go("Register")}/>
</div>
);
}
然后我的按钮组件:
import React, { Component } from 'react';
// Call to action button
const Button = ({text, style, action}) => {
return (
<button className="btn" style={style} onClick={() => action()}>
{text}
</button>
);
}
Button.propTypes = {
text: React.PropTypes.string.isRequired,
style: React.PropTypes.object,
action: React.PropTypes.func
}; …flow-router ×8
meteor ×6
reactjs ×4
javascript ×2
meteor-blaze ×2
iron-router ×1
lazy-loading ×1
node.js ×1
pug ×1
react-router ×1
reload ×1