Frontend

In the basic example you can see props are passed down the compoent tree manually at every level. It’s very anoying. A simple way to avoid this is to pass Redux store down at every level. It will simplify the code to some extent function render(){ ReactDOM.render( <AppComponent appName=”React Demo Site” store={rootStore}/>, document.getElementById(‘root’)); } class …

Redux – avoid to pass props down component tree manually – 1. Pass the store down Read More »

This way every component in the tree can access the store directly. So you don’t need to pass the store manually any more This solution is actually based on React’s Contenxt. function render(){ ReactDOM.render( <Provider store = {rootStore}> <AppComponent appName=”React Demo Site”/> </Provider>, document.getElementById(‘root’)); } class AppComponent extends Component { render() { return ( <div …

Redux – avoid to pass props down component tree manually – 2. Use Provider to make store accessible to all components Read More »

If your root component has more than one child component, you will have a big state , so is your reducer // the initial state const initialState = { counter: { value: 0 }, toDo: { itemList: [ {id: 1, text: “be born”, completed: true}, {id: 2, text: “get married”, completed: true}, {id: 3, text: …

Redux weird thing 1 – combineReducers Read More »

In this example, The "CounterComponet" is included by the root component called "AppComponent". No Store composition is used here. You still have to pass the props to "AppComponent", which in turn passes them to "CounterComponent" So it will not demonstrate how good Redux is, but will just let you know the basic ideas of Redux. …

Basic Redux Counter example Read More »

Language ES2015: A new generation of Javascript language specs. It supports modules and classes. It’s also know as ES6 Typescript: An object-oriented language that will be converted to Javascript and then be run in browsers Babel: make code run in an browser that doesn’t support this code, for example running ES6+ in current browsers, or …

Frontend frameworks and things you should know in addition to React/Angular Read More »

console.log(“====== ^ and $ =====”); console.log(/a/.test(“abc”)); //true console.log(/^a$/.test(“abc”)); //false. Add ^ ad $ to confirm a non-partial match console.log(“====== dot =====”); console.log(/^.$/.test(“a”)); //true. A dot means any character console.log(/^\.$/.test(“a”)); //false. \. means dot console.log(/^\.$/.test(“.”)); //true. \. means dot console.log(/^[.]$/.test(“a”)); //false. A dot in brackets means a real dot console.log(/^[.]$/.test(“.”)); //true. A dot in brackets means …

Regex + Javascript: pitfalls concerning dot, backslash and others Read More »

0. Assume the text’s ng-model to be changed is  {{someText}} 1. Create a modal. 2. Let there be an input in the modal. The input’s ng-model should not be {{someText}}, but {{anotherText}} 3. Let there be 2 buttons in the modal. One is "cancel", the other is "ok".  For "ok’,  ng-click = "submitChange()";   4. …

Click to edit in Mobile Angular UI Read More »

The order should be exactly the same HomeControllers.controller(‘LogoutController’, [‘$scope’,’$rootScope’, ‘$localStorage’, ‘$location’, ‘$http’, function($scope, $rootScope, $localStorage, $location, $http){ … Otherwise, you may endup putting Zhang’s Hat to Li’s.

The solution is: use “render”: $.fn.dataTable.render.text() to escape html tags

http://vitalets.github.io/x-editable/ 可以跟bootstrap或者跟jquery整合，蛮好用的。 如果跟dataTables结合起来用，相当于是extJs了，很不错。 下面是一个结合使用的例子： <script src="/assets/js/bootstrap-editable.min.js"></script> <link href="/assets/css/bootstrap-editable.css" rel="stylesheet"> …. <script> //某列的写法 { "data": "firstName", "name": "firstName", "render": function ( data, type, full, meta ) { var template = ‘<a href="#" class="firstNameEditable editable editable-click" data-type="text" data-pk="{1}" data-name="firstName" data-url="/updateManAjax" data-title="New First Name">{0}</a>’; var html = template.format(full.firstName, full.manId); //作者在这里使用了模板引擎，你自己直接拼字符串也可以 return html ; }, … }, … //在dataTable的回调中注册editable组件。你必须写在dataTable的相关回调里面，只有等dataTable渲染完后，前面定义的editable …

点击文本然后修改，建议用X-editable Read More »