JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://kenwheeler.github.io/mcfly/McFly.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
var API = {
getStockPrice: function (stockTicker, callback) {
var callbackFunction = callback;
$.ajax({
url: "https://www.kimonolabs.com/api/ondemand/8wdwefs8?apikey=d753b0c5546495826e7aaa5422f59e30&t=" + stockTicker,
crossDomain: true,
dataType: "jsonp",
success: function (response) {
console.log("success");
callbackFunction(response.results.collection1[0].price);
},
error: function (xhr, status) {
console.log('error', xhr, status);
}
});
}
}
/** McFly */
var Flux = new McFly();
/** Store */
_inputText = '';
_stockPrice = '';
function updateText(text) {
_inputText = text;
}
function updateStockPrice(text) {
_stockPrice = text;
}
var StockStore = Flux.createStore({
getStockPrice: function() {
return _stockPrice;
}
}, function(payload){
if(payload.actionType === "UPDATE_STOCK_PRICE") {
updateStockPrice(payload.text)
StockStore.emitChange();
}
});
var TextStore = Flux.createStore({
getInputText: function() {
return _inputText;
}
}, function(payload){
if(payload.actionType === "UPDATE_INPUT_TEXT") {
updateText(payload.text)
TextStore.emitChange();
}
});
/** Actions */
var StockActions = Flux.createActions({
updateStockPrice: function(text){
console.log("updating stockprice");
return {
actionType: "UPDATE_STOCK_PRICE",
text: text
}
},
updateInputValue: function(text){
API.getStockPrice(function (text, stockPrice) {
StockActions.updateStockPrice(stockPrice);
})
return {
actionType: "UPDATE_INPUT_TEXT",
text: text
}
},
});
function getState(){
return {
inputText:...