我正在尝试使用ReactJS和JSDOM模拟滚动事件.
最初我尝试了以下内容:
var footer = TestUtils.findRenderedDOMComponentWithClass(Component, 'footer');
footer.scrollTop = 500;
TestUtils.Simulate.scroll(footer.getDOMNode());
//I tried this as well, but no luck
//TestUtils.Simulate.scroll(footer);
滚动事件根本不会传播.然后,我手动创建了事件,一切正常:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("scroll", false, true);
element.dispatchEvent(evt);
问题:我是否在使用TestUtils做错了什么？我怎样才能让它发挥作用？
艾伦
javascript javascript-events jsdom reactjs reactjs-testutils
我正在尝试添加一个body指令,它将有一个左面板和一个右面板.但是在这些面板之间我会有一些私有的body指令内容.我目前正在使用transclude = true选项来加载内容.但是,我正在寻找一种方法来使用两个ng-transclude.我调查了很多如何解决这个问题,但我找不到一个优雅的解决方案.我不得不在body指令的编译步骤中手动添加transcluded对象.以下是我解决的方法:
身体指令
var myApp = angular.module('myApp', []);
myApp.directive('body', function () {
return {
restrict: 'A',
transclude: true,
scope: {
title: '@'
},
templateUrl: 'body.html',
compile: function compile(element, attrs, transclude) {
return function (scope) {
transclude(scope.$parent, function (clone) {
for (var i = 0; i < clone.length; i++){
var el = $(clone[i]);
if(el.attr('panel-left') !== undefined) {
element.find('#firstPanel').html(el);
} else if(el.attr('panel-right') !== undefined) {
element.find('#secondPanel').html(el);
}
}
});
}
}
};
});
myApp.directive('panelLeft', function () {
return { …我想知道如何在kendo ui + angular中为下拉列表设置占位符.
目前我有:
模板
<select kendo-drop-down-list ng-model="selectedElement" k-options="options" >
</select>
调节器
...
$scope.options = {
dataTextField: 'label',
dataValueField: 'id',
dataSource: {
data: [
{
"label": "Please Select..."
},
{
"id": "linear",
"label": "Sample Linear"
},
{
"id": "bar",
"label": "Sample Bar"
}
]
}
};
...
如果我通过后端调用替换数据源,那么我就不能在那里"请选择".还有另一种解决这个问题的方法吗？
我尝试使用data-option-label ="Please Select"按照此链接中的说明操作,但没有运气.
我刚刚安装了AngularJS 1.2.24,我正在尝试测试我的指令.代码如下所示:
describe('scenarios', function () {
var scope, compile;
beforeEach(module("app"));
beforeEach(module("src/widgets/tt-header/header.html"));
beforeEach(inject(function ($compile, $rootScope) {
scope = $rootScope.$new();
compile = $compile;
}));
function directive() {
var el = angular.element('<div tt-header />');
compile(el)(scope);
scope.$digest();
return el;
}
it('should load the directive', function () {
var el = directive();
expect(el).not.toBe(undefined);
});
});
然后,当我运行测试时,我在执行范围期间收到以下消息.$ digest():
PhantomJS 1.9.7 (Mac OS X) tt-header scenarios should load the tt-header directive FAILED
TypeError: 'undefined' is not a function (evaluating '$browser.$$checkUrlChange()')
at /Users/alansouza/tt-workspace/tt-app-angular/vendor/angular/angular.js:12502
at …javascript angularjs angularjs-directive angularjs-scope karma-runner
我的配置如下.travis.yml:
language: node_js
node_js:
- '5.0.0'
sudo: false
cache:
bundler: true
directories:
- node_modules
我的一个软件包是Github分支,其内容发生了变化,但版本保持不变.发生的事情是缓存没有失效,此时没有任何错误.但我想知道是否有一种方法可以从缓存构造中排除特定文件夹,具体如下:
language: node_js
node_js:
- '5.0.0'
sudo: false
cache:
bundler: true
directories:
- node_modules
- !node_modules/grommet
当!node_modules/grommet将被排除在高速缓存索引.
我before_cache按照这里的描述尝试使用.但没有运气.
任何帮助赞赏...
我正在尝试改进现有应用程序的可访问性，并且我注意到当我的路线更改时，浏览器焦点保持不变。我的期望是让焦点回到页面的第一个元素上，这样我就可以利用跳过链接之类的东西。
问题：有没有办法使用 react-router 重置浏览器焦点（模拟页面刷新）？
更新1：
我尝试添加document.activeElement.blur()这似乎有帮助，但在 Chrome 中不起作用。
更新 2：
实际上即使在删除document.activeElement.blur()它之后它似乎也可以在 Safari 中工作。我想知道这是否与 browserHistory 相关react-router
我有一系列路径,让我们说:
/Users/alansouza/workspace/project/src/js/components/chart/Graph.js
此外,我在配置文件中有一个条目,其中包含通配符(glob)格式的此路径的其他属性,如:
{
'**/*.js': {
runBabel: true
}
}
问题:是否有一种简单的方法来验证路径是否与通配符表达式匹配？
例如:
const matches = Glob.matches(
'**/*.js',
'/Users/alansouza/workspace/project/src/js/components/chart/Graph.js'
);
if (matches) {
//do something
}
仅供参考:我正在使用https://github.com/isaacs/node-glob
当用户尝试安装给定版本的库时，如何添加警告消息？
例如，安装babel-preset-es2015时收到以下警告：
感谢您使用Babel：我们建议立即使用babel-preset-env：请阅读babeljs.io/env进行更新！
通过检查他们的代码，我看到他们deprecated在他们的package.json中添加了一个条目，如下所示：
"deprecated": " Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! ",
我可以很容易地添加，但是我实际上并没有弃用任何东西。我只想警告用户他们正在安装Alpha版本，并且API可能会有更改。
题
是否有类似的条目deprecated可以完成这项工作？
我正在使用Webpack和React JSX.我的应用程序中有一个部分,其中包含很多来自设计师的静态内容.他们通常会向我发送一个HTML文件,其中包含我需要发布的内容.
目前,我正在手动将这些HTML转换为JSX(通过危险地设置HTML).
问题:Webpack中是否有一个加载程序会自动将HTML文件转换为React JSX？
我试图从getDefaultProps访问mixin中定义的函数,但我得到了undefined is not a function.基本上我正在使用react-intl,我的列的默认标签应该被翻译.为什么我无法从getDefaultProps中访问mixin中定义的函数？
var React = require('react');
var ReactIntl = require('react-intl');
var IntlMixin = ReactIntl.IntlMixin;
var Index = React.createClass({
mixins: [IntlMixin],
getDefaultProps: function () {
return ({
options: {
attributes: [{name: 'name', label: this.getIntlMessage('Index.name'), index: 0}],
view: "tiles"
}
});
},
render: function() {
return <div>{this.props.options.attributes[0].label}</div>
}
});
module.exports = Index;