相对简单的javascript在这里,不确定为什么IE讨厌我(对待别人你想如何对待我想).
var newDate = new Date("2012, 11, 2 19:30:00:000");
alert(newDate);
这适用于Chrome和FF,但IE输出"无效日期"
把我搞砸了:http://jsfiddle.net/k6yD6/
这是我第一次涉足客户端模板,我想确保我理解并正确使用它.阅读这篇LinkedIn工程博客后,我决定选择dust.js而不是小胡子或把手.请注意,这个stackoverflow帖子回答了我的许多问题,但我仍然有一些我想澄清的事情.
在我工作的环境中,我无法访问服务器端的任何内容,因此我创建的所有内容都必须能够完全在客户端的浏览器中运行.对于此示例,我将尝试从LinkedIn Dust Tutorial重新创建此代码示例.
我包括dust-full.js而不是dust-core.js因为我要动态编译模板:
<script src="js/dust-full.js"></script>
这是HTML:
<script id="entry-template">
{title}
<ul>
{#names}
<li>{name}</li>{~n}
{/names}
</ul>
</script>
<div id="output"></div>
和JavaScript(使用jQuery):
$(document).ready(function () {
var data = {
"title": "Famous People",
"names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
}
var source = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
});
});
这似乎工作正常,你可以在 …
看看小提琴.我有一个基本的Bootstrap 3响应导航,如下所示:
<div id="navbar" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Title Title Title</a>
<div id="nav-collapse" class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#option1">Option 1</a></li>
<li><a href="#option2">Option 2</a></li>
<li><a href="#option3">Option 3</a></li>
</ul>
</div>
</div>
</div>
导航项链接到页面上的部分,而不是不同的页面,所以我需要下拉列表以隐藏点击.
每当我尝试使用jQuery手动切换下拉列表时,它会混淆下拉切换按钮的未来功能:
$("#navbar li a").click(function(event) {
// check if window is small enough so dropdown is created
$("#navbar-toggle").is(":visible")
$("#nav-collapse").toggle();
});
对此有更好的解决方法吗？
jquery uinavigationbar responsive-design twitter-bootstrap drop-down-menu
v4文档中提供的动画转换示例对我来说似乎有点费解,因为它描绘了淡入淡出相同的组件并调整背景颜色.
我正在尝试将这种技术应用于一个更真实的例子,将一个组件淡出另一个组件,但是我无法使其正常工作(它似乎只是淡出第一个,然后第二个弹出in,此转换只能以一种方式工作(后退按钮不会转换).
这是我的代码,它使用MatchWithFade示例中的精简版本:
import React from 'react';
import { TransitionMotion, spring } from 'react-motion'
import { HashRouter, Match, Miss } from 'react-router';
import Home from './components/Home';
import Player from './components/Player';
import FormConfirmation from './components/FormConfirmation';
const App = () => (
<HashRouter>
<div className="App">
<MatchWithFade exactly pattern="/" component={Home} />
<MatchWithFade pattern="/player/:playerId" component={Player} />
<MatchWithFade pattern="/entered" component={FormConfirmation} />
<Miss render={(props) => (
<Home players={Players} prizes={Prizes} {...props} />
)} />
</div>
</HashRouter>
);
const MatchWithFade = ({ component:Component, ...rest }) …我正在尝试将现有的react-router 3.0.0应用程序迁移到4.0.0.在路由器中,我需要传递一个prop与其子节点相关的非路由选择.
在本文中详细介绍的反应路由器的先前版本中,有一些方法可以实现这一点.我个人最喜欢的是使用这种方法cloneElement,因为它确保了所有的反应路由器道具也被复制了:
// react-router 3.0.0 index.js JSX
<Router history={browserHistory}
<Route path="/" component={App}>
<Route path="/user/:userId" component={User} />
<IndexRoute component={Home} />
</Route>
</Routes>
// App component JSX (uses cloneElement to add a prop)
<div className="App">
{ cloneElement(props.children, { appState: value }) }
</div>
到目前为止,我的新App组件如下所示:
// react-router 4.0.0 App component JSX (moved routing code out of index.js and into here)
<BrowserRouter>
<div className="App">
<Match exactly pattern="/" component={Home} />
<Match pattern="/user/:userId" component={User} …我正在使用Gatsby.js及其带有Irving主题的Typography插件.
此主题需要Google字体"Exo"和"Yrsa",并<head>在导出的静态html文件部分添加导入:
<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>
此导入是渲染阻止内容,如果可能,我会更愿意避免使用这些内容和Google PageSpeed Insights分数.
我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js中:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Exo\:700`,
`Yrsa\:400,700`,
],
}
},
然而,这只是添加了第二个导入调用.我应该将它们放在静态目录中吗？即使这样,我如何配置Typography仍然使用这些字体而不单独导入它们？
typography google-font-api google-pagespeed gatsby render-blocking
这是一个小提琴.
我正在尝试创建一个使用moment.js的倒计时对象(我喜欢使用Date()的插件)
var Countdown = function(endDate) {
this.endMoment = moment(endDate);
this.updateCountdown = function() {
var currentMoment, thisDiff;
currentMoment = moment();
thisDiff = (this.endMoment).diff(currentMoment, "seconds");
if (thisDiff > 0)
console.log(thisDiff);
else {
clearInterval(this.interval);
console.log("over");
}
}
this.interval = setInterval(this.updateCountdown(), 1000);
}
然后我创建一个倒计时的实例,如下所示:
var countdown = new Countdown("January 1, 2014 00:00:00");
但是这个功能似乎只运行一次.有任何想法吗？我应该使用setTimeout()吗？
我有一个文章组件,显示帖子列表.该列表是分页的,因此每页最多可显示10个帖子.有一个"下一页"按钮,单击时将更新组件状态和相应的url参数,如下所示:
第1页:/ news
第2页:/ news？page = 2
第3页:/ news？page = 3
...等等.设置constructor()和render()方法的方式,如果用户直接导航到/ news？page = 3,它将读取此URL参数并显示正确的帖子.
我遇到的问题是浏览器后退和前进按钮似乎没有重新呈现页面.因此,如果用户点击"下一页"按钮几次然后点击后退按钮,则URL将更新,但页面将不会重新呈现.有没有办法强迫它这样做？
我猜测有一种方法可以通过添加一个window.history监听器来实现这一点,但我不确定是否有推荐的练习gatsby-link.
以下是该组件的精简版本供参考:
import React, { Component } from 'react';
import { navigateTo } from 'gatsby-link';
import getUrlParameter from '../functions/getUrlParameter';
export default class extends Component {
constructor(props) {
super(props);
/* external function, will grab value
* of ?page= url parameter if it exists */
const urlParamPage = getUrlParameter('page');
const currentPage = urlParamPage ? urlParamPage : 1;
this.state = { …我想在多个页面上包含相同的导航菜单,但是我没有PHP支持,也不能以任何其他方式影响我的服务器.
我想避免简单地将html复制并粘贴到所有页面上,因为这会使菜单更新变得很痛苦.
我能想到的两个选项如下:
1)在一个页面上存在所有内容,然后根据附加到网址的关键字确定要显示的内容:
example.com/index?home
example.com/index?news
2)包含一个javascript文件,该文件具有将菜单写出并在每个页面上调用该函数的功能
function setupMenu() {
$("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
使用选项1,更新过程包括在一页上编辑一个导航菜单
使用选项2,更新意味着更改javascript文件中的功能
我对选项1的关注是页面必须加载很多不需要显示的内容.我对选项2的关注可能看似微不足道,但是代码可能会变得混乱.
是否有任何理由这样做会比另一种更好？或者我缺少第三个优越的选择？
我想知道是否有办法（可能通过为其创建插件gatsby-transformer-remark）将相对路径链接转换为使用<Link>from的方式gatsby-link。
例如，说我在markdown文件中包含以下内容：
# Here is a Header
Check out my about page:
[About](/about)
如果我导入此markdown并显示为：
<div dangerouslySetInnerHTML={{ __html: whatever.childMarkdownRemark.html }} />
然后，当单击“关于”链接时，它打破了单页应用程序的魔力。
有什么办法可以防止这种情况？提前致谢。
reactjs ×4
gatsby ×3
javascript ×3
react-router ×3
back-button ×1
contentful ×1
date ×1
dust.js ×1
html ×1
include ×1
jquery ×1
linkedin ×1
markdown ×1
methods ×1
momentjs ×1
object ×1
php ×1
setinterval ×1
transition ×1
typography ×1
url ×1