我试图让css需要使用ExtractTextPlugin在webpack中工作,但没有成功
我想要一个单独的css文件,而不是内联任何CSS.
这是我的webpack配置:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./scripts/index'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/scripts/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles/styles.css', {
allChunks: true
})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'scripts')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}]
}
};
index.js:
import …由于某种原因,这个值在react事件处理程序中丢失了.阅读文档,我认为反应做了一些事情,以确保这被设置为正确的值
以下不符合我的预期
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs undefined
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
}
但这样做:
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs Observer class instance
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click</button>
);
}
}
React和ES6对我来说是新手,但这似乎不是正确的行为？
我正试图在主干中使用带有下划线的把手样式模板(使用require.js).我有以下内容:
_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
在我的模板中,我设置了一个测试:
<div><%= title %> | {{ title }}</div>
我在浏览器中获得以下内容:
Correct title | {{ title }}
因此看起来标准的下划线模板设置正在运行,并且把手样式设置被忽略:
但是,如果我在Chrome中检查控制台,我会得到这个(我觉得它应该是正确的)
_.templateSettings
Object {evaluate: /<%([\s\S]+?)%>/g, interpolate: /\{\{(.+?)\}\}/g, escape: /<%-([\s\S]+?)%>/g}
任何想法为什么这不能正常工作？
我在茉莉花的间谍活动中遇到了一些麻烦
我想检查是否使用jasmine spy和jasmine jquery在滑块上单击了一个链接.
这是一个简化版本:
我有一些链接作为html fixture文件的一部分.
<a href="#" class="someLink">Link 1</a>
<a href="#" class="someLink">Link 2</a>
滑块:
var Slider = function(links){
this.sliderLinks = $(links);
this.bindEvents();
}
Slider.prototype.bindEvents = function(){
this.sliderLinks.on('click', this.handleClick);
}
Slider.prototype.handleClick = function(e){
console.log('i have been clicked')
}
规范文件:
describe('Slider', function(){
var slider;
beforeEach(function(){
loadFixtures('slider.html');
slider = new Slider('.someLink');
});
it('should handle link click', function(){
spyOn(slider, 'handleClick');
$(slider.sliderLinks[0]).trigger('click');
expect(slider.handleClick).toHaveBeenCalled();
});
});
测试失败了.但是"我已被点击"已被记录到控制台,因此正在调用该方法.
如果我这样做,测试通过:
it('should handle link click', function(){
spyon(slider, 'handleClick');
slider.handleClick();
expect(slider.handleClick).toHaveBeenCalled();
});
所以我的问题基本上是:
这似乎是一个基本的,但我无法让Iron Router将我的模板渲染到页面上的正确位置.
在我的路由器控制器中,我有:
Router.configure({
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home',
layoutTemplate: 'layout'
});
this.route('posts', {
});
this.route('post', {
path: '/posts/:_id'
});
});
在布局html页面中,我有:
<body>
<!-- some other static page stuff here -->
<div class="container">
<template name="layout">
{{yield}}
</template>
</div>
</body>
主页模板的基本版本如下所示:
<template name="home">
<h1>Home Page</h1>
</template>
我已经尝试了一些变化,但主模板总是在关闭body标签之前而不是div.container中的布局模板底部呈现
我试图在JS和HTML中构建一个可重新排序的列表.(尝试不使用jQuery ui)我似乎无法弄清楚为什么只有dragstart和dragend事件在拖动列表项时触发.任何人都知道为什么其他事件没有解雇？
<ul>
<li draggable="true" class="drag">1111111</li>
<li draggable="true" class="drag">222222</li>
<li draggable="true" class="drag">333333</li>
<li draggable="true" class="drag">444444</li>
</ul>
<script type="text/javascript">
var drags = document.querySelectorAll('.drag');
[].forEach.call(drags, function(drag) {
drag.addEventListener('dragstart', handleDragStart, false);
drag.addEventListener('dragenter', handleDragEnter, false);
drag.addEventListener('dragover', handleDragOver, false);
drag.addEventListener('dragleave', handleDragLeave, false);
drag.addEventListener('dragend', handleDragEnd, false);
});
function handleDragStart(e){
console.log('handleDragStart');
}
function handleDragEnter(e){
console.log('handleDragEnter');
}
function handleDragOver(e){
console.log('handleDragOver');
}
function handleDragLeave(e){
console.log('handleDragLeave');
}
function handleDragEnd(e){
console.log('handleDragEnd');
}
</script>
嗨,我只是想知道这是否可行.我的网站上有很多图片,我把它们做成了尽可能小的文件.一些图像用作幻灯片放映,但一次性加载.有没有办法使用javascript使幻灯片图像最后加载,以便背景图像等首先加载,幻灯片加载结束.图像位于页面的主体中,并使用javascript"幻灯片显示".这个图像的代码很简单:
<div id="pics">
<img src="images/cs9.png" width="270px" height="270px" alt="teaching"/>
<img src="images/cs1.png" width="200px" height="200px" alt="teaching"/>
<img src="images/cs3.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs5.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs6.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs7.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs4.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs12.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs8.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs10.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs14.png" width="200" height="200px" alt="teaching"/>
</div>
任何想法都会很棒
谢谢
我有以下两种模式和模型:
var Customer = new Schema({
name: String,
jobs: [{ type: Schema.Types.ObjectId, ref: 'Job' }]
});
var Job = new Schema({
title: String,
customer: { type: Schema.Types.ObjectId, ref: 'Customer' }
});
var CustomerModel = mongoose.model('Customer', Customer);
var JobModel = mongoose.model('Job', Job);
作业文档通过_id引用客户文档,客户文档还包含所有作业_id的数组.
删除作业时,我需要从Customer.jobs数组中删除相应的_id.
这是我的路线 - 工作被删除但我无法从数组中删除它的id
app.delete('/api/jobs/:jobId', function(req, res){
return JobModel.findById(req.params.jobId, function(err, job){
return job.remove(function(err){
if(!err){
CustomerModel.update({_id: job.customer._id}, {$pull : {'customer.jobs' : job.customer._id}}, function(err, numberAffected){
console.log(numberAffected);
if(!err){
return console.log('removed job id');
} else {
return console.log(err);
}
});
console.log('Job removed'); …我正在为ios构建一个phonegap应用程序并且有垂直滚动问题.即使没有任何内容,webview中也会出现一些像素滚动,这影响了我的绝对定位的导航栏和以html格式构建的标签栏
这是我的html页面 - 没有内容我仍然得到图像中显示的滚动量:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>My App</title>
</head>
<body>
<script src="scripts/vendor/cordova-2.4.0.js"></script>
</body>
</html>
滚动截图http://img20.imageshack.us/img20/5140/screenshot20130225at212.png
我刚开始在Redux中使用normalizr，但我陷入了一个简单的问题，但我做错了。所以我想规范化这样的数组：
{
articles: [
{id: 1, someValue: 'test'},
{id: 2, someValue: 'test2'}
]
}
变成这样的结构：
{
result: {
articles: [1,2]
},
entities: {
articles: {
1: {someValue: 'test'},
2: {someValue: 'test2'}
}
}
}
我尝试这样做：
const article = new Schema('articles');
responce = normalize(responce, {
articles: arrayOf(article)
});
但这给了我一个看起来像这样的结构：
{
articles: {
entities: {},
result: {
0: {someValue: 'test'},
1: {someValue: 'test2'}
}
}
}
现在没有文章ID的数组。我假设我在这里缺少什么：
article.define({
...
});
但是在这种简单的情况下无法确定需要去哪里
我在mongoose中设置了两个模式:
var Job = new mongoose.Schema({
title: String,
budget: Number
});
var JobModel = mongoose.model('Job', Job);
var Customer = new mongoose.Schema({
name: String,
jobs: [Job]
});
var CustomerModel = mongoose.model('Customer', Customer);
Customer模型具有一系列作业模型.
我正在添加一项新工作如下:
app.post('/api/jobs', function(req, res){
var job = new JobModel({
title: req.body.title,
budget: req.body.budget
});
job.save(function(err){
if(!err){
CustomerModel.findById(req.body.customerId, function(err, customer){
if(!err){
customer.jobs.push(job);
customer.save(function(err){
if(!err){
return console.log('saved job to customer');
}
});
}
});
return console.log('created job');
} else {
return console.log(err);
}
});
return res.send(job);
});
当我添加一份新工作并获得我认为正确的所有客户时:
[{
"__v": …