小编can*_*era的帖子

在<select>菜单的React组件中,我需要selected在反映应用程序状态的选项上设置属性.

在render(),optionState从状态所有者传递到SortMenu组件.选项值props从JSON 传入.

render: function() {
  var options = [],
      optionState = this.props.optionState;

  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';

    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });

// pass {options} to the select menu jsx

但是,这会在JSX编译时触发语法错误.

这样做可以消除语法错误,但显然无法解决问题:

var selected = (optionState === option.value) ? 'selected' : 'false';

<option value={option.value} selected={selected}>{option.label}</option>

我也试过这个:

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' …

在JSX中,如何props从引用的属性值中引用值？

例如:

<img className="image" src="images/{this.props.image}" />

生成的HTML输出是:

<img class="image" src="images/{this.props.image}">

Redux应用程序中的初始状态可以通过两种方式设置:

• 将它作为第二个参数传递给createStore(docs link)
• 将它作为第一个参数传递给(子)减速器(docs link)

如果您将初始状态传递到商店,那么如何从商店中读取该状态并将其作为减速器中的第一个参数？

现在已经修复了WebKit 页面缩放错误,使用基于em的媒体查询而不是基于像素的媒体查询的主要原因是什么？

赏金

我正在为我的问题添加赏金,因为许多着名的CSS 框架 和 Web 开发人员都使用基于em的媒体查询,我相信必须有充分的理由这样做.

我所知道的一个优点是,如果用户在浏览器中更改默认字体大小,内容将以类似于页面缩放修复解决的问题的方式挤压.是否有任何数据显示人们确实更改了默认大小而不是缩放？

注意

为了使我的问题更集中,我删除了两个外围项目.在原来的职位将增加的角度来@ nwalton的伟大答案,其中涉及所有的三点我问.

SyntheticKeyboardEvent除了null事件属性之外,我无法让任何React 处理程序注册任何东西.

我已经将这个组件隔离在一个小提琴中,并得到与我的应用程序相同的结果.谁能看到我做错了什么？

http://jsfiddle.net/kb3gN/1405/

var Hello = React.createClass({
    render: function() {
      return (
      <div>
        <p contentEditable="true"
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>Foobar</p>
        <textarea
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>
        </textarea>
        <div>
          <input type="text" name="foo" 
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress} />
        </div>
      </div>
      );
    },

    handleKeyDown: function(e) {
      console.log(e);
    },

    handleKeyUp: function(e) {
     console.log(e);
    },

    handleKeyPress: function(e) {
     console.log(e); 
    }
});

React.renderComponent(<Hello />, document.body);

Chrome显然在文本输入中添加了一个下拉箭头,引用了一个<datalist>.它出现在Chrome 34(Canary)中,但不是当前的稳定版本(Chrome 31).

它仅在文本字段被聚焦时显示(请参阅更新)并应用于两种输入类型text和search.

就本机浏览器实现而言,它可能会更糟,但正如您在图像中看到的那样,它与我的设计规范相冲突.

有谁知道如何删除或替换这个新功能？

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

更新:

当字段悬停(不仅仅是聚焦)时,箭头也会出现,不幸的是,当按钮本身悬停时,它也有自己的背景颜色:

我很难理解Doctrine手册对级联操作的解释,需要有人帮助我理解简单的ManyToOne关系中的选项.

在我的应用程序中,我有一个名为Article的表/实体,它有一个外键字段,引用名为Topic的表/实体中的'id'字段.

当我创建新文章时,我从下拉菜单中选择主题.这会在Article表的'topic_id'外键字段中插入一个整数.

我在Article实体中设置了$ topic关联,如下所示:

/**
 * @ManyToOne(targetEntity="Topic")
 * @JoinColumn(name="topic_id", referencedColumnName="id", nullable=false)
 */
private $topic;

主题实体没有关于Article实体的任何往复注释.当删除引用主题的文章时,主题不关心什么文章引用它们,并且不需要在主题中发生任何事情.

因为我没有在Article实体中指定级联操作,所以当我尝试创建新文章时,Doctrine会抛出错误:"通过未配置为级联持久操作的关系找到新实体.明确地保留新实体或者在关系上配置级联持久化操作."

所以我知道我需要选择一个级联操作来包含在Article实体中,但是我怎么知道在这种情况下选择哪个操作呢？

