小编Eva*_*van的帖子

继承我的配置:

devServer: {
    contentBase: '/web/dist/',
    hot: true,
    stats: {colors: true},
    inline: true
}

这是我正在运行的gulp任务:

gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) {
    es6promise.polyfill();

    console.log('STARTING DEV SERVER...');

    server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer);
    server.listen(8080, '0.0.0.0', function (err, stats) {
        if (err) {
             throw new gutil.PluginError("webpack-dev-server", err);
        }

        console.log('DEV SERVER STARTED');

        done();
    });
});

一切都按预期工作,除了热负载(当我更改文件时没有刷新或更改).我在这做错了什么？

= simple_format(styled_text_for_tagged_text(block.text_block.body, article))

这似乎是在剥夺target="_blank"我的链接之类的属性。我不能用auto_link。对于如何解决这个问题，有任何的建议吗？

我想在每个页面上的mousedown上的按钮上附加一个加载器.

我有一个在布局渲染后触发并在顶层视图中传递的函数,然后抓取每个按钮并在其上附加一个mousedown事件:

attachGlobalButtonEventHandler : function(view){
        view.$el.find('button.viewtag, button.newtag').on('mousedown', function(){
            var $target = $(this);

            $target.addClass('activated');
            $target.prop('disabled', true);
        });
    }

这工作正常,但问题是我的按钮上的主干事件没有被解雇,这看起来像:

events : {
            'click .newtag' : 'gotoCreate'
        },
        gotoCreate : function(evt) {
            evt.preventDefault();

            app.router.navigate('somewhere', true);
        }

如果我删除了attachGlobalButtonEventHandler,那么点击就会newtag很好,但如果附加了处理程序则根本不会触发.如何确保主干点击事件也会触发？

我要做的是有一个Form react组件,它有几个方法来检查里面的所有输入元素是否有效.

我试过的是以下内容:

var FormContainer = React.createClass({
        getDefaultProps: function() {
            return {
                elements: []
            };
        },
        getInitialState: function() {
            return {
                errors: {}
            };
        },
        className: function() {
            return 'form-container';
        },
        isValid: function() {
            var valid = true,
            self = this;

            this.props.elements.forEach(function(ref){
                if (!self.refs[ref].isValid()){
                    valid = false;
                }
            });

            return valid;
        },
        render: function() {
            var self = this;

            return (
                <form className={self.className()}>
                    {self.props.children}

                    <span>Things be valid: </span> <span>{self.isValid()}</span>
                </form>
            );
        }
    });

它也有一个输入类型:

