小编Rem*_*ure的帖子

有没有办法只在满足某个条件时才向React组件添加属性？

我应该在渲染之后添加必需和readOnly属性以基于ajax调用来形成元素,但是我无法看到如何解决这个问题,因为readOnly ="false"与完全省略属性不同.

下面的例子应该解释我想要什么,但不会工作(解析错误:意外的标识符).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

我创建了一个Knockout绑定,能够使用谷歌地图切换KML图层,但解决方案似乎有点慢,"闪烁".如何避免在每个切换上重新创建地图和图层？

可在此处找到正在运行的演示

var ViewModel = function () {
    var self = this;

    self.mapOptions = {
        center: new google.maps.LatLng(60.390791, 5.306396),
        zoom: 2
    };

    self.levels = [{
        text: "Type 1",
        countries: ko.observableArray([
            'https://dl.dropbox.com/u/2873968/countries-kml/afghanistan.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/algeria.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/bahrain.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/burundi.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/ca_republic.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/cameroon.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/chad.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/colombia.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/dr_congo.kml']),
        isVisible: ko.observable(false)
    }, {
        text: "Type 2",
        countries: ko.observableArray([
            'https://dl.dropbox.com/u/2873968/countries-kml/russia.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/sudan.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/syria.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/thailand.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/venezuela.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/yemen.kml',
            'https://dl.dropbox.com/u/2873968/countries-kml/zimbabwe.kml']),
        isVisible: ko.observable(true)
    }];
};

ko.bindingHandlers.KML = {
    update: function (element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor()),
            mapOptions = ko.utils.unwrapObservable(data.mapOptions) || {},
            levels = …

我正在使用formy-react来验证我的React表单,但我不希望验证在用户输入之前启动.只要该字段被标记为"必需",它似乎正在工作,但是当省略时,错误消息立即显示.

我做错了吗？

var React = require('React');
var Formsy = require('formsy-react');

var MyOwnInput = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} placeholder={this.props.name}/>
                <span>{this.getErrorMessage()}</span>
            </div>
        );
    }
});

module.exports = React.createClass({
    render: function () {
        return (
            <Formsy.Form>
                <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
                <MyOwnInput name="email2" validations="isEmail" validationError="This is not a valid email (no required attribute)"/>

                <button type="submit">Submit</button>
            </Formsy.Form>
        );
    }
});

我正在使用Knockout.js作为数据绑定框架,并且在我的视图中有一个允许{{expr}}语法的插件.到现在为止还挺好.但我也想在HTML属性中使用这种语法.我有什么想法可以管理它？

作品

<textarea>{{input}}</textarea>
<input type="text" data-bind="attr:{'value': input}" />
<input type="text" data-bind="value: input" />

不行

<input type="text" value="{{input}}" />

我的工作演示可以在这里找到:http://jsfiddle.net/dC3Ge/1/

谢谢

我试图以某种方式动态地使用i18next翻译和Knockout.js,但我无法弄清楚如何.

自定义Knockout绑定或i18next jQuery插件似乎都不适用于可观察值.

我可以在这里找到我想要实现的演示:http://jsfiddle.net/rdfx2/1/

解决方法是这样的,但如果可能的话,我宁愿避免这种情况:

<div data-bind="text: translate('key', observable)"></div>

self.translate = function (key, value) {
   return i18next.t(key, {
      "var": value
   });
};

谢谢,

我正在尝试使用该插件cordova-plugin-firebase来检索Firebase远程配置,但value总是如此null.

有没有人让这个工作,或在我的实现中看到错误？

谢谢.

$ionicPlatform.ready(function () {
   if (window.FirebasePlugin) {
      window.FirebasePlugin.getValue("xxx", function (value) {
         console.log(value);
      }, function (error) {
         console.error(error);
      });
   }
});

环境

Cordova CLI:7.0.1 Gulp版本:CLI版本1.2.1 Gulp本地版:本地版本3.9.1 Ionic Framework版本:1.3.2 Ionic CLI版本:2.1.1 Ionic App Lib版本:2.1.1 ios-deploy版本:1.9 .1 ios-sim版本:5.0.6操作系统:Mac OS X Sierra节点版本:v4.4.0 Xcode版本:Xcode 8.3.1构建版本8E1000a

是否可以在图表中添加自定义徽标/图像？

我试图修改信用标签，但没有运气。

$('#container').highcharts({

    credits: {
        text: 'remisture.no',
        href: 'http://remisture.no',
        position: {
            align: 'right',
            x: -75,
            verticalAlign: 'top',
            y: 25
        },
        style: {
            color: 'red',
            backgroundImage: 'url(https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png)'
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

演示：http : //jsfiddle.net/remisture/738bnv0b/

知道如何解决这个问题吗？

我正在尝试使用formy-react来摆脱浏览器的默认验证逻辑,并且根据文档," formNoValidation "属性应该可以解决问题.但我无法让它发挥作用.

我究竟做错了什么？

var React = require('React');
var Formsy = require('formsy-react');
var Input = require('./forms/Input.js');

module.exports = React.createClass({
    render: function () {
        return (
           <Formsy.Form>
              <Input ref="phonenumber" id="phonenumber" value={this.state.phonenumber.value} name="phonenumber" required validations="isNumeric" validationError="Please provide a valid phone number" />
           </Formsy.Form>
        );
    }
});

Input.js

var Formsy = require('formsy-react');
var React = require('React');

module.exports = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },

    render: function () {
        var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null; …

如何为同一个mixin定义多个名称并支持内容块？

定义

@mixin desktop-breakpoint {
   @media only screen and (min-width: 769px) {
      @content;
   }
}

@mixin large-breakpoint {
   @include desktop-breakpoint;
}

用法

.my-class {
   font-size: small;

   @include desktop-breakpoint {
      font-size: big;
   }
}

.my-other-class {
   color: red;

   @include large-breakpoint {
      color: blue;
   }
}

错误信息

Mixin“大断点”不接受内容块。