从阅读Doctrine手册开始,"分离"听起来就像是正确的选择.但是在这里和这里研究其他人的类似问题让我觉得我想用"坚持"代替.

任何人都可以帮助我理解"持久","删除","合并"和"分离"是否意味着简单的ManyToOne关系,就像我所描述的那样？

有没有办法在CSS中嵌套注释？

例如,当我尝试注释掉以下两个语句时,外部注释在遇到嵌套注释中的*/时结束,而第一个语句和第二个语句的其余部分取消注释.

/*
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
*/

当我想尝试涉及多个语句的不同样式技术时,我经常遇到这个问题.

我熟悉CSS 规范的注释及其基本原理,但也知道有一个嵌套HTML注释的解决方法,我希望有类似的CSS攻击.

有人找到了在CSS中嵌套注释的方法吗？

这是一个很长的镜头,但有没有一个工具可以通过删除不需要的特异性来优化CSS选择器？

我发现当我编写CSS时,我故意让我的选择器比必要的更具体,以避免冲突和准文档.

如果有一个工具可以分析给定的一组规则,确定它们与其他规则重叠的"唯一性",然后去除任何不必要的特异性,那将是很好的.

我甚至无法想象一个工具开发人员如何处理所需的所有场景,但我之前被其他人的聪明才智所震撼,并认为值得一提.

更新:

我已经为这个问题添加了一笔赏金,我越是想到它,我就越意识到CSS特异性过滤器的价值.

例如,在Sass和LESS中使用嵌套规则/选择器时,过度嵌套是一种常见且众所周知的反模式,很容易导致过度特定的选择器.

在优秀的TutsPlus课程中有一个很好的例子,可以使用Sass和Compass维护CSS:

body {
    div.container {
        p {
            a {
                color: purple;
            }
        }
    }
}

Sass将遵循这些嵌套指令并生成以下CSS输出,不反对任何不需要的特性:

body div.container p a {
    color: purple;
}

但是,如果特异性过滤器存在/确实存在,它将为CSS开发人员创造潜在的好处:

1. 您可以将样式表组织为DOM的1:1映射,类似于在Firebug和Chrome开发工具中检查样式规则时所看到的内容.智能编辑器/ IDE可以使用共享样式/类自动填充DOM元素的样式.当然,这种冗余将由特异性过滤器/优化器过滤掉.

2. 样式表可以通过扫描DOM并将其转换为CSS选择器/规则的工具预先填充其结构.这意味着开发人员只需要更新HTML; CSS"树"将保持同步以反映DOM的当前状态.智能编辑器可以让您跳转到元素/类的CSS定义以进行样式化 - 甚至可以在单独的面板中显示其样式规则.

在某种程度上,这几乎看起来是一个倒退 - 就像你在Dreamweaver或WebAssist中找到的功能,以帮助新手学习CSS.但是CSS选择器优化工具的基本思想似乎没什么好处,我所描述的工作流自动化类型将是合乎逻辑的下一步 - 催化剂将是特异性过滤器.

我研究了一些比较知名的CSS编辑器和Web IDE,但除了针对单个元素并为其生成选择器之外,还没有发现任何提供此类功能的东西.

更新2:CSS选择器性能

在回应Spliff的评论时,这里有两篇关于CSS选择器性能的精彩文章:

• Steve Souders 对CSS选择器的性能影响

• Chris Coyier 高效渲染CSS

两人都认为微优化CSS不值得努力,但过度合格的后代选择器是"效率灾难".我还没有对自己进行基准测试,但怀疑我建议采用的那种"DOM Mapping"方法会在没有优化步骤的情况下导致性能下降,无论是手动还是自动化.

相关问题,链接和工具:

CSS特异性的要点

查看CSS特异性的工具

清理CSS的工具

按CSS特性排序

大规模CSS的五大误区

Google:高效的CSS选择器

Procssor

清洁CSS …

如何在每次测试前重置Sinon间谍的"被叫"计数？

这就是我现在正在做的事情:

beforeEach(function() {
  this.spied = sinon.spy(Obj.prototype, 'spiedMethod');
});

afterEach(function() {
  Obj.prototype.spiedMethod.restore();
  this.spied.reset();
});

但是当我在测试中检查呼叫计数时:

it('calls the method once', function() {
  $.publish('event:trigger');
  expect(this.spied).to.have.been.calledOnce;
});

...测试失败并报告该方法被调用X次(每次上一次测试也触发同一事件一次).