var Input = React.createClass({
        getDefaultProps: function() …

我根据输入的字符串长度验证了多个字段.但是,以下数组中的任何值都不得计入字符串长度:

var omittedSubStrings = ["%KEYWORD%","{Keyword:AltText}","%CITY_STATE%","%CITY%","%KEYWORD%","%KEY_WORD%","%QUERY_KEYWORD%","%QUERY_KEY_WORD%","$CLICK_ID$","$LOCATION$","%URLENC_CITY%","%NOSPACE_CITY%","%STATE%","$USER_PLACEMENT_INV_ID$"];

例如,如果我的字符串是:

var str = "Hello %CITY%";

我希望得到该字符串的长度等于6.多个变量可以在一个字符串中使用,并且它们必须全部不计入长度.

建议？

我一直在研究响应式网页设计技术和head.js,我有几个问题.

• 在延迟加载外部js文件时,你有多少经验减少了head.js的加载时间？
• 需要多少额外的开发/工作来防止Flash出现无格式内容问题？
• head.js的所有CSS功能是否有助于创建响应式设计(针对不同大小的屏幕,设备等)？
• head.js是否会延迟加载图像和插件？

当我们尝试完成以下事情时,人们会推荐一些不同的东西:

• 大量javascript文件的快速,高效加载时间
• 减少开发时间并增加多个设备的屏幕尺寸
• 大规模应用程序的可扩展性
• 遵循最佳做法

任何意见都表示赞赏,谢谢.

下面我有我的一个模块的代码.这是一种spagetti-ish代码,但我想要完成的只是拥有一个模型,一个集合,并渲染一个视图(使用下划线模板)将数据从集合连接到视图.我悲惨地失败了.我得到的问题是尝试在那里运行最后一次调用testfeed.render()告诉我渲染不是一个函数,但它是明确定义的.我能够获取该数据,并且似乎将其添加到api的集合中.我在这做错了什么？

 // Create a new module.
  var Tagfeed = app.module();

  // Default model.
  Tagfeed.Model = Backbone.Model.extend({
    defaults : {
        name : '',
        image : ''
    },
    initialize : function(){
        console.log('tagfeed model is initialized');
        this.on("change", function(){
            console.log("An attribute has been changed");
        });
    }
  });

  var feedCollection = Backbone.Collection.extend({
    model: Tagfeed.Model,
    initialize : function () {
        console.log('feedcollection is initialized');
    },
    fetch: function () {
        var thisCollection = this;
        Api_get('/api/test', function(data){

            $.each(data.data, function(){
                thisCollection.add(this);
            });
            return thisCollection;
        })
    }
  });

  var test = …

所以基本上我有一个包含多个步骤的流程，用户将经历这些步骤。每当他们单击前进按钮时，我想将当前步骤向左滑动，然后从右向左滑动下一步。向后击球时，我希望当前步骤向右滑出，而上一步从左侧滑入。我让它工作，所以它在第一次点击时正确地进行了双向滑动，当我基本上尝试切换它时问题就出现了（所以点击向前，然后向后）。当我这样做时，东西会正确滑出，但上一步不会滑回，留下空白的内容区域。这是您先向前击中，然后击中后的类的状态：

这是我的动画 CSS：

@keyframes slide-in-from-left {
  0% { tranform: translate(-100%); }
  100% { transform: translateX(0%); }
}

@keyframes slide-out-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes slide-in-from-right {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

@keyframes slide-out-right {
  0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

// Animation Classes
// ------------------------------

.slide-in-from-left {
  animation: slide-in-from-left 0.5s forwards;
}

.slide-out-left {
  animation: slide-out-left 0.5s forwards;
}

.slide-in-from-right { …

我正在努力了解一些有关反应的内容,并希望了解更好的方法.

基本上,我想对传入的道具进行一些转换/计算.我目前基于事件的状态变化有限,但未来可能会发生变化.基本上,在渲染中进行这些计算,还是在componentWillMount和componentWillReceiveProps中设置状态更好？

在渲染示例中:

render() {
  var url = this.getUrl() // get url transforms some props into a valid url
  var something = this.getSomething() // etc etc

  return <a href={url}>{something}</a>
}

渲染之外:

componentWillMount() {
  this._checkAndSetUrl(this.getUrl(this.props.data));
},
componentWillReceiveProps(nextProps) {
  const currentGivenUrl = this._getUrl(this.props.data)
  const nextGivenUrl = this._getUrl(nextProps.data)

  if (currentGivenUrl !== nextGivenUrl) {
    this._checkAndSetUrl(nextGivenUrl);
  }
},
_checkAndSetUrl(url) {
  // check validity and do some stuff to url
  url = "new url" 
  something = this.getSomething()

  this.setState({url: url, something: something})
}

我的想法是第二种方式更好,因为你不会在每次渲染时都进行计算,只有在事情发生变化时.有什么可以接受的方式呢？

我想结合两个列表,同时保持秩序,不允许重复.

list1 = [4, 5, 2, 6]
list2 = [4, 1, 2, 9, 6]

output -> [4, 5, 2, 6, 1, 9]

我试过的是list(set(list1) | set(list2))但这不能维持秩序.有没有办法用列表理解来做到这一点？