Remove unused files. (#527)

diff --git a/_drafts/difference-with-web.en.md b/_drafts/difference-with-web.en.md
deleted file mode 100644
index 57dea81..0000000
--- a/_drafts/difference-with-web.en.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Difference with Web
-type: references
-order: 10.1
-version: 2.1
----
-
-# Differences between using Vue in Web and Weex
-
-## Platform Differences
-
-Vue.js was designed for the Web platform at the beginning. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
-
-Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related):
-
-+ Event bubbling and capturing are not supported. Event modifiers, such as `.prevent`,` .capture`, `.stop`,` .self` are meaningless in the native environment.
-+ The keyboard event modifiers, like `.{KeyCode | keyAlias}` is also meaningless. (see [docs in Vue.js](https://vuejs.org/v2/guide/events.html#Key-Modifiers))
-+ No need to call `vm.$mount` manually, the entry component will mount to the root view of the native container by default.
-+ `v-html` and` v-text` directives are not supported.
-
-## Functional differences
-
-### Vue 2.0 Runtime-only build
-
-Vue 2.0 provides two available builds, the standalone build and the runtime-only build. see the [official document](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build) for more information.
-
-Weex only required the runtime-only build of Vue 2.0 for better performance and less code size.
-
-The specific differences are:
-
-+ The `template` attribute is not supported when defining a component.
-+ Does not support using `x-templates`.
-+ Does not support using `Vue.compile`.
-
-### Isolate the context of multiple pages
-
-Weex use the "multiple-pages" concept in native, different js bundle will be run in different native views, there context is isolated. Even the `Vue` variable is not the same instance between js bundles. (However, all the js bundle will share the same Weex runtime.)
-
-Based on this feature, the global configurations in `Vue` will only take effect on the current page:
-
-+ `Vue.config`
-+ `Vue.component`
-+ `Vue.directive`
-+ `Vue.filter`
-+ `Vue.mixin`
-+ `Vue.use`
-
-> Note: Those methods are still work, but its effect will be limited to the current page.
-
-## Restrictions in style
-
-CSS is very flexible, has a lot of properties, support a variety of layout modes. This is the advantage of CSS, but also a bottleneck in browser performance optimization.
-
-The style in Weex is parsed by the native renderer, and for the sake of performance and complexity, Weex makes some trade-offs about CSS features to make it better suited to *"best practices"*.
-
-### Single class selector
-
-Weex only supports to use single class name in `<style>`, does not support *type selectors*, *ID selectors*, *attribute selectors*, *adjacent sibling selectors* and the *combinators*.
-
-```CSS
-/* Support single class name selector */
-.one-class {
-  font-size: 36px;
-}
-
-/* Does not support to use combinators between selector */
-.parent > .child {
-  padding-top: 10px;
-}
-.foo + .bar {
-  margin-left: 20px;
-}
-
-/* Does not support attribute selectors. The `v-cloak` directive is not supported */
-[V-cloak] {
-  color: #FF6600;
-}
-```
-
-The restriction is only for the style definition, does not affect the use of class names. You can still use multiple class names on a single tag, such as:
-
-```Html
-<template>
-  <div class="one two three"><div>
-</template>
-```
-
-### Scoped by default
-
-In Weex, For single file components, the styles written in the `<style>` can only be used in the current component.
-
-In order to maintain consistency with Native, it is recommended that you write the style in the `.vue` file with the` scoped` attribute, that is, `<style scoped>`.
-
-### Supported CSS attributes
-
-Weex supports a subset of CSS, and will continue to expand.
-
-Weex supports *box-model* and *flexbox*, as well as other common styles. See [Weex Common Style](../ common-style.html) and [Supported Web Standards](http://weex.apache.org/references/web-standards.html) for more information.
-
-In addition, you should also pay attention to the following points:
-
-+ No need to write style prefix.
-+ Weex doesn't support `display: none;` and therefore doesn't support the `v-show` directive.
-+ In order to optimize the efficiency of CSS parser, Weex doesn't support shorthand attributes, involving the following attributes:
-  + `flex`
-  + `border`, `border-(top|bottom|left|right)`
-  + `margin`
-  + `padding`
-  + `font`
-  + `background`
-
-## Differences in development
-
-Because of the platform difference, you have to compile your source file in two different ways:
-
-+ For the web, you can compile source files in any official way, such as Webpack + vue-loader or Browserify + vueify. and require the [weex-vue-render](https://www.npmjs.com/package/weex-vue-render), which is a group of Weex build-in components.
-+ For Android and iOS, we've provided [weex-loader](https://github.com/weexteam/weex-loader) to compile the `.vue` files. That is, use Webpack + weex-loader to generate the js bundle that is available for the native.
-
-### Use weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) is a loader for Webpack, see the [official document](http://webpack.github.io/docs/using-loaders.html) to learn how to use it.
-
-One more thing should be reminded is that if the *entry file* of your webpack config is a `.vue` file, you also need to pass an additional ` entry` parameter, usually set to `true`.
-
-```Js
-module.exports = {
-  // Add the entry parameter for the .vue file
-  entry: './path/to/App.vue?entry=true',
-
-  // other configurations ...
-
-  module: {
-    loaders: [{
-
-      // matches the .vue file path that contains the entry parameter
-      test: /\.vue(\?^^]+)?$/,
-      loaders: ['weex-loader']
-    }]
-  },
-}
-```
-
-**You don't need to write those additional parameters if you are using `.js` file as entry file.** We recommend using javascript files as the entry file of webpack config.
-
-### Setup native development environments
-
-Since your are using Weex to develop native apps, setup native development environments, both Android and iOS, would be very useful.
-
-See [Integrating Weex to the existing application](../../guide/integrate-to-your-app.html) for more information.
diff --git a/_drafts/difference-with-web.md b/_drafts/difference-with-web.md
deleted file mode 100644
index d075312..0000000
--- a/_drafts/difference-with-web.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Vue.js 在 Weex 中的差异
-type: guide
-group: 高阶特性
-order: 8.3
-version: 2.1
----
-
-
-# Vue.js 在 Weex 和 Web 中的差异
-
-## 平台差异
-
-Vue.js 最初是为 Web 平台设计的,虽然可以基于 Weex 开发原生应用,但是 Web 开发和原生开发毕竟不同,在功能和开发体验上都有一些差异,这些差异从本质上讲是原生开发平台和 Web 平台之间的差异,可以通过[《Weex 和 Web 平台的差异》](../platform-difference.html)了解更多细节和原因。
-
-由于运行平台存在差异,Weex 不支持 Vue.js 中与 DOM 相关的功能:
-
-+ 不支持事件冒泡和捕获机制,`.prevent` 、`.capture` 、`.stop` 、`.self` 等事件修饰符在原生环境中无意义。
-+ 键盘事件的 `.{keyCode | keyAlias}` 修饰符在原生环境中无意义。(参考 [Vue 相关文档](https://cn.vuejs.org/v2/guide/events.html#按键修饰符))
-+ 无需自行调用 `vm.$mount`,默认会将入口组件挂载到原生应用的视图中。
-+ 不支持 `v-html` 和 `v-text` 指令。
-
-## 功能差异
-
-### 仅引入了 Vue Runtime
-
-Vue 除了提供默认的完整包以外,还提供一个更小巧的 `vue.runtime.js`,在这个文件中移除了模板编译的相关操作,Weex 中也仅引入 Vue Runtime 的功能,这样做除了可以减少代码体积以外,还能减少运行期编译模板的负担,提升性能。
-
-具体的差异有:
-
-+ 定义组件时不支持使用 `template` 属性。
-+ 不支持使用 `x-templates`。
-+ 不支持使用 `Vue.compile`。
-
-### 隔离多页面的作用域
-
-Weex 在原生端使用的是“多页”的实现,不同的 js bundle 将会在不同的原生页面中执行;也就是说,不同的 js bundle 之间将不同共享 js 变量。即使是 `Vue` 这个变量,在不同页面中也对应了不同的引用。
-
-基于这个特性,Vue 中全局功能将只在当前页面内生效:
-
-+ `Vue.config`
-+ `Vue.component`
-+ `Vue.directive`
-+ `Vue.filter`
-+ `Vue.mixin`
-+ `Vue.use`
-
-> 注:以上接口的功能并未受影响,只是其生效范围将会限制在同一页面内。
-
-## 样式差异
-
-Web 中的 CSS 非常的灵活,积累了特别多的属性,支持多种布局方法;这是其优势,也是浏览器性能优化的一个瓶颈。
-
-Weex 中的样式是由原生渲染器解析的,出于性能和功能复杂度的考虑,Weex 对 CSS 的特性做了一些取舍,使其更符合最佳实践。
-
-### 单类名选择器和作用域
-
-Weex 中只支持单个类名选择器,不支持关系选择器,也不支持属性选择器。
-
-```css
-/* 支持单个类名选择器 */
-.one-class {
-  font-size: 36px;
-}
-
-/* 不支持关系选择器 */
-.parent > .child {
-  padding-top: 10px;
-}
-
-/* 不支持属性选择器,不支持 `v-cloak` 指令 */
-[v-cloak] {
-  color: #FF6600;
-}
-```
-
-这个只是对样式定义的限制,不影响样式类名的使用,在标签中可以添加多个样式类名,如:
-
-```html
-<template>
-  <div class="one two three"><div>
-</template>
-```
-
-### 组件级别的作用域
-
-在 Weex 中,写在组件 `<style>` 里的样式只能用在当前组件中,默认是 `scoped` 作用域。为了保持和 Native 的一致性,建议在 `.vue` 文件中写样式时,加上 `scoped` 属性,即: `<style scoped>`。
-
-### 支持的样式属性
-
-Weex 支持的样式特性是 CSS 的子集,并且会不断扩充;在实现过程中我们参考了 [CSS 属性在浏览器中的使用频率](https://gist.github.com/Jinjiang/ea6b403036b7287cf8b8508729b77ac0#css-properties),优先实现其中频率最高的一些属性。
-
-Weex 支持了基本的盒模型和 flexbox 布局,以及其他常用样式,详情可参考[Weex 通用样式文档](../common-style.html)。
-
-在编写样式时,还应该注意一下几点:
-
-+ 不需要写样式前缀。
-+ Weex 不支持 `display: none;`,因此也不支持 `v-show` 指令。
-+ 为了优化样式解析的效率,样式属性暂不支持简写,涉及一下属性:
-  + `border` 、`border-(top|bottom|left|right)`
-  + `margin`
-  + `padding`
-  + `flex`
-
-## 编译环境的差异
-
-在 Weex 中使用 Vue.js ,你所需要关注的运行平台除了 Web 之外还有 Android 和 iOS ,在开发和编译环境上还有一些不同点。针对 Web 和原生平台,将 Vue 项目源文件编译成目标文件,有两种不同的方式:
-
-+ 针对 Web 平台,和普通 Vue 2.X 项目一样,可以使用任意官方推荐的方式编译源文件,如 Webpack + vue-loader 或者 Browserify + vueify 。
-+ 针对 Android 和 iOS 平台,我们提供了 [weex-loader](https://github.com/weexteam/weex-loader) 工具支持编译 `.vue` 格式的单文件组件;也就是说,目前只能使用 Webpack + weex-loader 来生成原生端可用的 js bundle。
-
-### 使用 weex-loader
-
-weex-loader 是 Webpack 的一个加载器,使用方法参考其[官方文档](http://webpack.github.io/docs/using-loaders.html)。需要提醒的是,如果 Webpack 配置的入口文件是个 `.vue` 格式的文件的话,还需要额外传递 `entry` 参数,通常设置为 `true`,表示将当前组件作为入口组件。为了能正常匹配 `.vue` 文件,Webpack 配置文件中 weex-loader 的匹配规则也需要有所调整。
-
-```js
-module.exports = {
-  // 针对 .vue 文件要添加 entry 参数
-  entry: './path/to/App.vue?entry=true',
-
-  // 其他配置项 ...
-
-  module: {
-    loaders: [{
-
-      // 匹配包含了 entry 参数的 .vue 文件路径
-      test: /\.vue(\?[^?]+)?$/,
-      loaders: ['weex-loader']
-    }]
-  },
-}
-```
-
-如果使用 `.js` 文件作为 Webpack 配置的入口文件,则不需要额外配置这些参数,我们推荐使用 Javascript 文件作为编译的入口文件。
-
-### 搭建原生开发环境
-
-Weex 项目生成的是原生应用,学习一些开发原生应用的基础知识,会对你开发 Weex 项目很有帮助。参考[《集成 Weex 到已有应用》](../../guide/integrate-to-your-app.html)了解更多信息。
diff --git a/_drafts/extend-js-framework.md b/_drafts/extend-js-framework.md
deleted file mode 100644
index d7fcf6d..0000000
--- a/_drafts/extend-js-framework.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: Extend JS framework
-type: guide
-group: Extend
-order: 6.4
-version: 2.1
----
-
-# Extend JS framework
-
-This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention.
-
-Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows:
-
-+ First you have a complete set of JS Framework.
-+ Learn about Weex's JS engine feature support.
-+ Adapting Weex's native DOM APIs.
-+ Adapting Weex's initialization portal and multi-instance management mechanism.
-+ Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it.
-+ Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it.
-
-## Weex JS engine features support
-
-+ Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.
-The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported.
-
-+ Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode `Object.freeze` and so on.
-
-+ The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including `document`, `set`Timeout`, and so on.
-
-+ We added `Promise`'s polyfill, as well as the `console`'s polyfill.
-
-+ In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the `Object.freeze ()` freeze operation, which includes:
-
- 	- `Object`
-	- `Object.prototype`
-	- `Array`
-	- `Array.prototype`
-	- `String.prototype`
-	- `Number.prototype`
-	- `Boolean.prototype`
-	- `Error.prototype`
-	- `Date.prototype`
-	- `RegExp.prototype`
-
-## Adapt to Weex's initial entry and multi-instance management mechanism
-
-The JS Framework provided by the developer needs to be packaged as a **CommonJS** package, and the package needs to be extension to the following methods:
-
-### Framework initialization
-
-+ `init(config)`
-	- `config`
-		- `Document`
-		- `Element`
-		- `Comment`
-		- `TaskSender`
-		- `CallbackManager`
-
-This method places the Native DOM class and two auxiliary classes provided by Weex in the `config` parameter and allows the framework itself to be initialized.
-
-Tip: At the same time, the author can pass in a different `config` in the framework of the initialization time. This allows for framework testing or environmental simulation.
-
-#### Introduction to parameter format
-
-+ `TaskSender`: wip…
-+ `CallbackManager`: wip…
-
-### Register available native components and modules
-
-+ `registerComponents(components)`
-+ `registerModules(modules)`
-
-These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports.
-
-#### Introduction to parameter format
-
-+ `components: Array`: Describe the array of components, each of which includes:
-	+ `type: string`: Component name, for example `div`。
-	+ `methods: string[]`: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call.
-+ `modules: Object`: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the module. The information of the method includes:
-	+ `name: string`: Method name
-	+ `args: string[]`: Parameter number and type description
-
-**E.g:**
-
-```javascript
-registerComponents([
-  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
-])
-registerModules({
-  event: [
-    {name: 'openURL', args: ['string']}
-  ]
-})
-```
-
-### Multi - instance lifecycle management
-
-+ `createInstance(instanceId, code, config, data, env)`
-+ `refreshInstance(instanceId, data)`
-+ `destroyInstance(instanceId)`
-
-Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message.
-
-#### Introduction to parameter format
-
-+ `instanceId: string`: The unique id of the Weex page is generated by native.
-+ `code: string`:The Wex page's JS bundle's code is passed through native.
-+ `config: Object?`: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated by the native configuration. It has nothing to do with the contents of the JS bundle itself.
-+ `data: Object?`: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data.
-+ `env: Object?`:The current environment information about the Weex page, the meaning of each field:
-	- `info: Object`: Framework information, see the "JS Bundle format requirements" later.
-	- `config: Object`:Equivalent to the third parameter of the method `config`
-	- `callbacks: CallbackManager`:  only `CallbackManager`instance of Weex page.
-	- `created: number`:The number of seconds that the Wex page was created.
-	- `framework: string`:The name of the framework used by the Wex page. Equivalent to `info.framework`.
-
-### Native communication
-
-+ `receiveTasks(instanceId, tasks)`
-
-Native can use the `refreshInstance` method to send a message to the JS framework layer. But in many cases will use `receiveTasks` to send user events or methods callback to the JS framework.
-
-For example, if the user clicks on a button, native will send a `fireEvent` type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the `addEvent` in the native DOM interface.
-
-Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager.
-
-#### Auxiliary method
-
-+ `getRoot(instanceId): JSON`
-
-This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a developer tool extension.
-
-## Configure the JS Framework in WeexSDK
-### Prepare your JS Framework code
-
-```javascript
-// your-own-js-framework.js
-export function init (config) { ... }
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-export function createInstance (id, code, config, data, env) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-### Register a JS Framework
-
-```javascript
-import * as Vue from '...'
-import * as React from '...'
-import * as Angular from '...'
-export default { Vue, React, Angular };
-```
-And then packaged JS runtime, integrated into WeexSDK.
-
-#### JS Bundle format requirements
-
-**Framework info**
-The note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows:
-
-```javascript
-// { "framework": "Vue" }
-```
-So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.
diff --git a/_drafts/extend-to-android.md b/_drafts/extend-to-android.md
deleted file mode 100644
index 336f5df..0000000
--- a/_drafts/extend-to-android.md
+++ /dev/null
@@ -1,175 +0,0 @@
-##Extend to Android
-<span class="weex-version">0.4</span>
- 
-### Module extend
-weex sdk support Module extend,
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement it.  
-
-For example: If you want to implement an address jumping function, you can achieve a Module Follow the steps below. 
-#### Step to customize a module 
-1. Customize module must extend WXModule  
-2. @WXModuleAnno annotation must be added, as it is the only the way to recognized by Weex  
-3. The access levels of mehtod must be **public**  
-4. The module class also can not be an inner class  
-5. Customize can not be obfuscated by tools like ProGuard
-6. Module methods will be invoked in UI thread, do not put time consuming operation there
-7. Weex params can be int, double, float, String, Map, List
-
-Refer to the following example: 
-
-```java
-    public class WXEventModule extends WXModule{
-	
-	private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-	
-		@WXModuleAnno
-		public void openURL(String url){
-			//implement your module logic here
-		}
-    }
-
-```
-#### Support synchronous/asynchronous callback 
-you can add  `` @JSMethod (uiThread = false or true ) `` annotation to choose the  callback mode of moudle . see the follow  example.
-```java
-     // as sync-callback mode 
-    @JSMethod (uiThread = false)
-    public void testSyncCall(){
-        WXLogUtils.d("WXComponentSyncTest :"+ Thread.currentThread().getName());
-    }
-    
-    // as async-callback mode 
-    @JSMethod (uiThread = true)
-    public void testAsyncCall(){
-        WXLogUtils.e("WXComponentASynTest :"+ Thread.currentThread().getName() );
-    }
-
-```
-#### Register the moulde
-
-```java
-
-  WXSDKEngine.registerModule("event", WXEventModule.class);
-
-```
-
-### Use this module in weex DSL   
-Now `event` moudle is avaiable in weex, use the module like this:   
-```javascript
-
-var event = weex.requireModule('event');
-event.openURL("http://www.github.com");
-
-```
-
-### Javascript callback
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:   
-```java
-
-	@WXModuleAnno
-	public void openURL(String url,JSCallback callback){
-		//implement your module logic here
-		Map<String,Object> resp = new HashMap();
-		resp.put("result","ok");
-		callback.invoke(resp);
-	}
-	
-```
-At the javascript side, call the module with javascript function to receive callback data:   
-```javascript
-
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-
-```
-
-### Component extend
-<font color="gray">
-There are label, image, div, scroll, ect. components in weex, you can also customize your own components.  
-
-#### Step to customize a component
-
-1. Customize components must extend WXComponent or WXContainer  
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK.
-3. The access levels of mehtod must be **public**
-4. The component class can not be an inner class  
-5. Customize can not be obfuscated by tools like ProGuard  
-6. Component methods will be invoked in UI thread, do not put time consuming operation there.  
-7. Weex params can be int, double, float, String, Map, List, Array
-
-
-Refer to the following example 
-
-```java
-
-	public class MyViewComponent extends WXComponent{ 
-	public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
-	                   WXVContainer parent, String instanceId, boolean isLazy) 
-	 { 
-	 public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
-	   WXVContainer parent, String instanceId, boolean isLazy) {
-	  super(instance, dom, parent, instanceId, isLazy);
-	 }
-	 
-	 @Override
-	 protected void initView() {
-	    mHost = new TextView(mContext);
-	 }
-	 @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
-	 public void setMyViewValue(String value) {
-	    ((TextView)mHost).setText(value);
-	 }
-	}
-
-```
- 
-#### Register the Component
-
-
-```java 
-   WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-### Adapter extend
-
-#### ImagedownloadAdapter
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`. Refer to the following examples.
-
-```java
-
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-	private Activity mContext;
-
-	public ImageAdapter(Activity activity) {
-		mContext = activity;
-	}
-
-	@Override
-	public void setImage(final String url, final ImageView view,
-			WXImageQuality quality, WXImageStrategy strategy) {
-		mContext.runOnUiThread(new Runnable() {
-			
-			@Override
-			public void run() {
-				if (TextUtils.isEmpty(url)) {
-					view.setImageBitmap(null);
-					return;
-				}
-				String temp = url;
-				if (url.startsWith("//")){
-					temp = "http:" + url;
-				}
-				if (view.getLayoutParams().width<=0 || view.getLayoutParams().height<=0) {
-					return;
-				}
-				Picasso.with(WXEnvironment.getApplication())
-						.load(temp)
-						.resize(view.getLayoutParams().width,
-								view.getLayoutParams().height).into(view);
-			}
-		});
-	}
-}
-
-```
diff --git a/_drafts/get-started.md b/_drafts/get-started.md
deleted file mode 100644
index a958043..0000000
--- a/_drafts/get-started.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Get Started
-type: guide
-group: Overview
-order: 1.1
-version: 2.1
-has_chapter_content: true
----
-
-# Get Started
-
-Weex is a framework for building Mobile cross-platform high performance UI applications. Developers can leverage their existing knowledge of VueJS (a powerful JavaScript view library), by writing `*.vue` files to build native applications or pages. This page will help you to write a **Weex** application in 2 minutes.
-
-## Introduction to VueJS
-
->[VueJS](https://vuejs.org/) (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
-
-**VueJS is developed by [Evan You](https://twitter.com/youyuxi).**
-
-Weex now fully supports VueJS 2.x officially. Weex put Vue 2.x as its built-in JS Framework, making it powerful for building native apps!.
-
-## Hello world Example
-
-The easiest way to try Weex is to use the [Playground App](../playground.html) to write a [Hello World](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) example at [dotWe](http://dotwe.org). No installation is required and you do not even have to write native code.
-
-To test Weex online using our Playground App:
-
-- Install the [Playground App](../playground.html) on your phone.
-- Open [the Hello World example](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) in a new tab, click run, and then use the Playground App to scan the QR code.
-
-Nailed it!
-
-If you took the procedure above, you can see simple HTML semantic tags, CSS styles and Javascript code. This is one of the simplest Weex examples. The demo applications renders a "Hello World" in the page. Please note that this is not a Web page. You are running native!.
-
-![mobile_preview](https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg)
-
-### What happened?
-
-As shown in the following code:
-
-```html
-<template>
-  <div>
-    <text class="text">{{text}}</text>
-  </div>
-</template>
-
-<style>
-  .text {
-    font-size: 50;
-  }
-</style>
-
-<script>
-  export default {
-    data () {
-      return {
-        text: 'Hello World.'
-      }
-    }
-  }
-</script>
-```
-
-It's too easy,right? Take a look at the syntax, that is vue.
-
-You can try to modify the Hello World example if you have previous knowledge of building VueJS examples, then generate a new QR code to scan. If you don't have previous knowledge of VueJS, don't worry, this guide will teach you just that. Moreover, you can always learn from the [VueJS Guide](https://vuejs.org/v2/guide).
diff --git a/_drafts/native-dom-api.md b/_drafts/native-dom-api.md
deleted file mode 100644
index 37729a2..0000000
--- a/_drafts/native-dom-api.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: Native DOM APIs   
-type: references
-order: 6
-version: 2.1
-has_chapter_content: true
----
-
-# Native DOM APIs
-
-Weex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt.   
-
-In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM.   
-
-+ `Document` class: full page document.
-+ `Node` class: the base class of nodes.
-+ `Element` class: element node, inherited from Node, single view unit.
-+ `Comment` class: comment node, inherited from Node, no practical meaning, usually used as placeholders.       
-
-Each Weex page has a `weex.document` object, which is an instance of the Document class and is the starting point for all the following interface calls.
-
-Let's take a look at their usage in detail:    
-
-## `Document` class
-Each `Document` instance will automatically have a `documentElement` property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document.   
-
-Note: The document node body only accepts `<div>`, `<list>`, or `<scroller>` three types of element nodes.   
-
-### Constructor
-`new Document(id: string, url: string?)`
-
-### Member method 
-`createElement(tagName: string, props: Object?): Element`   
-
-+ Creates an `Element` instance of a specific type `tagName`, which is an element node. Props can contain attr objects and style objects. Such as `createBody ('div', {style: {backgroundColor: '#ffffff'}})`.     
-
-`createComment(text: string): Comment`  
- 
-+ Create an instance of ·`Comment`, which is a comment node and set a text description.
-
-`createBody(tagName: string, props: Object?): Element`
-
-+ Create a document body node and automatically mount it under `documentElement`.   
-
-`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
-Triggers a particular type of event. When the event modifies the DOM's properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the `createElement` method above.
-
-`destroy()`   
-
-+ Destroy the current document. Once the document is destroyed, it will no longer work.   
-
-### Read-only member variables
-`id: string`
-
-+ Each `Document` instance has a unique id. This is also the only id that each Weex page has.
-
-`URL: string?`
-
-+ If the current Weex page has a JS bundle URL, the URL will be returned here.  
-
-`body: Element`  
-
-+ The main body of the document, the concept similar to the HTML DOM document.body.  
-
-`documentElement: Element` 
- 
-+ Document node, the concept similar to the HTML DOM document.documentElement.
-+ The relationship between body and documentElement is: documentElement is the parent of the body.   
-
-`getRef(id): Node`
-
-+ Get the node based on the node id.
-
-## `Node` Class  
-### Constructor  
-`new Node()`
-
-### Member method 
-`destroy()`
-
-### Read-only member variables or methods  
-`ref: string`  
-
-+ Each `Node` instance has its own unique ref value in the entire `Document instance.
-
-`nextSibling: Node?`
-
-`previousSibling: Node?`
-
-`parentNode: Node?`
-
-+ The three interfaces are consistent with the definition of HTML DOM.  
-
-`children: Node[]`
-
-+ The node has an array of all child nodes.
-
-`pureChildren: Node[]`    
-
-The node has an array of all the child elements. The difference between it and `children` is that `pureChildren` contains only the `Element` instance and not the `Comment` instance.   
-
-
-## `Element` class, inherited from `Node`   
-### Constructor 
-`new Element(type: string, props: Object?)`
-
-+ Creates an element node of a particular type `type`, and the `props` parameter can contain an `attr` object or a `style` object.   
-
-### DOM tree operation
-`appendChild(node: Node)`
-`insertBefore(node: Node, before: Node?)`
-
-+ The two interfaces are similar to HTML DOM.  
-
-`insertAfter(node: Node, after: Node?)`  
-
-+ Insert a new node before a child node.
-
-`removeChild(node: Node, preserved: boolean?)`
-
-+ Delete the child node node. Parameters `preserved` whether it is immediately removed from memory or temporarily retained.   
-
-`clear()`
-
-+ Clear all child nodes.  
-
-### The DOM property itself operates  
-
-`setAttr(key: string, value: string, silent: boolean?)`
-
-`setStyle(key: string, value: string, silent: boolean?)`
-
-+ In the above two interfaces, when `silent` is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed.     
-
-`addEvent(type: string, handler: Function)`
-
-`removeEvent(type: string)`
-
-`fireEvent(type: string, e: any)`
-
-+ Bind events, unbind events, trigger events.   
-
-#### Component method for a specific component type  
-
-Special: Different component types can have their own unique methods, such as `<web>` components support `refresh` method. You can see the description of each component. In this case, we will generate a specific component type of class, such as `WebElement`, which inherited from `Element`.      
-
-Such as:     
-
->`WebElement` inherited from `Element`           
->Indicates that a webview is embedded in the Wex page
-
->`Refresh ()`: Refreshes the current webview    
-
-
-### Read-only member variables or methods  
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`  
-
-+ Inherited from `Node`.   
-
-`nodeType: number`
-
-+ The number is always  1.
-
-
-`type: string`
-
-+ Consistent with the `type` in the constructor.  
-
-`attr: Object`
-
-+ The key pair of all the characteristics of the current node. It is recommended to use the `setAttr ()` method to modify, rather than directly modify the object here.   
-
-`style: Object`
-
-+ The value of all the keys of the current node. It is recommended to modify the `setStyle ()` method, rather than directly modify the object here.   
-
-`event: Object`
-
-+ All events of the current node are bound. Each event type corresponds to an event handler method. It is recommended to use the `addEvent () / removeEvent ()` method to modify, rather than directly modify the object here.   
-
-`toJSON(): Object`
-
-+ Returns a JSON object that describes the element's node, such as: `{ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}`.
-
-
-## `Comment` class, inherited from `Node`
-
-### Constructor 
-`new Comment(value: string)`  
-
-### Read-only member variables or methods  
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`
-
-+ Inherited from `Node`.
-
-`nodeType: number`
-
-+ The number is always 8.  
-
-`type: string`  
-
-+ The type  is always `'comment'` 
-
-`value: string`
-
-+ Consistent with the value in the constructor.
-
-`toJSON(): Object` 
-
-+ Returns a JSON object describing the annotation node. For example: `<! - value ->`.
diff --git a/_drafts/sandbox.md b/_drafts/sandbox.md
deleted file mode 100644
index f5cf5dc..0000000
--- a/_drafts/sandbox.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Weex 多实例隔离机制
-
-## 需求
-
-隔离每个页面实例的执行环境,保障实例中的变量无法污染全局。
-
-## 污染点
-
-1. global javascript context
-2. global objects: `Object`, `Array`, `Array.prototype`
-3. (browser) global apis: `setTimeout`, `Promise`, `console`.
-4. weex, document
-5. Vue & Rax
-
-## 实现思路
-
-+ 从客户端或引擎级别将页面的执行环境区分开。
-
-### 额外收获
-
-+ 取消 **“用 js 执行 js”**(`new Function`)之后,更细粒度的代码分割、动态组件或模块都可以实现了。
-
-### 依然存在的风险点
-
-+ console
-+ Promise
-+ timer
-+ 回调函数
-
-+ js service
-+ weex 不是开放问题,用 freeze 可以防御
-+ Vue 不是开发问题,用 freeze 可以防御。如果前端框架从 jsfm 中拆离,可彻底解决问题。
-
-## 增强方案
-
-## 更激进方案
diff --git a/_drafts/timer.cn.md b/_drafts/timer.cn.md
deleted file mode 100644
index c93f937..0000000
--- a/_drafts/timer.cn.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Timer
-type: references
-group: 内置模块
-order: 9.03
-version: 0.10
----
-
-# Timer
-Weex Timer可以用来延时启动一个一次性任务或者重复任务。Timer会尽最大努力提供精确的延时,但是延时可能并不精确,延时时间很可能会超过用户期望的时间。实际上,timer仅仅是为了支持HTML5中的polyfill,*不建议*开发者直接使用timer.
-
-## API
-Timer中延时的单位是毫秒,且延时时间应该为一个非负的**int**值(int值最大为0x7FFFFF).如果延时时间为零,会将该任务马上插入任务队列的尾部。对于其他非法值,timer的行为未定义。
-
-### setTimeout(fn, timeout)
-`setTimeout()`会等待指定的时间,然后执行给出的函数。
-* 可以使用 `clearTimeout()`去阻止`setTimeout()`运行如果此时对应的`setTimeout()`还没有运行的话。
-* 如果需要重复执行任务,使用`setInterval()`.
-
-#### Arguments
-* `fn` (function): 待执行的函数.
-* `timeout` (number): 执行函数前的等待时间,单位为毫秒。
-
-#### Return value
-一个Number对象, 表示这个任务的id。把id传入clearTimeout(fnId)中可以用来取消任务。
-
-### setInterval(fn, interval)
-`setInterval()`每隔指定的时间间隔后,会执行对应的函数。`setInterval()`不会停止,除非`clearInterval()`被调用。`setInterval()`的返回值可以用来作为`setInterval()`的参数。
-
-#### Arguments
-* `fn` (function): 待执行的函数。
-* `interval` (number): 这次执行函数与下一次函数之间的时间间隔,单位为毫秒。
-
-#### Return value
-一个Number对象,代表任务序列的id。可以把这个值传入`clearInterval`中来终止重复任务的执行。
-
-### clearTimeout(fnId)
-`clearTimeout()`可以用来提前终止`setTimeout()`启动的任务。仅当`setTimeout()`对应的任务没有被执行时,`clearTimeout()`才可以用来终止该任务,否则`clearTimeout()`没有任何效果。
-
-#### Arguments
-* `fnId` (number): `setTimeout()`的返回值.
-
-### clearInterval(fnId)
- `clearInterval()`可以用来终止 `setInterval()`启动的任务序列。
-
-#### Arguments
-* `fnId` (number): `setInterval()`的返回值
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)
diff --git a/_drafts/timer.md b/_drafts/timer.md
deleted file mode 100644
index da518fd..0000000
--- a/_drafts/timer.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Timer
-type: references
-group: Build-in Modules
-order: 9.03
-version: 0.10
----
-
-# Timer
-
-Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
-Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.
-
-## API
-
-All timeout or interval in this module are measured in milliseconds. Also, timeout and interval should be a non-negative **integer**(the max of integer is 0x7FFFFFFF). The behavior of invalid value for timeout or interval is undefined.
-
-### setTimeout(fn, timeout)
-
-The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `timeout` (number): The number of milliseconds to wait before executing the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.
-
-### setInterval(fn, interval)
-
-The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `interval` (number): The intervals (in milliseconds) on how often to execute the function
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer
-
-### clearTimeout(fnId)
-
-The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.
-
-#### Arguments
-
-- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
-
-### clearInterval(fnId)
-
-The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
-
-#### Arguments
-
-- `fnId` (number): The fnId of the timer returned by the `setInterval()` method
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)
diff --git a/_drafts/using-vue.md b/_drafts/using-vue.md
deleted file mode 100644
index 3da03f6..0000000
--- a/_drafts/using-vue.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Using Vue
-type: guide
-group: Develop
-order: 5.2
-version: 2.1
----
-
-# Using Vue
-
-## Vue in Weex
-
-[Vue.js](https://vuejs.org/) is an excellent progressive JavaScript framework written by [Evan You](https://twitter.com/youyuxi) which is very easy and flexible to use. Developers can write `*.vue` files with friendly `<template>`, `<style>`, `<script>` tags to build componentized web apps.
-
-![a vue file](//cn.vuejs.org/images/vue-component.png)
-
-In Oct 2016 Vue.js launched 2.0, which includes the virtual-DOM and pre-compiler for HTML templates. This means Vue.js can run in a JS-only environment without HTML / CSS parsers. The virtual-DOM layer also makes Vue 2.x able to render native UIs through JavaScript.
-
-Weex and Vue now support each other officially. Now that Weex includes Vue 2.x as its built-in JS Framework, Vue can be used to develop native mobile apps.
-
-**Links**
-
-* [Weex tutorial](../index.html)
-* [Vue Introduction](https://vuejs.org/v2/guide/)
-* [How Weex works](./index.html)
-
-## New Features of Vue 2.x in Weex
-
-### Stream Rendering
-
-In Weex, developers can use `<foo append="tree|node">` to customize the rendering granularity to balance different UI complexity and business logic in order to get the best first-paint performance. `append=tree` means that the entire node, including all its child nodes, will be one-time rendered to native UI after all of the nodes generated completely. And `append=node` means just render the current node itself first and its child nodes will be futher rendered later.
-
-<!-- dotwe demo -->
-
-### Two-way Data Binding in Form Controls
-
-In Weex, we provide the same `v-model` directive as web dev exprience for both `<input>` and `<textarea>` components. Developers can write `<input v-model="message">` or `<textarea v-model="message">` to bind data `message` and show it on the text box automatically. When user modifies the text box, the value of data `message` will be automatically updated.
-
-<!-- dotwe demo -->
-
-### Isolate Each Page Contexts
-
-As described in [how Weex works](./index.html), all Weex's JS bundles share a JavaScript instance. So how can we make Vue 2.x used in multiple JS bundles completely isolated, and that one page which extends or rewrites Vue does not affect other pages becomes a problem. Through the collaboration between Weex and Vue. The problem has been solved.
-
-<!-- html5 apis -->
-
-### `<transition>`
-
-Weex supports the awesome `<transition>` syntax in Vue 2.x. Developers can easily define the transition of an interface in both states with `<transition>` tag.
-
-## Notice
-
-Web development and native development, after all, there are some differences in functionality and development experience, which are essentially the differences between the native development platform and the Web platform, and Weex is trying to narrow the scope of this difference. See [differences of Vue 2.x between Weex and web](../../references/vue/index.html)
-
-## Using Vue-related Libs
-
-Vue.js also has more cool related libs. For example [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router). They all work well in Weex. For using Vuex and vue-router, see [Using Vuex and vue-router in Weex](../../references/vue/difference-of-vuex.html)。
-
-> We developed a complete project based on Weex and Vue 2.x which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). It includes WeexSDK with Vue 2.x in iOS, Android and web. Also we use Vuex and vue-router. The whole project uses the same source code for three different platforms.
diff --git a/_drafts/v-0.10/advanced/extend-to-android.md b/_drafts/v-0.10/advanced/extend-to-android.md
deleted file mode 100644
index 97bb49e..0000000
--- a/_drafts/v-0.10/advanced/extend-to-android.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: Extend to Android
-type: advanced
-order: 6
-has_chapter_content: true
-version: 0.10
----
-
-# Extend to Android
-
-### Module extend
-weex sdk support Module extend,
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module Follow the steps below.
-
-#### Step to customize a module
-
-1. Customize module must extend WXModule
-2. @WXModuleAnno annotation must be added, as it is the only the way to recognized by Weex
-3. The access levels of mehtod must be **public**
-4. The module class also can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Module methods will be invoked in UI thread, do not put time consuming operation there
-7. Weex params can be int, double, float, String, Map, List
-
-Refer to the following example:
-
-```java
-public class WXEventModule extends WXModule{
-
-  private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-
-    @JSMethod
-    public void openURL(String url){
-      //implement your module logic here
-    }
-}
-
-```
-
-#### Register the moulde
-
-```java
-  WXSDKEngine.registerModule("event", WXEventModule.class);
-```
-
-### Use this module in weex DSL
-Now `event` moudle is avaiable in weex, use the module like this:
-
-```javascript
-var event = require('@weex-module/event');
-event.openURL("http://www.github.com");
-```
-
-### Javascript callback
-
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:
-
-```java
-  @JSMethod
-  public void openURL(String url,JSCallback callback){
-    //implement your module logic here
-    Map<String,Object> resp = new HashMap();
-    resp.put("result","ok");
-    callback.invoke(resp);
-  }
-```
-
-At the javascript side, call the module with javascript function to receive callback data:
-
-```javascript
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-```
-
-### Component extend
-
-There are label, image, div, scroll, ect. components in weex, you can also customize your own components.
-
-#### Step to customize a component
-
-1. Customize components must extend WXComponent or WXContainer
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK.
-3. The access levels of mehtod must be **public**
-4. The component class can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Component methods will be invoked in UI thread, do not put time consuming operation there.
-7. Weex params can be int, double, float, String, Map, List, Array
-
-
-Refer to the following example
-
-```java
-public class MyViewComponent extends WXComponent{
-  public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
-                     WXVContainer parent, String instanceId, boolean isLazy)
-   {
-     public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
-       WXVContainer parent, String instanceId, boolean isLazy) {
-      super(instance, dom, parent, instanceId, isLazy);
-     }
-
-     @Override
-     protected void initView() {
-        mHost = new TextView(mContext);
-     }
-     @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
-     public void setMyViewValue(String value) {
-        ((TextView)mHost).setText(value);
-     }
-}
-```
-
-#### Register the Component
-
-
-```java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-### Adapter extend
-
-#### ImagedownloadAdapter
-
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`. Refer to the following examples.
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-  private Activity mContext;
-
-  public ImageAdapter(Activity activity) {
-    mContext = activity;
-  }
-
-  @Override
-  public void setImage(final String url, final ImageView view,
-      WXImageQuality quality, WXImageStrategy strategy) {
-    mContext.runOnUiThread(new Runnable() {
-
-      @Override
-      public void run() {
-        if (TextUtils.isEmpty(url)) {
-          view.setImageBitmap(null);
-          return;
-        }
-        String temp = url;
-        if (url.startsWith("//")){
-          temp = "http:" + url;
-        }
-        if (view.getLayoutParams().width<=0 || view.getLayoutParams().height<=0) {
-          return;
-        }
-        Picasso.with(WXEnvironment.getApplication())
-            .load(temp)
-            .resize(view.getLayoutParams().width,
-                view.getLayoutParams().height).into(view);
-      }
-    });
-  }
-}
-```
-
-#### Component Method
-from WeexSDK `0.9.5`, you can define your component method
-
-for example, define a method in component:
-
-```java
-@JSMethod
-public void focus(){
-//method implementation
-}
-```
-
-after your registration for your own custom component, now you can call it in your js file.
- 
-```html
-<template>
-  <mycomponent id='mycomponent'></mycomponent>
-</template>
-<script>
-  module.exports = {
-    created: function() {
-      this.$el('mycomponent').focus();
-    }
-  }
-</script>
-``` 
diff --git a/_drafts/v-0.10/advanced/extend-to-html5.md b/_drafts/v-0.10/advanced/extend-to-html5.md
deleted file mode 100644
index 6201fc7..0000000
--- a/_drafts/v-0.10/advanced/extend-to-html5.md
+++ /dev/null
@@ -1,258 +0,0 @@
----
-title: Extend to web
-type: advanced
-order: 8
-has_chapter_content: true
-version: 0.10
----
-
-# Extend Weex HTML5
-
-### Intro
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects. You can build your own components on web platform or native platform by extending the components system. Also you can extend weex by adding new methods for one module, new moudles or new bundle loaders. Follow the steps bellow you can dive into the journy of creating multiple builtin components, APIs and loaders.
-
-First of all, components, APIs and loaders are extensions to weex, so you can create your extensions without requiring the weex package, that means your extensions can be totally standalone. 
-
-Second, you should always implement a extension for all the three platforms (android, ios and web), except that you only use it on one specific platform. After all weex is a cross platform framework and the equality of user expierence in all platforms is very important. Although you can create components separately on one platform by another, or welcome other developers on other platforms to join your work (You can always find coders who want the same feature with you in the commity). Here are docs about how to create native extensions on [ios](./extend-to-ios.html) and [android](./extend-to-android.html). 
-
-You should publish your extensions somewhere weex developers can easily find, somewhere popular, independent and easy to search and use, such as, npm. Npm is what we strongly recommended.
-
-The most important thing is, you'd better name your extension appropriately: it should begin with a `weex-` if it is a weex extension, and it should end up with a `-<platform>` as a platform mark. If your package is wrapped up with all the three platforms you can ignore it through. Here is a demonstrating component [`<weex-hello-web>`](https://github.com/MrRaindrop/weex-hello-web) to show how to define your own component.
-
-### Create a new component
-
-Steps:
-
-1. Extend `Weex.Component`, override methods of component class.
-2. Use `Weex.registerComponent` to register your customized component in the `init` method of the installation module.
-3. export the `init` method for the installation (Every weex-html5 extension has to have a `init` method in the export object, which is for another weex project to install.)
-
-Here's a example to create a weex component for web platform (weex-html5):
-
-```javascript
-const attr = {
-  // ...
-}
-const style = {
-  // ...
-}
-const event = {
-  // ...
-}
-// every extension file should have a init method.
-function init (Weex) {
-  const Component = Weex.Component
-  const extend = Weex.utils.extend
-
-  // the component's constructor
-  function Hello (data) {
-    Component.call(this, data)
-  }
-
-  // extend the prototype
-  Hello.prototype = Object.create(Component.prototype)
-  extend(Hello.prototype, proto)
-
-  // config the attributes, styles and events.
-  extend(Hello.prototype, { attr })
-  extend(Hello.prototype, {
-    style: extend(Object.create(Component.prototype.style), style)
-  })
-  extend(Hello.prototype, { event })
-
-  Weex.registerComponent('weex-hello', Hello)
-}
-
-// export the init method.
-export default { init }
-```
-
-The code above is extracted from [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65).
-
-This demo has overrided the `create` method of the base class `Component`. You can also override other methods to customize your component's behavior. The typical methods of class `Component` you may override are:
-
-* `create`: to create the node of the component, and return it.
-* `createChildren` to create the children's nodes.
-* `insertBefore` to insert a child before another child.
-* `appendChild` to append a child in the children list.
-* `removeChild` to remove a child in the children list.
-
-**Advanced**: Need more code demonstrations about overriding the component's methods ? Just take a look at the [weex repo's code](https://github.com/apache/incubator-weex/tree/dev/html5/). Basically the most of the built-in components are defined this way.
-
-Important! To register your component in the `init` method, use `Weex.registerComponent`. Here's the demo code:
-
-```javascript
-Weex.registerComponent('weex-hello', Hello)
-```
-
-The code above is from [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62)
-
-Install the component using `Weex.install`.
-
-```javascript
-// import the original weex-html5.
-import weex from 'weex-html5'
-import hello from 'weex-hello-web'
-// install the component.
-weex.install(hello)
-```
-
-The code above is from [weex_extend_demo/src/main.js](https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5)
-
-use the component in your `.we` file:
-
-```html
-<template>
-  <div>
-    <weex-hello class="hello" style="txt-color:#fff;bg-color:green"
-      value="WEEX" onclick="handleClick">
-    </weex-hello>
-  </div>
-</template>
-```
-
-The code above is from [weex_extend_demo/demo/index.we](https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15)
-
-### Add a new API
-
-You can add new API modules, or just add a new API for any existing API modules. For example, you can add a new module `user` with APIs like 'login', 'logout' etc. The developer can invoke the API by using `require('@weex-module/moduleName)[methodName](arg1, arg2, ...)` ([Module APIs](../references/api.html)).
-
-Steps:
-
-1. Implement your API modules.
-2. Use `Weex.registerAPIModules` to register your API modules in the init method of your installation module.
-
-**Here is a example for register a new API module**
-
-First create a file named `user.js` for a new module, then define `login/logout` methods.
-
-```javascript
-const user = {
-  // for user to login.
-  login (callbackId) {
-    login.then(res => {
-      this.sender.performCallback(callbackId, res)
-    }).catch(err => {
-      this.sender.performCallback(callbackId, err)
-    })
-  },
-  
-  // for user to logout.
-  logout (callbackId) {
-    logout.then(res => {
-      this.sender.performCallback(callbackId, res)
-    }).catch(err => {
-      this.sender.performCallback(callbackId, err)
-    })
-  }
-}
-
-// add meta info to user module.
-const meta = {
-  user: [{
-    name: 'login',
-    args: ['function']
-  }, {
-    name: 'logout',
-    args: ['function']
-  }]
-}
-
-export default {
-  init (Weex) {
-    // Register your new module. The last parameter is your
-    // new API module's meta info.
-    Weex.registerApiModule('user', user, meta)
-  }
-}
-```
-
-After above coding work, you can publish this user helper API to npm now, for example, with the name of `weex-user-helper`.
-
-Install the component using `Weex.install` in your new weex project.
-
-```javascript
-import Weex from 'weex-html5'
-import user from 'weex-user-helper'
-
-Weex.install(user)
-```
-
-Use the user helper API in your dsl code (xxx.we):
-
-```html
-<template>
-  <div>
-    <div class="btn" onclick="handleClick">
-      <text>LOGIN</text>
-    </div>
-  </div>
-</template>
-
-<script>
-  var userHelper = require('@weex-module/user')
-  module.exports = {
-    methods: {
-      handleClick: function () {
-        userHelper.login(function () {
-          // ... do sth. in callback.
-        })
-      }
-    }
-  }
-</script>
-```
-
-### Add a new loader
-
-**Loader is only a type of extension for weex-html5 (web platform), native platform is not needing this.**
-
-Weex's builtin loaders to load a weex bundle are `xhr`, `jsonp` and `source`. The default loader is `xhr`. You can register your own loader by using `weex.registerLoader`. For example, you got a service method named `myServe.getWeexBundle`, which can load a weex bundle file through some magical tunnel:
-
-```javascript
-function loadByMyServe(pageId, callback) {
-  myServe.getWeexBundle(pageId).then(function (bundle) {
-    callback(bundle)
-  }).catch(function(err) {
-    callback(err)
-  })
-}
-
-// export the init method to enable weex install this loader.
-export default {
-  init (Weex) {
-    Weex.registerLoader('myserve', loadByMyServe)
-  }
-}
-```
-
-install and use your loader in your project's entry file:
-
-```javascript
-import Weex from 'weex-html5'
-
-// or import from './myserve.js', no matter where you can import your loader file.
-import loader from 'myLoader'
-
-Weex.install(loader)
-
-// use your loader in the init function:
-(function () {
-  function getUrlParam (key) {
-    const reg = new RegExp('[?|&]' + key + '=([^&]+)')
-    const match = location.search.match(reg)
-    return match && match[1]
-  }
-  const page = getUrlParam('page') || 'examples/build/index.js'
-  Weex.init({
-    appId: location.href,
-    loader: 'myserve',  // use the loader type you defined.
-    source: page,
-    rootId: 'weex'
-  })
-})();
-```
-
-That's the major extension feature weex brought to you. The deep details can be found in the [weex's repo](https://github.com/alibaba/weex) and the weex's community.
-
diff --git a/_drafts/v-0.10/advanced/extend-to-ios.md b/_drafts/v-0.10/advanced/extend-to-ios.md
deleted file mode 100644
index bddb96e..0000000
--- a/_drafts/v-0.10/advanced/extend-to-ios.md
+++ /dev/null
@@ -1,311 +0,0 @@
----
-title: Extend to iOS
-type: advanced
-order: 7
-has_chapter_content: true
-version: 0.10
----
-
-# Extend to iOS
- 
-### Module extend
-
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module following the steps below.
-
-#### Step to customize a module
-
-1. Module 
-    customized must implement WXModuleProtocol
-2. A macro named `WX_EXPORT_METHOD` must be added, as it is the only way to be recognized by Weex. It takes arguments that specifies the method in module   called by JavaScript code.
-3. The weexInstance should be synthesized. Each module object is bind to a specific instance.
-4. Module methods will be invoked in UI thread, so do not put time consuming operation there. If you want to  execute the whole module methods in other     thread, please implement the method `- (NSThread *)targetExecuteThread` in protocol. In the way, tasks distributed to this module will be executed in targetExecuteThread. 
-5. Weex params can be String or Map.
-6. Module supports to return results to Javascript in callback. This callback is type of `WXModuleCallback`, the params of which can be String or Map.
-
-```objective-c
-@implementation WXEventModule
-@synthesize weexInstance;
-    WX_EXPORT_METHOD(@selector(openURL:callback))
-
-- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
-{
-    NSString *newURL = url;
-    if ([url hasPrefix:@"//"]) {
-        newURL = [NSString stringWithFormat:@"http:%@", url];
-    } else if (![url hasPrefix:@"http"]) {
-        newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
-    }
-
-    UIViewController *controller = [[WXDemoViewController alloc] init];
-    ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
-
-    [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
-    callback(@{@"result":@"success"});
-}
-
-@end
-```
-    
-#### Register the module
-
-You can register the customized module by calling the method `registerModule:withClass` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-*  @abstract Registers a module for a given name
-*  @param name The module name to register
-*  @param clazz  The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
-
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-```
-    	
-### Handler extend
-
-Weex SDK doesn't have capabilitis, such as image download 、navigator operation,please implement these protocols by yourself.
-
-#### WXImgLoaderProtocol
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `WXImgLoaderProtocol`. Refer to the following examples.
-
-```objective-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-
-/**
-    * @abstract Creates a image download handler with a given URL
-    * @param imageUrl The URL of the image to download
-    * @param imageFrame  The frame of the image you want to set
-    * @param options : The options to be used for this download
-    * @param completedBlock : A block called once the download is completed.
-    image : the image which has been download to local.
-    error : the error which has happened in download.
-    finished : a Boolean value indicating whether download action has finished.
-    */
-    -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;
-    @end
-```
-
-Implement above protocol as follows.
-
-
-```objective-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
-
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
-{
-    if ([url hasPrefix:@"//"]) {
-        url = [@"http:" stringByAppendingString:url];
-    }
-    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {     
-    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
-    if (completedBlock) {
-        completedBlock(image, error, finished);
-    }
-    }];
-}
-@end
-```
-	
-#### Register the handler
-
-You can register the handler which implements the protocol by calling  `registerHandler:withProtocol` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-        
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
-```
-              
-## Custom Native Components for iOS
-
-### Component extend
-
-There are a lot of native components ready to be used in the Weex SDK,  but users always have their own use cases. You might have written an awesome native UI widget in your previous work and just want to wrap up it and export to Weex. So we provide a way to enable developers to create their own custom fully-native components.
-
-This guide will use the implementation of existing component `image` to show you how to build a native component. It will also assume that you are familiar with iOS programming.
-
-#### Registration
-
-Defining a custom native component is simple. Just call `[WXSDKEngine registerComponent:withClass:]` with the component's tag name as first argument.
-
-```objective-c
-[WXSDKEngine registerComponent:@"image" withClass:[WXImageComponent class]];
-```
-
-Then you can create a `WXImageComponent` class to represent the implementation of image component.
-
-Now you can use `<image>` wherever you want in the template.
-
-```html
-<image></image>
-```
-
-#### Adding Properties
-
-The next thing we can do is to extend some native properties to make the component more powerful. As an image, let's say we should have a `src` attribute as image's remote source and a `resize` attribute as image's resize mode(contain/cover/stretch).
-
-```objective-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
-```
-
-All of the styles, attributes and events will be passed to the component's initialization method, so here you can store the properties which you are interested in.
-
-```objective-c
-@implementation WXImageComponent
-
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
-    if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
-        _imageSrc = [WXConvert NSString:attributes[@"src"]];
-        _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-    }
-    
-    return self;
-}
-
-@end
-```
-
-The properties getted in the attributes are of `id` type, so we have to convert them to the type we want using a conversion function.  Basic conversion functions can be found in the `WXConvert` file,  or you can just add your own conversion function.
-
-
-#### Hooking Render Life Cycle
-
-A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it.
-
-Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur.
-
-method| description 
-:----:|------
-initWithRef:type:...| Initializes a new component using the specified  properties. 
-layoutDidFinish | Called when the component has just laid out.
-loadView   | Creates the view that the component manages.  
-viewWillLoad | Called before the load of component's view .  
-viewDidLoad | Called after the component's view is loaded and set.
-viewWillUnload | Called just before releasing the component's view.
-viewDidUnload | Called when the component's view is released.
-updateStyles:| Called when component's style are updated.
-updateAttributes:| Called when component's attributes are updated.
-addEvent:| Called when adding an event to the component.
-removeEvent:| Called when removing an event frome the component.
-
-
-As in the image component example, if we need to use our own image view, we can override the `loadView` method.
-
-
-```objective-c
-- (UIView *)loadView
-{
-    return [[WXImageView alloc] init];
-}
-```
-
-Now Weex will use `WXImageView` to render the `image` component.
-
-As an image component, we will need to fetch the remote image and set it to the image view.  This can be done in `viewDidLoad` method when the view is created and loaded. `viewDidLoad` is also the best time to perform additional initialization for your view, such as content mode changing.
-
-
-```objective-c
-- (void)viewDidLoad
-{
-    UIImageView *imageView = (UIImageView *)self.view;
-    imageView.contentMode = _resizeMode;
-    imageView.userInteractionEnabled = YES;
-    imageView.clipsToBounds = YES;
-    imageView.exclusiveTouch = YES;
-    
-    // Do your image fetching and updating logic
-}
-```
-
-If image's remote source can be changed, you can also hook the `updateAttributes:` method to perform your attributes changing logic. Component's view always has been loaded while `updateAttributes:` or `updateStyles:` is called.
-
-
-```objective-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
-    if (attributes[@"src"]) {
-        _imageSrc = [WXConvert NSString:attributes[@"src"]];
-        // Do your image updating logic
-    }
-    
-    if (attributes[@"resize"]) {
-        _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-        self.view.contentMode = _resizeMode;
-    }
-}
-```
-
-Maybe there is even more life cycle hooks you might need to consider, such as `layoutDidFinish` while layout computing is finished.  If you want to go deeper, check out the `WXComponent.h` file in the source code.
-
-Now you can use `<image>` and its attributes wherever you want in the template.
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
-#### Component Method
-from WeexSDK `0.9.5`, you can define your component method by macro `WX_EXPORT_METHOD`
-for example:
-
-```
-@implementation WXMyComponent
- +WX_EXPORT_METHOD(@selector(focus))
- +- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
- {
-     if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
-         // handle your attributes
-         // handle your styles
-     }
-     
-     return self;
- }
-
- 
- - (void)focus
-   {
-      NSLog(@"you got it");
-   }
-@end
-```
-   
-after your registration for your own custom component, now you can call it in your js file.
- 
-```html
-<template>
-  <mycomponent id='mycomponent'></mycomponent>
-</template>
-<script>
-  module.exports = {
-    created: function() {
-      this.$el('mycomponent').focus();
-    }
-  }
-</script>
-``` 
-
-
-
-
-
-
-
-
-
diff --git a/_drafts/v-0.10/advanced/how-data-binding-works.md b/_drafts/v-0.10/advanced/how-data-binding-works.md
deleted file mode 100644
index a207997..0000000
--- a/_drafts/v-0.10/advanced/how-data-binding-works.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: How data-binding works
-type: advanced
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# How data-binding works
-
-Weex JS Framework is a MVVM framework. It observe data and use `{% raw %}{{bindedKey}}{% endraw %}` syntax to bind in views. When data is changed in anyway, the view will automatically be updated due to data-binding.
-
-For example, The content of a `<text>` component is bound with the key `notes` in data:
-
-```html
-<template>
-  <div>
-    <text>{{notes}}</text>
-  </div>
-<template>
-
-<script>
-  module.exports = {
-    data: {
-        notes: 'Hello'
-    }
-  }
-</script>
-```
-
-Weex JS Framework first observe the data object to make sure each data change in the future will be observed. And then it will compile the whole `<template>`. When it finds that the content of the `<text>` is bound with `notes`, JS Framework will watch the `data.notes` changes and set a handler which will update the `<text>` content with new `data.notes`. So developer only need to manage the data, the view display could automatically do corresponding changes.
-
-Some special data-binding syntax here:
-
-* `{% raw %}<foo if="{{condition}}">{% endraw %}` will watch the condition value changes. When it changes to `true`, the `<foo>` element will be created and attached, otherwise it will be not created or removed.
-* `{% raw %}<foo repeat="{{list}}">{% endraw %}` will watch the mutations of a list. At the beginning the `<foo>` element will be cloned and attached with each item in list. When some items are added, removed or moved, the `<foo>` element list will be re-generated new content in the right order with minimum alterations.
-* `{% raw %}<foo if="{{condition}}" repeat="{{list}}">{% endraw %}` will process `repeat` first and `if` the second. In another way, it will walk through each item in list, if the item's condition value is true, a `<foo>` element will be cloned and attached with this certain item value.
-
-Compared with virtual DOM diff algorithm, we just "diff" the data and only calculate/update the virtual DOM with minimum alterations for each user interaction or data-change operation. So it's more lightweight and fast especially for small views in mobile devices.
diff --git a/_drafts/v-0.10/advanced/images/how-arch.png b/_drafts/v-0.10/advanced/images/how-arch.png
deleted file mode 100644
index a13df7a..0000000
--- a/_drafts/v-0.10/advanced/images/how-arch.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/advanced/images/how-render.png b/_drafts/v-0.10/advanced/images/how-render.png
deleted file mode 100644
index db9b0f4..0000000
--- a/_drafts/v-0.10/advanced/images/how-render.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/advanced/index.md b/_drafts/v-0.10/advanced/index.md
deleted file mode 100644
index dca072d..0000000
--- a/_drafts/v-0.10/advanced/index.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: How it works
-type: advanced
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# How it works
-<span class="weex-version">0.4</span>
-
-## Overview
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects. In the source code you can write pages or components with `<template>`, `<style>` and `<script>` tags, and then transform them into bundles for deploying. In server-side we can use these JS bundles for client request. When client get a bundle from server, it will be processed by client-side JavaScript engine and manages the native view rendering, the native API invoking and user interactions.
-
-### Whole Workflow
-
-```
-Weex file --------------frontend(source code)
-↓ (transform) --------- frontend(build tool)
-JS bundle ------------- frontend(bundle code)
-↓ (deploy) ------------ server
-JS bundle in server --- server
-↓ (compile) ----------- client(js-engine)
-Virtual DOM tree ------ client(weex-jsframework)
-↓ (render) ------------ client(render-engine)
-Native view ----------- client(render-engine)
-```
-
-According to the workflow above, you need:
-
-* Transformer: A nodejs tool to transform the source code into the bundle code.
-* JS Framework: A JavaScript framework runing in the client which manage Weex instance. The instance which created from a JS bundle builds virtual DOM tree. Also it sends/receives native calls for native view rendering, native APIs and user interactions.
-* Native Engine: There are many different ports for different platforms: iOS/Android/HTML5. They have the same components design, module APIs design and rendering effect. So they can work with the one and the same JS Framework and JS bundles.
-
-## Transformer
-
-The transformer transforms a source code into a bundle code. The whole work could be divided into three parts:
-
-* Transform `<template>` into a JSON-like tree and transform data-binding attribute into a function prop which return the correct data value. For example: `{% raw %}<foo a="{{x}}" b="1" />{% endraw %}` will be transformed into `{type: "foo", attr: {a: function () {return this.x}, b: 1}}`.
-* Transform `<style>` into a JSON tree. For example: `.classname {name: value;}` will be transformed into `{classname: {name: value}}`.
-* Join the two above with `<script>` content. The three parts will be joined together and wrapped into a JavaScript AMD module.
-
-A whole example (`main.we`):
-
-```html
-<template>
-  <foo a="{{x}}" b="1" class="bar"></foo>
-</template>
-<style>
-  .bar {width: 200; height: 200}
-</style>
-<script>
-  module.exports = {
-    data: function () {
-      return {x: 100}
-    }
-  }
-</script>
-```
-
-will transformed into:
-
-```
-define('@weex-component/main', function () {
-  module.exports = {
-    data: function () {
-      return {x: 100}
-    }
-  }
-  module.template = {
-    type: "foo",
-    attr: {
-      a: function () {return this.x},
-      b: 1,
-      classname: ['bar']
-    }
-  }
-  module.style = {
-    bar: {width: 200, height: 200}
-  }
-}
-bootstrap('@weex-component/main')
-```
-
-Additionally, the transformer could also do more things: combo the bundles, bootstrap with config and external data. For more information, please see the syntax specs.
-
-## NOTICE
-Most of Weex utility output JS Bundle after  [Webpack](https://webpack.github.io/) re-bundle. So the eventual format of Weex JSBundle is webpack packed .
-
-## JS Framework
-
-JS Framework will run in native JavaScript engine at the beginning preparation phase. It has `define()` and `bootstrap()` functions for each the bunlde code. Once a JS bundle requested from server, the code will be executed. `define()` will register all modules first, then `bootstrap()` will start compiling main component into virtual DOM and send rendering calls to native.
-
-There are two key methods for the bridge between JS and native:
-
-* `callNative` sends commands from JavaScript to native. So it's called from JavaScript and implemented with native code. All commands are native APIs organized by modules, for example `rendering`, `networking`, `authorizing`, and other client-side features like `toast` etc.
-* `callJS` sends commands from native to JavaScript. So it's called from native and implemented by JS Framework. All commands are user interactions or native callbacks.
-
-## Native RenderEngine
-
-Native RenderEngine will supplies many native components and modules for call.
-
-**Component** is an element in the screen which have a certain view and behavior. It could be configured with some attributes and style properties, and could response user interactions. There are some common components like `<div>`, `<text>`, `<image>` etc.
-
-**Module** is a set of APIs which could be called from JS Framework. Some of them also have to make async callbacks to JS Framework, for example: send HTTP request.
-
-During a Weex instance works, Native RenderEngine receives all kinds of module API calls from JS Framework. These calls will create or update components for view and use client-side features like `toast`. When a user interaction or module API callback happens, It will call `callJS()` from JS Framework. These jobs could walk through the Weex instance lifecycle till the instance is destroyed. As is shown in the architecture figure, H5 RenderEngine is a special RenderEngine with almost the same functions as native RenderEngines. 
-
-![arch](https://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png)  
-Weex Architecture 
-
-### call native from javascript
-
-```
-[JS Framework]
-↓ callNative
-module APIs
-  rendering -> components display
-  other features
-[Native RenderEngine]
-```
-
-### call javascript from native
-
-```
-[Native RenderEngine]
-module APIs callbacks
-user interactions
-↓ callJS
-[JS Framework]
-```
-
-### Render Flow
-
-![render flow](https://gtms03.alicdn.com/tps/i3/TB1_SA4MXXXXXXGaXXXpZ8UVXXX-519-337.png)  
-Weex Render Flow 
-
-0. Input is virtual dom.
-0. **Build Tree**. Parse JSON data (virtual dom) to a Render Tree (RT).
-0. **Apply Style**. Attach css style to RT nodes.
-0. **Create View**. Create native views for each RT node.
-0. **Attach Event**. Attach events for each view.
-0. **CSS Layout**. Use [css-layout](https://github.com/facebook/css-layout) to calculate the layout of each view.
-0. **Update Frame**. Update layout parameters of each view.
-0. Output is Native or H5 Views.
-
-In H5 Render Flow, `CSS Layout` and `Update Frame` are implemented by browser engine like webkit.
diff --git a/_drafts/v-0.10/advanced/integrate-to-android.md b/_drafts/v-0.10/advanced/integrate-to-android.md
deleted file mode 100644
index e2b2569..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-android.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Integrate to Android
-type: advanced
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# Integrate to Android
-
-When you need to use the new features or to customize specific features, you can rely on the Source SDK for development。
-
-## Prerequisites
-
-Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager.
-
-Make sure you have the following installed:
-
-1. Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-2. SDK build tools version 23.0.2 (buildToolsVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-3. Android Support Repository >= 17 (for Android Support Library)
-4. Android NDK (download & extraction instructions [here](http://developer.android.com/ndk/downloads/index.html))
-
-Point Gradle to your Android SDK: either have `$ANDROID_SDK` and `$ANDROID_NDK ` defined, or create a local.properties file in the root of your weex checkout with the following contents:
-
-```
-sdk.dir=absolute_path_to_android_sdk
-ndk.dir=absolute_path_to_android_ndk
-```
-
-Example:
-
-```
-sdk.dir=/Users/your_name/android-sdk-macosx
-ndk.dir=/Users/your_name/android-ndk-r10e
-```
-
-
-## Building the source
-
-#### 1. Clone source from github
-
-First, you need to git clone `weex` from github:
-
-```shell
-git clone https://github.com/alibaba/weex.git
-```
-##### 2. Build APK
-  ***   1) Android studio build APK ***
- 
- ```
-     Step 1: run android studio 
-     Step 2: open the file of ~/weex/android/playground/build.gradle 
-     Step 3: Run the Project and the Apk will auto install in your android device
- ```
- ***   2) Gradle build APK ***
- 
- ```
-     Step 1: enter the direction of "/weex/android/playground"
-     Step 2: run the build command: ./gradlew clean assemble
-     Step 3: obtain the payground APK from the direction of weex/android/playground/app/build/outputs/apk/
-     Step 3: then adb install -r weex/android/playground/app/build/outputs/apk/playgroud.apk
- ```
-#### 3. Adding the `:weex_sdk_android` project
-  
-
-Add the `:weex_sdk_android` project in `android/settings.gradle`:
-
-```gradle
-include ':weex_sdk_android'
-
-project(':weex_sdk_android').projectDir = new File(
-    rootProject.projectDir, '../weex_sdk_android')
-```
-
-Modify your `android/app/build.gradle` to use the `:weex_sdk_android` project instead of the pre-compiled library, e.g. - replace `compile 'com.taobao.android:weex_sdk:0.4.1` with `compile project(':weex_sdk_android')`:
-
-```gradle
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:23.0.1'
-
-    compile project(':weex_sdk_android')
-
-    ...
-}
-```
-
-#### 3. Making 3rd-party modules use your project
-
-If you use 3rd-party weex modules, you need to override their dependencies so that they don't build the pre-compiled library. Otherwise you'll get an error while compiling - `Error: more than one library with package name 'com.taobao.weex'`.
-
-Modify your `android/app/build.gradle` and replace `compile project(':weex-custom-module')` with:
-
-```gradle
-compile(project(':weex-custom-module')) {
-    exclude group: 'com.taobao.weex', module: 'weex_sdk_android'
-}
-```
-
-#### 4、How to load local Your Js bundle in the directory of Android assets
-Besides load a Js Bundle online, you also can load the js bundle from the directory of Android assets.
-
-For Example:
-  
-   ```   
-   String yourbundleStr =  WXFileUtils.loadFileContent("yourBundle.js", context);
-   WXSDKInstance.render(TAG, yourbundleStr, options, null, width, Height, WXRenderStrategy.APPEND_ASYNC);
-  ```
-
-
-## Building from Android Studio
-
-From the Welcome screen of Android Studio choose "Import project" and select the `playground` folder of your app.
-
-You should be able to use the _Run_ button to run your app on a device. 
-
-## Tip
-1. Since the packet size limit is currently only compiled arm , X86 does not support.
-
-2. Gradle build fails in `ndk-build`. See the section about `local.properties` file above.
-
-#Quick access
- 
-## Requirements
-
-* an existing, gradle-based Android app
-
-## Prepare your app
-
-In your app's `build.gradle` file add the WEEX dependency:
-
-    compile 'com.taobao.android:weex_sdk:0.4.1'
-
-You can find the latest version of the WEEX library on [jcenter](https://bintray.com/search?query=weex_sdk&forceAgnostic=true). Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-
-## Add native code
-
-You need to add some native code in order to start the Weex runtime and get it to render something. To do this, we're going to create an `Application` to init weex, then we we're going to create an `Activity` that creates a WeexContainerView, starts a Weex application inside it and sets it as the main content view.
-
-
-```java
-public class WXApplication extends Application {
-    @Override
-    public void onCreate() {
-        super.onCreate();
-
-        WXEnvironment.addCustomOptions("appName","TBSample");
-        WXSDKEngine.init(this);
-        try {
-
-            WXSDKEngine.registerComponent("wtRichText", WTRichText.class);
-            ......
-            
-            WXSDKEngine.registerModule("event", WXEventModule.class);
-        } catch (WXException e) {
-            e.printStackTrace();
-        }
-    }
-}
-```
-
-Next, 
-
-```java
-// Create or find RenderContainer view. 
-// Notice: If you create RenderContainer manually, don't forget add it to view tree.
-RenderContainer renderContainer = (RenderContainer)findViewById(R.id.container);
-
-//crate Weex instance
-WXSDKInstance mInstance = new WXSDKInstance(this);
-//set render container
-mInstance.setRenderContainer(renderContainer);
-//set image Adapter
-mInstance.setImgLoaderAdapter(new ImageAdapter(this));
-//register render listener
-mInstance.registerRenderListener(new IWXRenderListener() {
-   @Override
-   public void onViewCreated(WXSDKInstance instance, View resultView) {
-       // Notice: If you don't setRenderContainer before render, you need add the resultView to view tree here.
-
-   } 
-   @Override
-   public void onRenderSuccess(WXSDKInstance instance) {
-   }
-   @Override
-   public void onRefreshSuccess(WXSDKInstance instance) {
-   }
-   @Override
-   public void onException(WXSDKInstance instance, String errCode,String msg) {
-   }
-}); 
-//start render weex view   
-mInstance.render(pageName,template, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
-```
-
-That's it, your activity is ready to run some JavaScript code.
-
-## Reference Example   
-
-[`Weex Examples`](https://github.com/apache/incubator-weex/tree/master/examples)
diff --git a/_drafts/v-0.10/advanced/integrate-to-html5.md b/_drafts/v-0.10/advanced/integrate-to-html5.md
deleted file mode 100644
index b71bcd7..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-html5.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Integrate to web
-type: advanced
-order: 5
-has_chapter_content: true
-version: 0.10
----
-
-# Integrate Weex HTML5 to your project
-
-### Intro
-
-Weex is a extendable cross-platform solution for dynamic programming and publishing projects, which is for developers to write code once and run the code everywhere.
-
-The bundle transformed from the source can currently run on android, ios and web platform. Weex HTML5 is a renderer for weex bundle to run on a webview or a modern browser etc.
-
-### Get Weex HTML5
-
-Use npm to install the latest version of Weex HTML5, require it in your code by CommonJS and use it as a npm package.
-
-#### Install from npm
-
-Make sure you get the latest version by `npm install` or `npm update`. For more information of npm, please visit the [npm official site](https://docs.npmjs.com/).
-
-```
-npm install weex-html5
-```
-
-require weex-html5:
-
-```
-const weex = require('weex-html5')
-```
-
-### Initialize and run
-
-You can initialize weex through the API `init`. This method takes a config object as the first argument to confirm the runtime infomation and environment. Following parameters can be set by this config object:
-
-* `appId`: app instance id, can be either a string or a number
-* `source`: the requested url of weex bundle, or the transformed code it self.
-* `loader`: the loader type to load the weex bundle, which value is 'xhr' or 'jsonp' or 'source'.
-  * `xhr`: load the source (weex bundle url) by XHR
-  * `jsonp`: load the source bundle by JSONP
-  * `source`: the source parameter above should be a weex bundle content (transformed bundle).
-* `rootId`: the id of the root element. Default value is 'weex'.
-
-Here is a example to do the initialzation:
-
-```
-function weexInit() {
-  function getUrlParam (key) {
-    var reg = new RegExp('[?|&]' + key + '=([^&]+)')
-    var match = location.search.match(reg)
-    return match && match[1]
-  }
-
-  var loader = getUrlParam('loader') || 'xhr'
-  var page = getUrlParam('page')
-
-  // jsonp callback name should be specified or be the default
-  // value 'weexJsonpCallback' if the 'jsonp' loader is used.
-  var JSONP_CALLBACK_NAME = 'weexJsonpCallback'
-
-  window.weex.init({
-    jsonpCallback: JSONP_CALLBACK_NAME,
-    appId: location.href,
-    source: page,
-    loader: loader,
-    rootId: 'weex'
-  })
-}
-
-weexInit()
-```
-
-
-
diff --git a/_drafts/v-0.10/advanced/integrate-to-ios.md b/_drafts/v-0.10/advanced/integrate-to-ios.md
deleted file mode 100644
index 69dea6d..0000000
--- a/_drafts/v-0.10/advanced/integrate-to-ios.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Integrate to iOS
-type: advanced
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# import Weex iOS to your project
-
-You will need to build Weex from source if you want to work on a new feature/bug fix, try out the latest features not released yet, or maintain your own fork with patches that cannot be merged to the core.
-
-Assuming you have installed [iOS Develop Environment](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) and [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 
-
-#### 1. Clone source from github
-
-First, you need to git clone `weex` from github:
-
-```
-git clone https://github.com/alibaba/weex.git
-```
-#### 2. Import WeexSDK to project
-
-Copy the whole folder `/ios/sdk` to your project directory.
-
-Before adding the dependencies, please confirm that the project directory already exists the Podfile. If not, create a new one. Then, edit this file, adding some necessary dependecis for the target.
-
-``` 
-target 'YourTarget' do
-	platform :ios, '7.0'
-	pod 'WeexSDK', :path=>'./sdk/'
-end
-```
-You can get your `YourTarget` below
-
-![img](//img4.tbcdn.cn/L1/461/1/4d9f4d6a8441b44e4816c7778627824fb72c58de)
-
-Run pod install in current directory, for a while, .xcworkspace will be created.  At this point, the dependencies have been established.
-
-#### 3. Init Weex Environment
-We are used to doing some initial tasks in appDelegate. Of course, there is no exception. You can do this in `didFinishLaunchingWithOptions` as follows.
-
-```
-//business configuration
-[WXAppConfiguration setAppGroup:@"AliApp"];
-[WXAppConfiguration setAppName:@"WeexDemo"];
-[WXAppConfiguration setAppVersion:@"1.0.0"];
-
-//init sdk enviroment   
-[WXSDKEngine initSDKEnviroment];
- 
-//register custom module and component,optional
-[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-
-//register the implementation of protocol, optional
-[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-
-//set the log level    
-[WXLog setLogLevel:WXLogLevelVerbose];
-
-```
-
-#### 4. Render Weex Instance
-Weex supports two different modes, the full page rendering and part of page rendering. 
-Something you have to do is to render weex view with specific URL, then add it to the parent container, which may be the viewController.
-
-```
-#import <WeexSDK/WXSDKInstance.h>
-
-- (void)viewDidLoad 
-{
-	[super viewDidLoad];
-	
-	_instance = [[WXSDKInstance alloc] init];
-	_instance.viewController = self;
-    _instance.frame = self.view.frame; 
-    
-    __weak typeof(self) weakSelf = self;
-    _instance.onCreate = ^(UIView *view) {
-        [weakSelf.weexView removeFromSuperview];
-        weakSelf.weexView = view;
-        [weakSelf.view addSubview:weakSelf.weexView];
-    };
-    
-    _instance.onFailed = ^(NSError *error) {
-    	//process failure
-    };
-    
-    _instance.renderFinish = ^ (UIView *view) {
-    	//process renderFinish
-    };
-    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
-}
-```
-WXSDKInstance is a very imporent class, which provides you with some basic methods and callbacks, such as renderWithURL、onCreate、onFailed and etc. You can understand their usage by reading WXSDKInstance.h.
-
-
-#### 5. Destroy Weex Instance
-
-Please release weex instance in dealloc stage of viewContoller, or it will lead to memory leak.
-
-```
-- (void)dealloc
-{
-    [_instance destroyInstance];
-}
-```
-
-#### 6. Build .IPA for Weex
-
-We can also pack all the JS files into the app's resources. This way you can run your app without development server and submit it to the AppStore.
-
-* [Install weex-toolkit](https://github.com/alibaba/weex_toolchain/tree/master/toolkit) and transform your `.we` file to JS by running `weex index.we -o index.js`, `index.we` is the entry file of your app.
-* Move `index.js` to your app's Xcode project and add the file to your target.
-* Replace `[_instance renderWithURL:'httpURL']` with: `[_instance renderWithURL: [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"js"]]`
-
-* Go to Product -> Archive in Xcode and follow the steps to build your .IPA file and submit it to the AppStore.
diff --git a/_drafts/v-0.10/guide/.gitkeep b/_drafts/v-0.10/guide/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/_drafts/v-0.10/guide/.gitkeep
+++ /dev/null
diff --git a/_drafts/v-0.10/guide/how-to/customize-a-native-component.md b/_drafts/v-0.10/guide/how-to/customize-a-native-component.md
deleted file mode 100644
index 62c0cf0..0000000
--- a/_drafts/v-0.10/guide/how-to/customize-a-native-component.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Customize a native Component
-type: guide
-order: 3.3
-version: 0.10
----
-
-# How to customize a native Component ?
-
-Weex has wrapped up the most critical platform components, such as `ScrollView`, `ListView`, `Text`, `Imageview` and so on. Certainly these components can not completely meet your need. And  thousands of native UI components that always be using in our project may be required to integrate into Weex easily. Fortunately, it's quite convenient to wrap up your own components that should be from any existing components.
-
-##### Step By Step
- 
-1. Customized components must inherit from `WXComponent` or `WXContainer`;
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK;
-3. The access levels of method must be **public**;
-4. The component class can not be an inner class;
-5. Customized components should not be obfuscated by tools like ProGuard;
-6. Component methods will be invoked on the UI thread, so do not contain time-consuming operations here;  
-7. Weex parameter's type can be int, double, float, String, Map, List, self-defined class that implements WXObject interface;
-
-
-#### Refer to the following example: 
-
-```java
-package com.taobao.weex.ui.component;
-……
-
-public class  MyViewComponent extends WXComponent{
-
-        public MyViewComponent(WXSDKInstance instance, WXDomObject node, 
-                    WXVContainer parent,  String instanceId, boolean lazy) {                
-            super(instance, node, parent, instanceId, lazy);
-        }
-
-        @Override
-        protected void initView() {
-            //TODO:your own code ……
-        }
-
-        @Override
-        public WXFrameLayout getView() {
-            //TODO:your own code ………        
-        }
-        @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
-        public void setMyViewValue(String value) {
-            ((TextView)mHost).setText(value);
-        }
-
-}
-```
-#### Component should be registered 
-
-```java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```  	
-	  	
-
diff --git a/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md b/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md
deleted file mode 100644
index 9594ff0..0000000
--- a/_drafts/v-0.10/guide/how-to/cuszomize-native-apis.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Customize native APIs
-type: guide
-order: 3.4
-version: 0.10
----
-
-# How to customize native APIs ?
-
-Weex SDK provides only rendering capability, rather than having other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement them yourselves.   
-The example below will describe how to extend weex with native logic or 'bridge' your existed native code.
-
-## A URLHelper Example
-### Create your own `WXModule` in native:   
-
-```java
-public class URLHelperModule extends WXModule{
-	private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-	@WXModuleAnno
-	public void openURL(String url){
-		if (TextUtils.isEmpty(url)) {
-			return;
-		}
-		StringBuilder builder=new StringBuilder("http:");
-		builder.append(url);
-		Uri uri = Uri.parse(builder.toString());
-        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
-		intent.addCategory(WEEX_CATEGORY);
-        mWXSDKInstance.getContext().startActivity(intent);
-	}
-}
-
-```
-
-Notice the `@WXModuleAnno`, use this annotation to mark the methods you wanna expose to javascript.
-If your also want to callback to javascript, you should define a `callbackId` parameter to received 'JS callback function id':
-
-```java
-public class URLHelperModule extends WXModule{
-	
-	@WXModuleAnno
-	public void openURL(String url,String callbackId){
-		//...
-		//callback to javascript 
-		Map<String, Object> result = new HashMap<String, Object>();
-		result.put("ts", System.currentTimeMillis());
-		WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), callbackId, result);
-	}
-}
-```
-
-
-### Register your module to engine:   
-
-```
-try {
-	 WXSDKEngine.registerModule("myURL", URLHelperModule.class);//'myURL' is the name you'll use in javascript
-	} catch (WXException e) {
-	   WXLogUtils.e(e.getMessage());
-	}
-```
-### Now, you can use eventModule in javascript like this:   
-
-```javascript
-let URLHelper = require('@weex-module/myURL');//same as you registered
-URLHelper.openURL("http://www.taobao.com",function(ts){
-	console.log("url is open at "+ts);
-});
-
-```
-
-
-## Things you need to note:
-1. Customized components must inherit from `WXModule`;
-2. @WXModuleAnno annotation must be added, as it is the only way to be recognized by Weex;
-3. The access levels of method must be **public**;
-4. The module class also can not be an inner class;
-5. Customized components should not be obfuscated by tools like ProGuard;
-6. Module methods will be invoked on the UI thread, so do not put time-consuming operations there;
-7. Weex parameter's type can be int, double, float, String, Map, List, self-defined class that implements WXObject interface;
diff --git a/_drafts/v-0.10/guide/how-to/debug-with-html5.md b/_drafts/v-0.10/guide/how-to/debug-with-html5.md
deleted file mode 100644
index c80fb69..0000000
--- a/_drafts/v-0.10/guide/how-to/debug-with-html5.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Debug in html5 renderer
-type: guide
-order: 3.5
-version: 0.10
----
-
-# How to debug in html5 renderer ?
-
-Since weex-html5 can run on a modern mobile browser, it's naturally supported to debug weex-html5 code in browsers' dev tools. Use browser's devTools to iterate, debug and profile your weex-html5 app. Take chrome's debug tool as a example:
-
-![chrome's debug tool](https://gw.alicdn.com/mt/TB1V1hIMpXXXXaHXVXXXXXXXXXX-983-730.png)
-
-## Elements
-
-Use elements' panel to inspect the layout and design of the weex-html5 page, and manipulate the DOM and CSS to do some experiment freely.
-
-## Console
-
-You can use `console.log` to log information on console, but it's highly recommended to use `nativeLog` instead, since nativeLog can run on a native platform based on a browser. The defect of `nativeLog` is that it's not supported to trace it from the console to the source file which the `nativeLog` is called in, therefore in this situation you'd better use `console.log`, and you should make sure this code will not run on native platform (otherwise a exception or a crash will be caused).
-
-## Breakpoints
-
-You can set breakpoints to debug code. Breakpoints are one of the most effective way to debug code. Breakpoints enable you to pause script execution and then investigate the call stack variable values at that particular moment in time.
-
-Manual breakpoints are individual breakpoints that you set on a specific line of code. You can set these via Chrome DevTools GUI, or by inserting the `debugger` keyword in your code.
-
-## Locate your bug
-
-Generally speaking, there are three possible layer the bug could happen on: the renderer (weex-html5), the js-framework (weex-js-framework) and the transformer (gulp-weex).
-
-Here are some suggestions to locate your bug so that you can recognize which layer the bug is on:
-
-* check the console for errors. In debug mode if there is a error happend there will be info about it on the console.
-* in bridge/receiver.js, whether the `callNative` function is called.
-* whether the supposed to be called API method is actually called and executed.
-* whether the `callJS` method for event firing or callback executing is called.
-
-## other
-
-More info about how to debug h5 pages on chrome devTools: [chrome's devTools docs](https://developers.google.com/web/tools/chrome-devtools/?hl=en)
-
-
-
-
-
-
diff --git a/_drafts/v-0.10/guide/how-to/index.md b/_drafts/v-0.10/guide/how-to/index.md
deleted file mode 100644
index 9f9435a..0000000
--- a/_drafts/v-0.10/guide/how-to/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Preview in browser 
-type: guide
-order: 3
-has_chapter_content: false
-chapter_title: How-tos
-version: 0.10
----
-
-# How to preview weex code in browser ?
-
-## weex-toolkit
-
-We strongly suggest you use weex-toolkit to preview weex code in your browser. This tool is Node.JS based, so you need to install Node at first. Please download and install latest stable version of Node from [https://nodejs.org/en/download/stable/](https://nodejs.org/en/download/stable/). Then you can install weex-toolkit using npm install:
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-Check that the toolkit does work by typing `weex` in the command line. Normally you should see the following help text:
-
-```
-Options:
-  --qr     display QR code for native runtime, 
-  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
-  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
-  ......
-  --help  Show help                    
-```
-
-If all work well, navigate to the path the xxx.we file you want to preview in, and type the command:
-
-```bash
-weex xxx.we
-```
-
-A browser window will be opened automatically to display the page you want to preview:
-
-![preview page](https://gtms02.alicdn.com/tps/i2/TB1y151LVXXXXXXaXXXoRYgWVXX-495-584.jpg)
-
diff --git a/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md b/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md
deleted file mode 100644
index 5800737..0000000
--- a/_drafts/v-0.10/guide/how-to/preview-in-playground-app.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Preview in native
-type: guide
-order: 3.2
-version: 0.10
----
-
-# How to preview weex code in sample-app ?
-   
-### Weex Sample Step By Step
-1. Clone Weex from github [`https://github.com/apache/incubator-weex/`](https://github.com/apache/incubator-weex/)
-2. Use Android Studio open Android Sample 。
-3. run Sample project.
-4. into Sample homePage,you will see this picture  
-![preview page](https://gtms01.alicdn.com/tps/i1/TB10Ox2MpXXXXXKXpXXA0gJJXXX-720-1280.png)
-5. Click the icon to the top right of the page to enter the two-dimensional code scanning  
-![](https://gtms04.alicdn.com/tps/i4/TB1Ph05MpXXXXcHXXXX2YSA3pXX-540-960.jpg)
-6. use[`Weex-Toolkit`](https://github.com/alibaba/weex_toolchain/tree/master/toolkit/ )make .we to a     QR code 
-7. you will see the page rended by Weex  
-![](https://gtms03.alicdn.com/tps/i3/TB1ehVLMpXXXXa.XVXX2YSA3pXX-540-960.jpg)
diff --git a/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md b/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md
deleted file mode 100644
index 7349520..0000000
--- a/_drafts/v-0.10/guide/how-to/require-3rd-party-libs.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Require 3rd Party Libs
-type: guide
-order: 3.6
-version: 0.10
----
-
-# How to require 3rd Party Libs ?
-
-In the paragraph Maintain Your Component Code, we learn that JavaScript code can be written in `<script>` tag in one component. But there must be some common functions or modules in your project, such as parsing url params, extending properties from some objects to another object and so on. It's a bad practice to copy and paste them in each component, therefore there's a urgent need of `require`. Weex provides CommonJS `require` syntax for developers.
-
-Let take `extend` for example.
-
-## Require Local Js Modules
-
-A basic implementation of `extend` is as follows, and it's placed in directory path `./common/utils.js`.
-
-```javascript
-function extend(dest, src) {
-  for (var key in src) {
-    dest[key] = src[key]
-  }
-}
-exports.extend = extend
-```
-
-In a `.we` file, `extend` can be used with the help of `require`:
-
-```html
-<script>
-  var utils = require('./common/utils')
-  var obj1 = {a: 1}
-  var obj2 = {b: 2}
-  utils.extend(obj1, obj2) // obj1 => {a: 1, b: 2}
-</script>
-```
-
-## Require Installed Node Modules
-
-Besides, [underscore](http://underscorejs.org) is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It implements a more robust version of [extend](http://underscorejs.org/#extend).
-
-We can use underscore's extend instead of the version implemented by ourselves. After installing `underscore` to the `node_modules` directory, we can `require` and use it.
-
-```bash
-$ npm install underscore
-```
-
-```html
-<script>
-  var _ = require('underscore')
-  var obj1 = {a: 1}
-  var obj2 = {b: 2}
-  var obj3 = {c: 3}
-  var ret = _.extend(obj1, obj2, obj3) // ret => {a: 1, b: 2, c: 3}
-</script>
-```
diff --git a/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md b/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md
deleted file mode 100644
index 842ecd6..0000000
--- a/_drafts/v-0.10/guide/how-to/transform-code-into-js-bundle.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Transform Code into Js Bundle
-type: guide
-order: 3.7
-version: 0.10
----
-
-# Transform Code into Js Bundle
-
-Paragraphs Maintain Your Component Code and [Require 3rd Party Libs](./require-3rd-party-libs.html) show us how to write and organize weex code. However, Weex DSL code must be transformed to `js bundle` so that `js framework` can parse and execute it for iOS, Android and HTML5 portal. For more information, please refer to [How It Works
-](../../advanced/how-it-works.html) and [JS Bundle Format](../../references/specs/js-bundle-format.html).
-
-Now come back to the topic `transform code into js bundle`. There are several ways to achieve the goal.
-
-## weex-toolkit
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-### transform a `we file` to JS Bundle
-
-```bash
-$ weex your_best_weex.we  -o .
-```
-
-`your_best_weex.we` will be transform to JS Bundle file `your_best_weex.js` , saved in your current directory
-
-### transform a `we file` to JS Bundle , watch this file ,auto run transformer if change happen.
-
-```bash
-$ weex your_best_weex.we  -o . --watch
-```
-
-### transform every we file in a directory 
-
-```bash
-$ weex we/file/storage/path  -o outputpath
-```
-
-every `we file` in `we/file/storage/path` will be transformed to JS Bundle  , saved in `outputpath` path
-
-please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for more information about weex-toolkit.
-
-## transformer
-
-```bash
-npm install weex-transformer
-```
-
-### CLI Tool
-
-```bash
-  Usage: transformer [options] <file...>
-
-  Options:
-
-    -h, --help               output usage information
-    -V, --version            output the version number
-    -l, --oldFormat [value]  whether to transform to old format (default: false)
-    -e, --isEntry [value]    whether is an entry module which has `bootstrap` (default: true)
-    -o, --output [path]      the output file dirname
-```
-
-### API
-
-** transform(name, code, path, elements, config) **
-
-```javascript
-var transformer = require('weex-transformer')
-var output = transformer.transform('foo', '/* code here */', '.', {})
-```
-
-params:
-
-- `name`: string, current bundle name
-- `code`: string, source code
-- `path`: string *optional*, useful when find custom component in a certain path
-- `elements`: object *optional*, existed custom component map
-- `config`: object *optional*
-    * `oldFormat`: whether to transform to old format (default: false)
-    * `isEntry`: whether is an entry module which has `bootstrap` (default: true)
-
-returns:
-
-- an object with keys
-    * `result`: string, all custom components `define()` and final `bootstrap()`
-    * `logs`: array, corresponding warning & error logs
-
-## gulp weex
-
-```bash
-$ npm install gulp-weex
-```
-
-```javascript
-var gulp = require('gulp')
-var weex = require('gulp-weex')
-
-gulp.task('default', function () {
-  return gulp.src('src/*.html')
-    .pipe(weex({}))
-    .pipe(gulp.dest('./dest'))
-})
-```
-
-Options:
-
-- `oldFormat`: whether to transform to old format (default: false)
-- `isEntry`: whether is an entry module which has `bootstrap` (default: true)
diff --git a/_drafts/v-0.10/guide/images/tut-cli-qrcode.png b/_drafts/v-0.10/guide/images/tut-cli-qrcode.png
deleted file mode 100644
index 9068c14..0000000
--- a/_drafts/v-0.10/guide/images/tut-cli-qrcode.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut-first.png b/_drafts/v-0.10/guide/images/tut-first.png
deleted file mode 100755
index c8505e6..0000000
--- a/_drafts/v-0.10/guide/images/tut-first.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut-second.png b/_drafts/v-0.10/guide/images/tut-second.png
deleted file mode 100755
index 1259abf..0000000
--- a/_drafts/v-0.10/guide/images/tut-second.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut1.jpg b/_drafts/v-0.10/guide/images/tut1.jpg
deleted file mode 100644
index 8af0f3f..0000000
--- a/_drafts/v-0.10/guide/images/tut1.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut2.jpg b/_drafts/v-0.10/guide/images/tut2.jpg
deleted file mode 100644
index c3e8a6e..0000000
--- a/_drafts/v-0.10/guide/images/tut2.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut3.png b/_drafts/v-0.10/guide/images/tut3.png
deleted file mode 100644
index 5473905..0000000
--- a/_drafts/v-0.10/guide/images/tut3.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/images/tut4.gif b/_drafts/v-0.10/guide/images/tut4.gif
deleted file mode 100644
index eed4395..0000000
--- a/_drafts/v-0.10/guide/images/tut4.gif
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/guide/index.md b/_drafts/v-0.10/guide/index.md
deleted file mode 100644
index bb6941c..0000000
--- a/_drafts/v-0.10/guide/index.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Tutorial
-type: guide
-order: 1
-version: 0.10
----
-
-# Tutorial
-
-We will make a simple but realistic list, in which the technologies Weex uses will be shown. This form of list also works for a lot of e-commercial apps and mobile sites.
-
-## Getting Started
-
-Let's get started with the list item, which contains one `image` element and one `text` right behind.
-
-```html
-<template>
-  <div class="container">
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE3AJt"></image>
-      <text class="title">JavaScript</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
-  .thumb { width: 200; height: 200; }
-  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
-</style>
-```
-
-You can directly copy and paste the above code into a Weex file named `tech_list.we` (`.we` is our recommended filename extension).
-
-## Preview
-
-Once created, we want to see the running result of the `.we` file. But before that, we must make sure the dependencies are installed.
-
-We should install [Node](https://nodejs.org/en/download/) first, which our Weex CLI program [Weex Toolkit](https://www.npmjs.com/package/weex-toolkit) depends on. Then install `weex-toolkit` by running the command:
-
-```bash
-$ npm install -g weex-toolkit
-```
-
-When installation completed, you can check if Weex CLI is installed properly by running `weex` command in the command line. The following text is expected:
-
-```
-Usage: weex foo/bar/your_next_best_weex_script_file.we  [options]
-
-Options:
-  --qr     display QR code for native runtime, 
-  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
-  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
-  ......
-  --help  Show help         
-  -h, --host [default: "127.0.0.1"]
-```
-
-If all work well, navigate to the directory where you saved `tech_list.we`, then type:
-
-```bash
-$ weex tech_list.we
-```
-
-A browser window will be opened automatically to display the running result like below     (weex-toolkit version should be greater than 0.1.0, use `weex --version` to check it):
-
-![mobile_preview](https://gtms02.alicdn.com/tps/i2/TB1y151LVXXXXXXaXXXoRYgWVXX-495-584.jpg)
-
-## Introduce to Weex Syntax
-
-So it's time for introducing the syntax. 
-
-Given the content of `tech_list.we`, Weex source code is composed of three parts -- *template*, *style*, and *script*, just like html, css, and javascript for the Web.
-
-Template is the skeleton that gives Weex structure. It is composed of tags which surround content and apply meaning to it. Tags have *attributes*, different attribute means different feature, for example, `class` attribute makes it possible to define the same styles for multiple tags, `onclick` attribute makes the tag respond to click event.
-
-Style describes how Weex tags are to be displayed. We prefer CSS very much. So we try to keep consistent with CSS standard as possible. Weex Style supports a lot of CSS features, like margin, padding, fixed and so on. Better yet, flexbox layout (flex) is well supported in Weex Style.
-
-Script adds *data* & *logic* to Weex tags, helping you easily access local or remote data and update tags. You can also define some methods for your tag to respond to different events. Weex Script organization learns a lot from CommonJS module style.
-
-More information about Weex syntax can be found in our [Syntax chapter](./syntax/index.html).
-
-## Add More Items
-
-We can't call one item a list, so we need to add more items to our tech list. Open `tech_list.we` in your favorite editor and update it's content like below:
-
-```html
-<template>
-  <div class="container">
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE3AJt"></image>
-      <text class="title">JavaScript</text>
-    </div>
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE3uo9"></image>
-      <text class="title">Java</text>
-    </div>
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE31hq"></image>
-      <text class="title">Objective C</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
-  .thumb { width: 200; height: 200; }
-  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
-</style>
-```
-
-Now we will try to  render our  `tech_list.we`  with Weex native renderer.  Open your terminal and  navigate to the directory where you save the `tech_list.we` again, then type:
-
-```bash
-$ weex tech_list.we --qr -h {ip or hostname}
-```
-
-It's ***RECOMMENDED*** to use `-h` option to specify your local ip address or hostname.
-
-A QR code will be displayed in the terminal window like below:
-
-![Weex CLI](images/tut-cli-qrcode.png)
-
-The QR code can work together with [Weex Playground App](http://alibaba.github.io/weex/download.html). Open it and tap the scan icon at the top-right corner, then scan the QR code displayed in your terminal. If all work well, a beautiful list will be displayed in your phone.
-
-![Second Example](images/tut-second.png)
-
-Here, I must stress that the list is rendered by a native view, instead of Webkit, so your app gets faster loading and less memory overhead than common Webview renderer.
-
-Now open `tech_list.we` again and try to change some text, after changes saved the Weex playground App will immediately display these changes. We call that **Hot-Reload**, which is intended to help you use Weex better.
-
-## Add Built-in Components
-
-Instead of writing basic tags by yourself, Weex provides a lot of built-in components. For example, Slider is common to many apps and mobile websites, so Weex includes a built-in Slider so that you can easily use it in your script. Let's open `tech_list.we` and update it's content like below.
-
-```html
-<template>
-  <div style="flex-direction: column;">
-    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
-      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
-      <image class="thumb" src="{{pictureUrl}}"></image>
-      <text class="title">{{title}}</text>
-      </div>
-    </slider>
-
-  <div class="container" onclick="goWeexSite" >
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE3AJt"></image>
-      <text class="title">JavaScript</text>
-    </div>
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE3uo9"></image>
-      <text class="title">Java</text>
-    </div>
-    <div class="cell">
-      <image class="thumb" src="http://t.cn/RGE31hq"></image>
-      <text class="title">Objective C</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
-  .thumb { width: 200; height: 200; }
-  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
-  .slider {
-    margin: 18;
-    width: 714;
-    height: 230;
-  }
-  .slider-pages {
-    flex-direction: row;
-    width: 714;
-    height: 200;
-  }
-</style>
-
-<script>
-module.exports = {
-  data: {
-    intervalValue:"1000",
-    isShowIndicators:"true",
-    isAutoPlay:"true",
-    itemList: [
-      {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},
-      {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},
-      {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}
-    ]
-  },
-  methods: {
-    goWeexSite: function () {
-      this.$openURL('http://alibaba.github.io/weex/')
-    }
-  }
-}
-</script>
-```
-
-Open terminal and run the command again:
-
-```bash
-$ weex tech_list.we
-```
-
-You should see a slider prepend to our list.
-
-![Third Example](images/tut4.gif)
-
-More information about Slider component can be found [here](../references/components/slider.html).
-
-Just as the previous example, the slider can be rendered in native, easily in Weex playground, or in your App. Please refer [the document](./advanced/integrate-to-android.html) for integrating Weex into your App.
diff --git a/_drafts/v-0.10/guide/syntax/comm.md b/_drafts/v-0.10/guide/syntax/comm.md
deleted file mode 100644
index 84e49a1..0000000
--- a/_drafts/v-0.10/guide/syntax/comm.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-title: Communications
-type: guide
-order: 2.8
-version: 0.10
----
-
-# Communicate Between Components
-
-## For Child-Parent Communication
-
-Children component can use `this.$dispatch([String type], [Object detail])` method passing information to parent component. first argument meaning type of message , second argument is the message object. If any parent of the child component register the same type of listener using `$on([String type], [Function callback])` method , the callback will be execute with one argument , the message object will be `detail` property of the the argument.
-
-eg:
-
-```html
-<we-element name="foo">
-  <template>
-    <div>
-      <image src="{{imageUrl}}" onclick="test"></image>
-      <text>{{title}}</text>
-    </div>
-  </template>
-  <script>
-    module.exports = {
-      data: {
-        title: '',
-        imageUrl: ''
-      },
-      methods: {
-        test: function () {
-          this.$dispatch('notify', {a: 1})
-        }
-      }
-    }
-  </script>
-</we-element>
-
-<template>
-  <foo title="..." image-url="..."></foo>
-</template>
-
-<script>
-  module.exports = {
-    created: function () {
-      this.$on('notify', function(e) {
-        //  when <foo> image tag  be clicked ,the function will be executing.
-        // e.detail is  `{a: 1}`
-      })
-    }
-  }
-</script>
-```
-
-## For Parent-Child Communication
-
-Parent component can use `this.$vm([String id])` get vm instance of child component. you can access child component information using the vm instance.
-
-```html
-<we-element name="foo">
-  <template>
-    <div>
-      <image src="{{imageUrl}}"></image>
-      <text>{{title}}</text>
-    </div>
-  </template>
-  <script>
-    module.exports = {
-      data: {
-        title: '',
-        imageUrl: ''
-      },
-      methods: {
-        setTitle: function (t) {
-          this.title = t
-        }
-      }
-    }
-  </script>
-</we-element>
-
-<template>
-  <div>
-    <text onclick="test">click to update foo</text>
-    <foo id="fooEl" title="..." image-url="..."></foo>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      test: function (e) {
-        var foo = this.$vm('fooEl')
-        foo.setTitle('...')
-        foo.imageUrl = '...'
-      }
-    }
-  }
-</script>
-```
-
-## Parent to Children (multi-child) Communication
-
-Parent can using `this.$broadcast([String type], [Object detail])` broadcast message to all of children.
-
-eg:
-
-```html
-<we-element name="bar">
-  <template>
-    <div>
-      <image src="{{imageUrl}}"></image>
-    </div>
-  </template>
-  <script>
-    module.exports = {
-      data: {
-        imageUrl: ''
-      },
-      created: function() {
-        var self = this
-        this.$on('changeImage', function(e) {
-          self.imageUrl = e.detail.imageUrl
-        })
-      }
-    }
-  </script>
-</we-element>
-
-<we-element name="foo">
-  <template>
-    <div>
-      <bar></bar>
-      <text>{{title}}</text>
-    </div>
-  </template>
-  <script>
-    module.exports = {
-      data: {
-        title: ''
-      },
-      created: function() {
-        var self = this
-        this.$on('changeTitle', function(e) {
-          self.title = e.detail.title
-        })
-      }
-    }
-  </script>
-</we-element>
-
-<template>
-  <div>
-    <text onclick="test">click to update foo</text>
-    <foo></foo>
-    <bar></bar>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      test: function (e) {
-        this.$broadcast('changeTitle', {
-          title: '...'
-        })
-        this.$broadcast('changeImage', {
-          imageUrl: '...'
-        })
-      }
-    }
-  }
-</script>
-```
-
-## Siblings Communication
-
-siblings components can using common parent as bridge for passing information
-
-eg:
-
-```html
-<we-element name="foo">
-  <template>...</template>
-  <script>
-    module.exports = {
-      methods: {
-        callbar: function () {
-          this.$dispatch('callbar', {a: 1})
-        }
-      }
-    }
-  </script>
-</we-element>
-
-<we-element name="bar">
-  <template>...</template>
-  <script>
-    module.exports = {
-      created: function() {
-        this.$on('callbar', function(e) {
-          // e.detail.a
-        })
-      }
-    }
-  </script>
-</we-element>
-
-<template>
-  <div>
-    <foo></foo>
-    <bar></bar>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    created: function () {
-      var self = this
-      this.$on('callbar', function(e) {
-        self.$broadcast('callbar', e.detail)
-      })
-    }
-  }
-</script>
-```
-
-At last, you can learn how to write [config & data](./config-n-data.html) for a Weex page.
diff --git a/_drafts/v-0.10/guide/syntax/composed-component.md b/_drafts/v-0.10/guide/syntax/composed-component.md
deleted file mode 100644
index 547096f..0000000
--- a/_drafts/v-0.10/guide/syntax/composed-component.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Composed Component
-type: guide
-order: 2.6
-version: 0.10
----
-
-# Composed Component
-
-If some part of weex file is reused often, you could create a composed component represent these part.
-
-You can create a file named `foo.we` to define a composed component, the component name is just `<foo>`.
-
-```html
-<!-- foo.we -->
-<template>
-  <container style="flex-direction: row;">
-    <image src="{{image}}" style="width:100;height:100;"></image>
-    <text>{{title}}</text>
-  </container>
-</template>
-<script>
-  module.exports = {
-    data: {
-      title: null,
-      image: null
-    }
-  }
-</script>
-```
-
-The content of `foo.we` also consists of `<template>`, `<style>` and `<script>`.
-
-Once composed component been defined, you can use `<foo>` in a file which is in the same folder with `foo.we`.
-
-```html
-<template>
-  <foo title="..." image="..."></foo>
-</template>
-```
-
-## Nesting Components
-
-Composed component supports nesting. For example:
-
-```html
-<!-- somepath/foo.we -->
-<template>
-  <container style="flex-direction: row;">
-    <image src="{{image}}"></image>
-    <text>{{title}}</text>
-  </container>
-</template>
-<script>
-  module.exports = {
-    data: {
-      // The key is required if you want this property observed
-      // and could be updated from changing parent attribute
-      title: null,
-      image: null
-    }
-  }
-</script>
-```
-
-```html
-<!-- somepath/foo-list.we -->
-<template>
-  <container>
-    <text>{{description}}</text>
-    <foo repeat="{{list}}" title="{{text}}" image="{{img}}"></foo>
-  </container>
-</template>
-<script>
-  module.exports = {
-    data: {
-      description: '',
-      // If no keys written here. There will be no data binding effect
-      // from parent attribute "list".
-      list: []
-    }
-  }
-</script>
-```
-
-```html
-<!-- somepath/main.we -->
-<template>
-  <foo-list list="{{list}}"></foo-list>
-</template>
-<script>
-  module.exports = {
-    data: {
-      list: [
-        {text: '...', img: '...'},
-        {text: '...', img: '...'},
-        {text: '...', img: '...'},
-        ...
-      ]
-    }
-  }
-</script>
-```
-
-The `main.we` uses `<foo-list>` from `foo-list.we`. And `<foo-list>` uses `<foo>` from `foo.we`.
-
-## Notes
-
-- Every composed component have an independent `<style>` work scope.
-- If child component have `id` attribute, you can access the context of the child component by `this.$vm(id)` and find an element by `this.$el(id)`. See more about [find an element](./id.html).
-- Please refer to [communicate between components](./comm.html) for more communication issues.
-- The keys must be existed in `data` options **explicitly** if you want to make the data observation work both through inside data changes and outside attribute changes.
-
-Next is how to [find an element](./id.html).
diff --git a/_drafts/v-0.10/guide/syntax/config-n-data.md b/_drafts/v-0.10/guide/syntax/config-n-data.md
deleted file mode 100644
index 37b8e12..0000000
--- a/_drafts/v-0.10/guide/syntax/config-n-data.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Page Config & Data
-type: guide
-order: 2.9
-version: 0.10
----
-
-# Page Config & Data
-
-You can write some instance config and data in some additional `<script>` at the **top-level** Weex component.
-
-* the instance config could declare some meta informations like which sdk/client version it supports or "downgrade" to HTML5 renderer. This part would be extended more in the future.
-* the instance data could set an external data which would be processed instead of the default top-level component data.
-
-They all make Weex files more extendable and configurable and works easy with other tools & services like CMS system.
-
-```html
-<!-- definition of sub components -->
-<element name="sub-component-a">...</element>
-<element name="sub-component-b">...</element>
-<element name="sub-component-c">...</element>
-
-<!-- definition of top-level component -->
-<template>...</template>
-<style></style>
-<script>
-  module.exports = {
-    data: function () {return {x: 1, y: 2}}
-  }
-</script>
-
-<!-- instance config and data -->
-<script type="config">
-  {
-    downgrade: {
-      ios: {
-        os: '9', // all of 9.x.x
-        app: '~5.3.2',
-        framework: '^1.3', // all of 1.3.x
-        deviceModel: ['AAAA', 'BBBB']
-      },
-      android: {
-        os: '*', // all of version
-        app: '^5',
-        framework: '',
-        deviceModel: ''
-      }
-    }
-  }
-</script>
-<script type="data">
-  {y: 200}
-</script>
-```
-
-Notice that these two additional `<script>` are both optinal and have `type="config|data"` attribute and only works when it's the top-level component of a Weex instance.
-
-So that's all about Weex syntax. For more reading, please check out:
-
-* [how-tos](../how-to/index.html) articles and
-* [advanced](../../advanced/index.html) topics.
diff --git a/_drafts/v-0.10/guide/syntax/data-binding.md b/_drafts/v-0.10/guide/syntax/data-binding.md
deleted file mode 100644
index 497735c..0000000
--- a/_drafts/v-0.10/guide/syntax/data-binding.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-title: Data-Binding
-type: guide
-order: 2.1
-version: 0.10
----
-
-# Data-Binding
-
-In Weex, we use the *mustache* syntax `{% raw %}{{...}}{% endraw %}` to bind data in `<template>` which are defined in `<script>`. Once data and template is bound, the data changes will influence the corresponding template content immediately and automatically.
-
-## Binding data path
-
-```html
-<template>
-  <container>
-    <text style="font-size: {{size}}">{{title}}</text>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      size: 48,
-      title: 'Alibaba Weex Team'
-    }
-  }
-</script>
-```
-
-The code above will bind the `title` and `size` data field to `template`.
-
-We can also use `.` syntax to bind cascading data structure. Let's look at the following code snippet:
-
-```html
-<template>
-  <container>
-    <text style="font-size: {{title.size}}">{{title.value}}</text>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      title: {
-        size: 48,
-        value: 'Alibaba Weex Team'
-      }
-    }
-  }
-</script>
-```
-
-## In-template expression
-
-Inside data bindings, Weex supports simply javascript expressions, e.g.
-
-```html
-<template>
-  <container style="flex-direction: row;">
-    <text>{{firstName + ' ' + lastName}}</text>
-  </container>
-</template>
-  
-<script>
-  module.exports = {
-    data: {
-      firstName: 'John',
-      lastName: 'Smith'
-    }
-  }
-</script>
-```
-
-The expression will be evaluated in the data scope of current context.
-
-**NOTE: EACH BINDING CAN ONLY CONTAIN ONE SINGLE EXPRESSION**
-
-## Computed Properties 
-<span class="weex-version">0.5</span>
-
-According to simple operations, in-template expressions are very convenient. But if you want to put more logic into the template, you should use a computed property.
-
-e.g.
-
-```html
-<template>
-  <container style="flex-direction: row;">
-    <text>{{fullName}}</text>
-    <text onclick="changeName" style="margin-left:10px;">CHANGE NAME</text>
-  </container>
-</template>
-  
-<script>
-  module.exports = {
-    data: {
-      firstName: 'John',
-      lastName: 'Smith'
-    },
-    computed: {
-      fullName: {
-        get: function() {
-          return this.firstName + ' ' + this.lastName
-        },
-
-        set: function(v) {
-          var s = v.split(' ')
-          this.firstName = s[0]
-          this.lastName = s[1]
-        }
-      }
-    },
-    methods: {
-      changeName: function() {
-        this.fullName = 'Terry King'
-      }
-    }
-  }
-</script>
-```
-
-Here we have declared a computed property fullName. The function we provided will be used as the getter function for concating firstName and lastName.
-
-Otherwise when you call `changeName` after click, the setter will be invoked and this.firstName and this.lastName will be updated accordingly.
-
-**NOTE: `data` and `methods` can't have duplicated fields. 'Cause in the execution context -- `this`, we can access both of them.**
-
-## Usage of some special attributes in Data-Binding
-
-### Styles: `style` or `class`
-
-the style of a component can be bind using the `style` attribute:
-
-```html
-<template>
-  <text style="font-size: {{size}}; color: {{color}}; ...">...</text>
-</template>
-```
-
-while style can also get bound with `class` attribute, multiple classnames can be split by spaces:
-
-```html
-<template>
-  <container>
-    <text class="{{size}}"></text>
-    <text class="title {{status}}"></text>
-  </container>
-</template>
-```
-
-here if `{{size}}` and `{{status}}` have empty value, then only `class="title"` will be rendered.
-
-* [See more about style and class](./style-n-class.html)
-
-### Event Handler: `on...`
-
-The event handler is an attribute which name has a prefix `on...`. The other part of attribute name is event type and the value is event handler name. We don't need to add mustache around the method name or add parentheses to call it.
-
-```html
-<template>
-  <text onclick="toggle">Toggle</text>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      toggle: function () {
-        // todo
-      }
-    }
-  }
-</script>
-```
-
-### `if` & `repeat`
-
-`if` attribute can control the display of a component by a truthy/falsy value.
-
-```html
-<template>
-  <container style="flex-direction: column;">
-    <text onclick="toggle">Toggle</text>
-    <image src="..." if="{{shown}}"></image>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      shown: true
-    },
-    methods: {
-      toggle: function () {
-        this.shown = !this.shown
-      }
-    }
-  }
-</script>
-```
-
-We can also use `repeat` attribute to generate a list.
-
-**NOTE: When you want to mutate an array in `data`. Something limitations existing below:**
-
-When you directly set an item with the index (`vm.items[0] = {};`), it won't trigger view update. So we have a prototype methods: `$set(index, item)`.
-
-```javascript
-// same as `example1.items[0] = ...` but triggers view update
-example1.items.$set(0, { childMsg: 'Changed!'})
-```
-
-When you modify the length of the Array (`vm.items.length = 0`), it won't trigger view update too. We recommend you just replace `items` with an empty array instead.
-
-```javascript
-// same as `example2.items.length = 0` but triggers view update
-example2.items = []
-```
-
-* [See more about display logic control](./display-logic.html)
-
-### `static`
-
-`static` attribute can cancel the data binding, and the data changes will not be synchronized to UI.
-
-```html
-<template>
-  <div static>
-    <text>{{ word }}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    ready: function() {
-      this.word = 'Data changes'
-    },
-    data: {
-      word: 'Hello, static'
-    }
-  }
-</script>
-```
-
-As shown above, after the `static` attribute is added, the rendering result will be `Hello, static`, which is equivalent to rendering a static node. The change of the data `word` in ready function will not be listened, so the text value will not change. 
-`static` property is designed to reduce the long list or pure static page memory overhead. Be careful with it, as it will likely break your page logic.
-
-Next, let's have a look at [style and class](./style-n-class.html).
-
diff --git a/_drafts/v-0.10/guide/syntax/display-logic.md b/_drafts/v-0.10/guide/syntax/display-logic.md
deleted file mode 100644
index 842e188..0000000
--- a/_drafts/v-0.10/guide/syntax/display-logic.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Display Logic Control
-type: guide
-order: 2.4
-version: 0.10
----
-
-# Display Logic Control
-
-There are two attributes for display logic control: `if` and `repeat`. We can create Weex page structure and effects more flexible with them.
-
- > **Notes:** The display logic could't apply on the root element within `<template>`, please don't use `if` or `repeat` directive on it.
-
-## `if`
-
-`if` attribute can control the display of a component by a truthy/falsy value. If the value is truthy, then the component will generated, otherwise it will be removed.
-
-```html
-<template>
-  <container>
-    <text onclick="toggle">Toggle</text>
-    <image src="..." if="{{shown}}"></image>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      shown: true
-    },
-    methods: {
-      toggle: function () {
-        this.shown = !this.shown
-      }
-    }
-  }
-</script>
-```
-
-## `repeat`
-
-`repeat` statement is just for array rendering. Every item in an array is also a structured data. This means in `repeat`ed component, you can bind their item properties directly.
-
-```html
-<template>
-  <container>
-    <container repeat="{{list}}" class="{{gender}}">
-      <image src="{{avatar}}"></image>
-      <text>{{nickname}}</text>
-    </container>
-  </container>
-</template>
-
-<style>
-  .male {...}
-  .female {...}
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      list: [
-        {gender: 'male', nickname: 'Li Lei', avatar: '...'},
-        {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
-        ...
-      ]
-    }
-  }
-</script>
-```
-
-The origin data properties which not belongs to the array will also be bound:
-
-```html
-<template>
-  <container>
-    <container repeat="{{list}}" class="{{gender}}">
-      <image src="{{avatar}}"></image>
-      <text>{{nickname}} - {{group}}</text>
-    </container>
-  </container>
-</template>
-
-<style>
-  .male {...}
-  .female {...}
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      group: '...',
-      list: [
-        {gender: 'male', nickname: 'Li Lei', avatar: '...'},
-        {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
-        ...
-      ]
-    }
-  }
-</script>
-```
-
-### An extension of repeat syntax
-
-#### use default `$index` for the index of array.
-
-e.g.
-
-```html
-<div repeat="{{list}}">
-  <text>No. {{$index + 1}}</text>
-<div>
-```
-
-#### specify the key and value of array.
-
-e.g.
-
-```html
-<div repeat="{{v in list}}">
-  <text>No. {{$index + 1}}, {{v.nickname}}</text>
-</div>
-```
-
-```html
-<div repeat="{{(k, v) in list}}">
-  <text>No. {{k + 1}}, {{v.nickname}}</text>
-</div>
-```
-
-#### use `track-by` to specify unique attribute
-
-By default when replacing an array, `repeat` will cause the entire list to be re-rendered. However you can use `track-by` to specify an unique attribute as a hint, so that weex can reuse existing elements as much as possible.
-
-**NOTE: DO NOT USE DATA-BINDING SYNTAX FOR `track-by`**
-
-e.g.
-
-```html
-<template>
-  <container>
-    <container repeat="{{list}}" track-by="nickname" class="{{gender}}">
-      <image src="{{avatar}}"></image>
-      <text>{{nickname}} - {{group}}</text>
-    </container>
-  </container>
-</template>
-```
-
-Later on, when you replace the array including an item of the same nickname, it knows it can reuse the existing scope and DOM elements associated with the same nickname.
-
-## Omitted mustache wrapper
-
-Particularly for the `if` and `repeat` attribute, the [mustache](https://mustache.github.io/) wrapper in values could be omitted: just the same as data-binding syntax.
-
-```html
-<template>
-  <container>
-    <text if="shown">Hello</text>
-    <text if="{{shown}}">Hello</text>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: function () {return {shown: true}}
-  }
-</script>
-```
-
-The two `<text>` components are both displayed.
-
-Next is [render logic control](./render-logic.html).
diff --git a/_drafts/v-0.10/guide/syntax/events.md b/_drafts/v-0.10/guide/syntax/events.md
deleted file mode 100644
index c79dd2b..0000000
--- a/_drafts/v-0.10/guide/syntax/events.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Events
-type: guide
-order: 2.3
-version: 0.10
----
-
-#  Events
-
-Weex allow `<template>` to bind event type and handler on an Element. The attribute name is the event type with prefix `on...` and the attribute value is handler method name. For instance: `onclick="handler"`. e.g.
-
-```html
-<template>
-  <image onclick="handler" ...></image>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      handler: function (e) {
-        // TODO
-      }
-    }
-  }
-</script>
-```
-
-When user clicks the image , handler function which defined in `<script>` code will be executed.
-
-## Inline Handler 
-
-Beside a handler method name, you can also call a handler inline.
-
-e.g.
-```html
-<template>
-  <image onclick="handler('arg1', $event)" ...></image>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      handler: function (arg1, e) {
-        // TODO
-      }
-    }
-  }
-</script>
-```
-
-## Event Object
-
-When an event handler called, it will receive an event object as the first argument. Every event object will contains following properties.
-
-* `type`: event name, eg: `click`
-* `target`: target `Element` of the event
-* `timestamp`: time stamp that event triggered
-
-Next, let's have a look at [display logic control](./display-logic.html).
diff --git a/_drafts/v-0.10/guide/syntax/id.md b/_drafts/v-0.10/guide/syntax/id.md
deleted file mode 100644
index eaa6e04..0000000
--- a/_drafts/v-0.10/guide/syntax/id.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Find an Element
-type: guide
-order: 2.7
-version: 0.10
----
-
-# Find an Element
-
-In Weex, we may set the `id` property for a particular element, just as unique identification of a particular element.
-
-`id` can be used by `this.$el(id)` to find an element with a certain id. Take the API [`scrollToElement()`](../../references/modules/dom.html#scrolltoelementnode-options) For example:
-
-```html
-<template>
-  <container>
-    <text id="top">Top</text>
-    <container style="height: 10000; background-color: #999999;">
-    </container>
-    <text onclick="back2Top">Back to Top</text>
-  </container>
-</template>
-<script>
-  var dom = require('@weex-module/dom')
-  module.exports = {
-    methods: {
-      back2Top: function () {
-        var top = this.$el('top')
-        dom.scrollToElement(top)
-      }
-    }
-  }
-</script>
-```
-
-`id` can also work with `repeat` attribute [See more about display logical control](./display-logic.html), and ensure repetitive elements with different `id`:
-
-```html
-<template>
-  <container>
-    <image id="{{imgId}}" src="{{imgUrl}}" onclick="getImageId" repeat="{{images}}"></image>
-  </container>
-</template>
-<script>
-  module.exports = {
-    data: {
-      images: [
-        {imgId: 1, imgUrl: '...'},
-        {imgId: 2, imgUrl: '...'},
-        {imgId: 3, imgUrl: '...'},
-        ...
-      ]
-    },
-    methods: {
-      getImageId: function(e) {
-        // get e.target.id
-      }
-    }
-  }
-</script>
-```
-
-Additionally, in the [composed components](./composed-component.html), we can get the corresponding sub component through `this.$vm(id)` APIs.
-
-Next is how to [send messages between composed components](./comm.html).
diff --git a/_drafts/v-0.10/guide/syntax/index.md b/_drafts/v-0.10/guide/syntax/index.md
deleted file mode 100644
index 448c40a..0000000
--- a/_drafts/v-0.10/guide/syntax/index.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: Syntax
-type: guide
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# Syntax
-
-*The syntax of Weex is deeply inspired from [Vue.js](http://vuejs.org/), an elegant JavaScript framework with component system and reactive data binding.*
-
-A simple Weex page sample is just a piece of `<template>` code, a piece of `<style>` code and a piece of `<script>` code. The three parts together describe a whole Weex page.
-
-- `<template>`: *required*. Just uses HTML syntax and describes the structure of a Weex page, which is build upon several tags. Each tag means a type of *component*.
-- `<style>`: *optional*. Describes the presentation details, and the content is based on CSS syntax.
-- `<script>`: *optional*. Describes the data and behavior with JavaScript syntax. It defines data and how these data are processed etc.
-
-```html
-<template>
-  <!-- (required) the structure of page -->
-</template>
-
-<style>
-  /* (optional) stylesheet */
-</style>
-
-<script>
-  /* (optional) the definition of data, methods and life-circle */
-</script>
-```
-
-## `<template>`
-
-We describe page structure in `<template>` tag like the following definition:
-
-```html
-<template>
-  <container>
-    <image style="width: 200; height: 200;" src="http://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
-    <text>Alibaba Weex Team</text>
-  </container>
-</template>
-```
-
-Here `container` tag is the root element of the component. `image` tag describes a picture, while `text` tag means a paragraph of text.
-
-Just similar to HTML, each component could have its own attributes, some components also have children as their sub components.
-
-The root element of template: In a `template` tag, there could be only one root component which has no display logics directive. Here are three types of root component we support now:
-
-- `<container>`: a common native container
-- `<scroller>`: a native scroll view
-- `<list>`: a native cell-reusable list view
-
-Only these type of components are allowed for root element.
-
-* [See all built-in components](../../references/components/index.html).
-
-## `<style>`
-
-You can consider the Weex style syntax is a subset of the CSS syntax, but there is still some differences.
-
-First we could write inline `style` attribute in `<template>` element. Second we could use the `class` attribute to apply stylesheets, which are defined with single-class selectors in `<style>` code. Here is an example:
-
-```html
-<template>
-  <container>
-    <text style="font-size: 64;">Alibaba</text>
-    <text class="large">Weex Team</text>
-  </container>
-</template>
-
-<style>
-  .large {font-size: 64;}
-</style>
-```
-
-Both the two `text` components above have the same `font-size`, which is `64` pixel.
-
-* [See common styles in Weex](../../references/common-style.html)
-
-
-### Notes!
-weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule , so please **do not use CamelCase** in your attribute , **long-name** with “-” as delimiter is much better.
-
-## `<script>`
-
-The syntax is JavaScript (ES5) and it describes data and behavior of a Weex page. Here we create three paragraphs:
-
-```html
-<template>
-  <container>
-    <text>The time is {{datetime}}</text>
-    <text>{{title}}</text>
-    <text>{{getTitle()}}</text>
-  </container>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      title: 'Alibaba',
-      datetime: null
-    },
-    methods: {
-      getTitle: function () {
-        return 'Weex Team'
-      }
-    },
-    created: function() {
-      this.datetime = new Date().toLocaleString()
-    }
-  }
-</script>
-```
-
-This piece of `<script>` code will generate some component options and assign it to `module.exports`. The three text components above respectively shows the current datetime, 'Alibaba' and 'Weex Team'. The `data` in the `<script>` code stores component data which could be used for [data-binding](./data-binding.html) in the `<template>`. When data changes, the bound value will be updated automatically. Also it could be read and written by `this.x` in its methods.
-
-* [See component definitions references](../../references/component-defs.html)
-
-Next, let's have a look at [data-binding](./data-binding.html).
diff --git a/_drafts/v-0.10/guide/syntax/render-logic.md b/_drafts/v-0.10/guide/syntax/render-logic.md
deleted file mode 100644
index be967e1..0000000
--- a/_drafts/v-0.10/guide/syntax/render-logic.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Render Logic Control
-type: guide
-order: 2.5
-version: 0.10
----
-
-# Render Logic Control
-
-## `append`
-
-Attribute `append` do not have data-binding. It won't change the final rendering effect. But it determines whether this component should be rendered as a whole tree or a single node with child nodes appended after.
-
-`append` has two key attributes, `tree` and `node`, the usage is:
-
-```html
-<template>
-  <container>
-    <container id="world" append="tree">
-      <text>Hello World!</text>
-    </container>
-    <container id="weex" append="node">
-      <text>Hello Weex!</text>
-    </container>
-  </container>
-</template>
-```
-
-In the code snippet above, the element with id 'world' will wait for all its children to be rendered then it will be rendered entirely, while the element with id 'weex' will only render itself to the page, then its child elements will be rendered to page one by one.
-
-The rendering result is obvious, The latter statement will render the element a bit faster on the first-paint, but the total time might be longger than `append="tree"` case.
-
-By default, elements are rendered as `node` mode. Once an element is in `tree` rendering mode, its children elements will always be rendered in `tree` mode.
-
-Next we will introduce [composed component](./composed-component.html).
diff --git a/_drafts/v-0.10/guide/syntax/style-n-class.md b/_drafts/v-0.10/guide/syntax/style-n-class.md
deleted file mode 100644
index 4337992..0000000
--- a/_drafts/v-0.10/guide/syntax/style-n-class.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Style & Class
-type: guide
-order: 2.2
-version: 0.10
----
-
-# Style & Class
-
-## The Basic Syntax
-
-CSS style description can be viewed as a series of key-value pairs,each of which describes a particular style, such as the width and height of a component.
-
-```css
-.box {
-  width: 400; 
-  height: 50;
-}
-```
-
-The format of key-value pairs is `prop-name: prop-value;`. The key name is `prop-name`, the value name is `prop-value`.  Usually,the key name and the value name follow Horizontal connection nomenclature, the value may be a number(the default units is px); The key and the value must be separated by `:`, between each key-value pairs must be separated by `;`.
-
-The style description will appear on a weex page in two formats:
-
-* Style attribute of `<template>` label
-* Stylesheets of `<style>` label
-
-### style attribute
-
-The style written in the style label, for example:
-
-```html
-<template>
-  <container style="width: 400; height: 50;">
-    ...
-  </container>
-</template>
-```
-
-It is said that the width and height of `<container>` label is 400 pixels and 50 pixels respectively.
-
-### the `<style>` tag
-
-For example:
-
-```html
-<style>
-  .wrapper {width: 600;}
-  .title {width: 400; height: 50;}
-  .highlight {color: #ff0000;}
-</style>
-```
-
-The stylesheets contain multiple style rules, each style rule has only one class which is contained by its style selector, a pair of curly braces `{...}`, and the styles of the curly braces. For example:
-
-```css
-.title {
-  width: 400; 
-  height: 50;
-}
-```
-
-The above is a rule.
-
-### Class attribute
-
-The selectors of `<style>` label are matched with the class attribute of `<template>` label, we should use spaces to separate the class names. For example:
-
-```html
-<template>
-  <container class="wrapper">
-    <text class="title">...</text>
-    <text class="title highlight">...</text>
-  </container>
-</template>
-<style>
-  .wrapper {width: 600;}
-  .title {width: 400; height: 50;}
-  .highlight {color: #ff0000;}
-</style>
-```
-
-It means that the width of the outermost container is 600px, The inside of the two title text is 400 pixels wide 50 pixels high, the second piece of text is red.
-
-### Notes
-
-* In order to simplify the page design and the complete underlying implementation, the width of our default screen is unified to 750 pixels, different screens should be scaled with corresponding ratio.
-* The CSS standard may support a lot of selectors, but now weex only support single-class selector.
-* The CSS standard can support many types of length units, but now weex only support pixel, and the `px` unit could be ignored, you can write number directly. More details can be found in [commmon styles](../../references/common-style.html).
-* The styles of Weex cannot be inherited to children elements, this is different to the CSS standard, such as `color` and `font-size`.
-* The CSS standard contains a lot of styles, but weex only sopport few styles which include layouts such as box model, flexbox, positions. And styles include `font-size`, `color`, etc.
-
-## With Data-binding
-
-Page [data](./data-binding.html) can be bound in `style` and `class` attribute. For example:
-
-```html
-<template>
-  <container>
-    <text style="font-size: {{fontSize}};">Alibaba</text>
-    <text class="large {{textClass}}">Weex Team</text>
-  </container>
-</template>
-<style>
-  .large {font-size: 32;}
-  .highlight {color: #ff0000;}
-</style>
-<script>
-  module.exports = {
-    data: {
-      fontSize: 32,
-      textClass: 'highlight'
-    }
-  }
-</script>
-```
-
-Next, let's have a look at [events](./events.html).
diff --git a/_drafts/v-0.10/references/api.md b/_drafts/v-0.10/references/api.md
deleted file mode 100644
index a62d5b8..0000000
--- a/_drafts/v-0.10/references/api.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Component APIs
-type: references
-order: 1.3
-version: 0.10
----
-
-# APIs
-
-You can access these apis through `this`(Vm) context in script methods.
-
-e.g.
-
-```html
-<script>
-module.exports = {
-    methods: {
-        somemethod: function() {
-            this.$vm('someId');
-        }
-    }
-}
-</script>
-```
-
-## $(id)
-
-**Deprecated**, please use `$vm` instead.
-
-## $el(id)
-
-Return the element referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* *(Element)*: an Element object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $vm(id)
-
-Return the vm object referenced by specific id.
-
-### Arguments
-
-* `id`*(string)*: the unique identifier.
-
-### Returns
-
-* `vm`*(Vm)*: a Vm object referenced.
-
-### Tips
-* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
-* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
-
-## $getConfig()
-
-Get the current global environment variables and configuration information.
-
-### Returns
-
- * `config`*(object)*: the object of config.
- * `bundleUrl`*(string)*: the url of bundle.
- * `debug`*(boolean)*: if is debug mode. 
- * `env`*(object)*: a object of envrioment.
-    * `weexVersion`*(string)*: a version of weex sdk.
-    * `appName`*(string)*: a name of app.
-    * `appVersion`*(string)*: a version of app.
-    * `platform`*(string)*: the platform, one of `iOS`, `Android` and `Web`.
-    * `osVersion`*(string)*: the version of os.
-    * `deviceModel`*(string)*: the model of device. **native only**
-    * `deviceWidth`*(number)*: the width of device, in pixels.
-    * `deviceHeight`*(number)*: the height of device, in pixels.
-
-## $call(module, method, ...args)
-
-**Deprecated**, please use `require('@weex-module/module')[method](...args)` instead. See [modules](./modules/index.html) for more information
-
diff --git a/_drafts/v-0.10/references/bubble.md b/_drafts/v-0.10/references/bubble.md
deleted file mode 100644
index ba59a90..0000000
--- a/_drafts/v-0.10/references/bubble.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Event Bubble 
-type: references
-order: 1.3
-version: 0.10
----
-
-# Event Bubble <span class="api-version">v0.13+</span>
-
-Weex 1.0 implements the W3C standard event bubbling mechanism.
-
-### Usage
-
-```html
-<template>
-  <div class="root" onclick="rootClick" bubble="true">
-    <div>
-      <text style="font-size: 40px;">{{rootText}}</text>
-    </div>
-    <div class="outer" onclick="parentClick">
-      <div>
-        <text style="font-size: 40px;">{{parentText}}</text>
-      </div>
-      <text class="inner" onclick="click">{{innerText}}</text>
-    </div>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      innerText: 'click me',
-      parentText: '',
-      rootText: ''
-    },
-    methods: {
-      click: function(e) {
-        this.innerText = 'inner bubble'
-      },
-      parentClick: function(e) {
-        this.parentText = 'parent bubble'
-      },
-      rootClick: function(e) {
-        this.rootText = 'root bubble'
-      }
-    }
-  }
-</script>
-
-<style>
-  .inner {
-    font-size: 40px;
-    text-align: center;
-    background-color: #7a9b1b;
-    padding: 40px;
-  }
-
-  .outer {
-    font-size: 40px;
-    text-align: center;
-    background-color: #9b7a1b;
-    padding: 120px;
-  }
-
-  .root {
-    font-size: 40px;
-    text-align: center;
-    background-color: #7a1b9b;
-    padding: 80px;
-  }
-</style>
-```
-
-[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
-
-Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.
-
-### Notice
-
-One thing should be noticed: **For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.**
-
-### stopPropagation 
-
-In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-
-```html
-<template>
-  <div class="root" onclick="rootClick" bubble="true">
-    <div>
-      <text style="font-size: 40px;">{{rootText}}</text>
-    </div>
-    <div class="outer" onclick="parentClick">
-      <div>
-        <text style="font-size: 40px;">{{parentText}}</text>
-      </div>
-      <text class="inner" onclick="click">{{innerText}}</text>
-    </div>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      innerText: 'click me',
-      parentText: '',
-      rootText: ''
-    },
-    methods: {
-      click: function(e) {
-        this.innerText = 'inner bubble'
-      },
-      parentClick: function(e) {
-        this.parentText = 'parent bubble'
-        e.stopPropagation()
-      },
-      rootClick: function(e) {
-        this.rootText = 'root bubble'
-        // e.stopPropagation()
-      }
-    }
-  }
-</script>
-
-<style>
-  .inner {
-    font-size: 40px;
-    text-align: center;
-    background-color: #7a9b1b;
-    padding: 40px;
-  }
-
-  .outer {
-    font-size: 40px;
-    text-align: center;
-    background-color: #9b7a1b;
-    padding: 120px;
-  }
-
-  .root {
-    font-size: 40px;
-    text-align: center;
-    background-color: #7a1b9b;
-    padding: 80px;
-  }
-</style>
-```
-
-[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
-
-Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.
diff --git a/_drafts/v-0.10/references/cheatsheet.md b/_drafts/v-0.10/references/cheatsheet.md
deleted file mode 100644
index 68ac69a..0000000
--- a/_drafts/v-0.10/references/cheatsheet.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Weex Cheat Sheet
-
-## Native Components
-
-| component | attribtues | styles | events | special parent | children |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
-| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
-| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
-| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
-| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
-| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
-| `<wxc-tabbar>` | `tab-items` |  **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
-| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
-| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
-| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
-| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
-| `<switch>` | `checked`<br>`disabled` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
-
-## Native Modules
-
-| module | apis |
-| ---- | ---- |
-| `@weex-module/dom` | `scrollToElement(node, { offset })` |
-| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
-| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
-| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
-| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
-| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
-
-## Special Template Syntax
-
-* `<foo x="abc">`
-* `{% raw %}<foo x="{{expr}}">{% endraw %}`
-* `<foo style="name1: value1; name2: value2">`
-* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
-* `<foo class="a b c">`
-* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
-* `<foo onclick="methodName">`
-* `<foo id="abc">`
-* `<foo if="expr">`
-* `<foo repeat="item in list">`
-* `<foo repeat="(key,item) in list">`
-* `<component type="foo">`
-* `{% raw %}<component type="{{expr}}">{% endraw %}`
-
-## ViewModel APIs
-
-* `this.$vm(el)`
-* `this.$el(el)`
-* `this.$getConfig()`
-* `this.$emit(type, data)`
-* `this.$dispatch(type, data)`
-* `this.$broadcast(type, data)`
-
-## ViewModel Options
-
-* `data`
-* `methods`
-* `computed`
-* `init`, `created`, `ready`
-* `events`
-
-example:
-
-```javascript
-module.exports = {
-
-  data: function () {
-    return {
-      x: 1,
-      y: 2
-    }
-  }
-
-  methods: {
-    foo: function () {
-      console.log('foo')
-    }
-  },
-
-  computed: {
-    z: function () {
-      return this.x + this.y
-    }
-  },
-
-  events: {
-    custom: function (e) {
-      console.log(e)
-    }
-  },
-
-  init: function () {},
-  created: function () {},
-  ready: function () {}
-}
-```
diff --git a/_drafts/v-0.10/references/color-names.md b/_drafts/v-0.10/references/color-names.md
deleted file mode 100644
index a61112b..0000000
--- a/_drafts/v-0.10/references/color-names.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: List of the names of colors
-type: references
-order: 1.7
-version: 0.10
----
-
-# List of the names of colors
-
-### Basic color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| black | #000000 |
-| silver |  #C0C0C0 |
-| gray |  #808080 |
-| white | #FFFFFF |
-| maroon |  #800000 |
-| red | #FF0000 |
-| purple |  #800080 |
-| fuchsia | #FF00FF |
-| green | #008000 |
-| lime |  #00FF00 |
-| olive | #808000 |
-| yellow |  #FFFF00 |
-| navy |  #000080 |
-| blue |  #0000FF |
-| teal |  #008080 |
-| aqua |  #00FFFF |
-
-### Extended color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| aliceblue | #F0F8FF |
-| antiquewhite |  #FAEBD7 |
-| aqua |  #00FFFF |
-| aquamarine |  #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque |  #FFE4C4 |
-| black | #000000 |
-| blanchedalmond |  #FFEBCD |
-| blue |  #0000FF |
-| blueviolet |  #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse |  #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue |  #6495ED |
-| cornsilk |  #FFF8DC |
-| crimson | #DC143C |
-| cyan |  #00FFFF |
-| darkblue |  #00008B |
-| darkcyan |  #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray |  #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey |  #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen |  #556B2F |
-| darkorange |  #FF8C00 |
-| darkorchid |  #9932CC |
-| darkred | #8B0000 |
-| darksalmon |  #E9967A |
-| darkseagreen |  #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet |  #9400D3 |
-| deeppink |  #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue |  #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite |  #F8F8FF |
-| gold |  #FFD700 |
-| goldenrod | #DAA520 |
-| gray |  #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey |  #808080 |
-| honeydew |  #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo |  #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender |  #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon |  #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral |  #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow |  #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen |  #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue |  #87CEFA |
-| lightslategray |  #778899 |
-| lightslategrey |  #778899 |
-| lightsteelblue |  #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime |  #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon |  #800000 |
-| mediumaquamarine |  #66CDAA |
-| mediumblue |  #0000CD |
-| mediumorchid |  #BA55D3 |
-| mediumpurple |  #9370DB |
-| mediumseagreen |  #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue |  #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin |  #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy |  #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange |  #FFA500 |
-| orangered | #FF4500 |
-| orchid |  #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip |  #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru |  #CD853F |
-| pink |  #FFC0CB |
-| plum |  #DDA0DD |
-| powderblue |  #B0E0E6 |
-| purple |  #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon |  #FA8072 |
-| sandybrown |  #F4A460 |
-| seagreen |  #2E8B57 |
-| seashell |  #FFF5EE |
-| sienna |  #A0522D |
-| silver |  #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow |  #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal |  #008080 |
-| thistle | #D8BFD8 |
-| tomato |  #FF6347 |
-| turquoise | #40E0D0 |
-| violet |  #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke |  #F5F5F5 |
-| yellow |  #FFFF00 |
-| yellowgreen | #9ACD32 |
-
diff --git a/_drafts/v-0.10/references/common-attrs.md b/_drafts/v-0.10/references/common-attrs.md
deleted file mode 100644
index 2ed0310..0000000
--- a/_drafts/v-0.10/references/common-attrs.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Common Attribute
-type: references
-order: 1.5
-version: 0.10
----
-
-# Common Attribute
-
-Attributes provide additional information about weex tags. All weex tags can have attributes, attributes are always specified in the start tag and usually come in name/value pairs like: name="value". Mustache can be used inside a value. 
-All of weex tags have the following attributes:  
-
-## id
-
-Specifies a unique id for an element in `<template>` scope. With `id` attribute you can easily refer a weex tag.    
-
-```html
-<div id="logo"></div>
-<div id="item-{{index}}"></div>
-```     
-
-## style    
-
-Specifies an inline style for an element.    
-
-```html
-<div style="width: 200; height: 200"></div>
-<div style="padding: {{x}}; margin: 0"></div>
-```     
-
-## class    
-
-Specifies one or more classnames for an element (refers to a class in a style sheet).    
-
-```html
-<div class="button"></div>
-<div class="button {{btnStatus}}"></div>
-```    
-
-## repeat    
-
-We can use the `repeat` attribute to render a list of items based on an array. The `repeat` attribute has a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.     
-
-```html
-<div repeat={{list}}></div>
-<div repeat={{item in list}}></div>
-```    
-
-## if
-
-Provide a boolean value to decide whether or not to display current tag.    
-
-```html
-<div if="true"></div>
-<div if="{{opened}}"></div>
-<div if="{{direction === 'row'}}"></div>
-```    
-
-## append
-
-By providing the value of tree or node, it determines the progress of rendering.    
-
-```html
-<div append="tree/node"></div>
-```    
-
-## Event Handing (on...)
-
-Register event handlers on weex tag.
-
-```html
-<div onclick="openDetail"></div>
-<div onappear="{{loadMore}}"></div>
-```    
-
-## Notes!
-
-Weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule, so please **do not use CamelCase** in your attribute, **kebab-case** with "-" as delimiter is much better.
diff --git a/_drafts/v-0.10/references/common-event.md b/_drafts/v-0.10/references/common-event.md
deleted file mode 100644
index c8e0836..0000000
--- a/_drafts/v-0.10/references/common-event.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Common Events
-type: references
-order: 1.9
-version: 0.10
----
-
-# Common Events
-
-Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions.    
-
-## Click event
-
-The onclick attribute fires on a click gesture on the element.    
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.    
-
-### event object
-
-- `type` : `click` 
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered    
-
-**Example:**    
-
-```html
-<template>
-  <text style="font-size: 60px" onclick="{{update}}">I am {{name}}</text>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      name: 'Tom'
-    },
-    methods: {
-      update: function () {
-        this.name = this.name === 'Tom' ? 'Jerry' : 'Tom'
-      }
-    }
-  }
-</script>
-```   
-
-
-## Longpress event
-
-If a `longpress` event is bound to a component, the event will be triggered when user long press on it.    
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.    
-
-### event object
-
-- `type` : `longpress` 
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered    
-
-**Example:**
-
-```html
-<template>
-  <div style="width: 400px; height: 200px; background-color: {{bg}};
-    justify-content: center; align-items: center;" onlongpress="{{update}}">
-    <text style="font-size: 60px">Press me</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      bg: '#FF0000'
-    },
-    methods: {
-      update: function () {
-        this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
-      }
-    }
-  }
-</script>
-```    
-
-## Appear event    
-
-If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.    
-
-### event object
-
-- `type` : `appear` 
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered  
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.   
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)    
-
-## Disappear event
-
-If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.    
-
-### event object
-
-- `type` : `disappear` 
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered  
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.   
-
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)    
-
-## Page event
-
-Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.    
-The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.    
-The `viewdisappear` event will be triggeded when page is about to dismiss.    
-Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.    
-In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.     
-
-### event object
-
-- `type` : `viewappear` or `viewdisappear` 
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered 
-   
-[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)    
diff --git a/_drafts/v-0.10/references/common-style.md b/_drafts/v-0.10/references/common-style.md
deleted file mode 100644
index 8ae8224..0000000
--- a/_drafts/v-0.10/references/common-style.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: Common Style
-type: references
-order: 1.6
-version: 0.10
----
-
-# Common Style
-
-All of weex tags share some common style rules
-
-## Box Model
-
-![box model](./images/css-boxmodel.png)
-
-Weex box model based on the CSS box model, all of weex elements can be considered as boxes.  The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
-
-you can use the definition below in weex box model.
-
-- `width`: `length` type, default value `0`
-- `height`: `length` type, default value `0`
-- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
-  - `padding-left`: `length` type, default value `0`
-  - `padding-right`: `length` type, default value `0`
-  - `padding-top`: `length` type, default value `0`
-  - `padding-bottom`: `length` type, default value `0`
-- `margin`: `length` type, default value `0`, (space around elements, outside the border)
-  - `margin-left`: `length` type, default value `0`
-  - `margin-right`: `length` type, default value `0`
-  - `margin-top`: `length` type, default value `0`
-  - `margin-bottom`: `length` type, default value `0`
-- `border`
-  - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
-    - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
-    - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
-    - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
-    - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
-  - `border-width`: `length` type, non-negative, default value `0`
-    **DO NOT** use `border-width:1`. There is a default viewport `<viewport width="750">`, if the actual width of a device is 720px, then `border-width:1` will be `border-width:0.96`. As weex **do not** support sub-pixel, this border would not be rendered.
-    - `border-left-width`: `length` type, non-negative, default value `0`
-    - `border-top-width`: `length` type, non-negative, default value `0`
-    - `border-right-width`: `length` type, non-negative, default value `0`
-    - `border-bottom-width`: `length` type, non-negative, default value `0`
-  - `border-color`: `color` type, default value `#000000`
-    - `border-left-color`: `color` type, default value `#000000`
-    - `border-top-color`: `color` type, default value `#000000`
-    - `border-right-color`: `color` type, default value `#000000`
-    - `border-bottom-color`: `color` type, default value `#000000`
-  - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
-
-  Although the the default overflow style is `overflow:hidden` in android, a view will not be clipped by its parents' `border-radius`. This only happens on Android, it works fine on iOS.
-    - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
-    - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
-    - `border-top-left-radius`: `length` type, non-negative, default value `0`
-    - `border-top-right-radius`: `length` type, non-negative, default value `0`
-
-Notes: The rule of border-radius for a specific corner such as `border-top-left-radius` is not currently supported for component `<image>` and `<text>`.
-
-Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
-
-example:
-
-```html
-<template>
-  <div>
-    <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
-  </div>
-</template>
-```
-
-## Flexbox
-
-Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
-
-Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
-
-Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
-
-### Flex container
-
-Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
-
-- `flex-direction`: values `row` | `column`, default value `column`
-
-The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
-
-- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
-
-The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
-
-![justify-content](./images/css-flexbox-justify.svg)
-
-- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
-
-The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
-
-![align-items](./images/css-flexbox-align.jpg)
-
-### Flex item
-
-- `flex`: `number` type, default value `0`
-
-the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.  If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
-
-
-## Examples
-
-a list of images with equal scales align at the vertical axis:
-
-```html
-<template>
-  <div style="width: 300; height: 100;">
-    <image src="..." style="flex: 1;"></image>
-    <image src="..." style="flex: 1;"></image>
-    <image src="..." style="flex: 1;"></image>
-  </div>
-</template>
-```
-
-a image with fixed width aligns with a stretched text:
-
-```html
-<template>
-  <div style="width: 300; height: 100;">
-    <image src="..." style="width: 100; height: 100;"></image>
-    <text style="flex: 1;">...</text>
-  </div>
-</template>
-```
-
-mixed direction alignment:
-
-```html
-<template>
-  <div style="width: 100;">
-    <image src="..." style="width: 100; height: 100;"></image>
-    <div style="flex-direction: row;">
-      <text style="flex: 2; font-size: 32;">title</text>
-      <text style="flex: 1; font-size: 16;">$100</text>
-    </div>
-  </div>
-</template>
-```
-
-one text align left , the other float right:
-
-![one text align left , the other float right](./images/css-flexbox-sample.png)
-
-```html
-<template>
-<div style="flex-direction: row; justify-content: space-between;">
-   <text>WEEX</text>
-   <text>2016-05-08</text>
-</div>
-</template>
-```
-
-## Position
-
-we can use properties below to control placement of weex tag
-
-- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
-
-`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
-
-- `top`: `number` type, default value `0`, upward offset value
-- `bottom`: `number` type, default value `0`, downward offset value
-- `left`: `number` type, default value `0`, leftward offset value
-- `right`: `number` type, default value `0`, rightward offset value
-
-### Examples
-
-```html
-<template>
-  <div style="flex-direction: column;">
-    <div style="height: 3000;">
-      <image src="..." style="top: 50; left: 50; ..."></image>
-    </div>
-    <div style="height: 3000;">
-      <image src="..." style="position: sticky; ..."></image>
-    </div>
-    <div style="height: 3000;">
-      <image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
-    </div>
-  </div>
-</template>
-```
-
-## Other Common Style
-
-- `opacity`
-- `background-color`
-
-## Type of Style Value
-
-- `length` type
-- `number` type
-- `color` type (*[The list of color keywords.](./color-names.html)*)
-- enumerated type
-
-## Simple Step
-
-These up-to-down steps may help you to plan the whole style of weex pages.
-
-1. overall style: divide the whole page to different parts
-2. flex alignment: align boxes in every part of page
-3. position box: place box, set offset
-4. element specific style: set styles for certain element if needed
diff --git a/_drafts/v-0.10/references/component-defs.md b/_drafts/v-0.10/references/component-defs.md
deleted file mode 100644
index baa6584..0000000
--- a/_drafts/v-0.10/references/component-defs.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Component Definition
-type: references
-order: 1.2
-version: 0.10
----
-
-# Component Definition
-
-A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`.
-
-```javascript
-module.exports = {
-  // a set of options here
-}
-```
-
-## Data & Methods options
-
-```javascript
-module.exports = {
-  data: function () {
-    return {x: 1, y: 2}
-  },
-  methods: {
-    doThis: function () {...},
-    doThat: function () {...}
-  },
-  ...
-}
-```
-
-The `data` option is a function that return a observable data object for this ViewModel.
-The `methods` option is a map which contains all ViewModel methods.
-
-Each `data` or `methods` property will be proxied to the ViewModel instance. So you can read and write data with `this.x`, also you can call methods with `this.doThis(...)`.
-
-A whole example:
-
-```html
-<template>
-  <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
-</template>
-<script>
-  module.exports = {
-    data: function () {
-      return {w: 750, h: 200}
-    },
-    methods: {
-      update: function (e) {
-        this.h += 200
-      }
-    }
-  }
-</script>
-```
-
-## Events options
-
-```javascript
-module.exports = {
-  data: ...,
-  methods: {
-    foo: function () {
-      ...
-      this.$emit('customtype1', data)
-    }
-  },
-  events: {
-    customtype1: function (e) {
-      console.log(e.type, e.detail)
-    }
-  },
-  ...
-}
-```
-
-The `events` options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value.
-
-The first argument is a event object which contains event data in `e.detail`.
-
-## Lifecycle options
-
-```javascript
-module.exports = {
-  data: ...,
-  methods: ...,
-  init: function () {
-    console.log('ViewModel constructor begins')
-  },
-  created: function () {
-    console.log('Data observation finished')
-  },
-  ready: function () {
-    console.log('Virtual DOM finished')
-  },
-  ...
-}
-```
-
-Weex ViewModel now supports these lifecycle hook functions which could be write as component options:
-
-* `init`: fired at the beginning of a ViewModel constructor call.
-* `created`: fired when ViewModel observes default data but not compile the template.
-* `ready`: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally.
-
-**Note: If you want to use the function in `methods`, `events` or lifecycle options as a parameter, please make sure the context is correct as expect. For example:**
-
-```javascript
-module.exports = {
-  data: function () {
-    return {x: 1, y: 2}
-  },
-  ready: function () {
-    // `undefined`
-    // because the context changed
-    this.foo(this.bar)
-    // `1`
-    // because the context bound correct
-    this.foo(this.bar.bind(this))
-  },
-  methods: {
-    foo: function (fn) {
-      return fn()
-    },
-    bar: function () {
-      return this.x
-    }
-  }
-}
-```
diff --git a/_drafts/v-0.10/references/components/a.md b/_drafts/v-0.10/references/components/a.md
deleted file mode 100644
index e1677bf..0000000
--- a/_drafts/v-0.10/references/components/a.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: <a>
-type: references
-order: 2.1
-version: 0.10
----
-
-# &lt;a&gt;
-
-`a` defines a hyperlink to a page in the web. Its purpose and syntax is very similar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
-
-## Child Components
-
-This type of component supports all kinds of weex component as it's child components except for its own kind.
-
-## Attributes
-
-* href: href attributes defines the URL of the hyperlink.
-
-## Styles:
-
-### common styles
-
-Check out the [common styles](../common-style.html)
-
-## Events
-
-### common events
-
-Check out the [common events](../common-event.html)
-
-### Notes
-
-We can't guarantee the order of execution between onclick function and href. we recommend that do not use the click event in `a`.
-
-## Examples
-
-```html
-<template>
-  <div>
-    <a href="http://h5.m.taobao.com">
-    <text>Click me to see how 'A' element opens a new world.</text>
-  </a>
-  </div>
-</template>
-```
-
-[Try it](http://dotwe.org/d99f6eb55aa501c836a195ec824cada0)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for  'a'. 
diff --git a/_drafts/v-0.10/references/components/cell.md b/_drafts/v-0.10/references/components/cell.md
deleted file mode 100644
index 34d1703..0000000
--- a/_drafts/v-0.10/references/components/cell.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: <cell>
-type: references
-order: 2.6
-version: 0.10
----
-
-# &lt;cell&gt;
-
-### Summary
-
-This component must be used as a subcomponent of a [`list`](./list.html) component, which is for the performance optimizing during scrolling.
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height.
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-please refer to [List](./list.html)
diff --git a/_drafts/v-0.10/references/components/div.md b/_drafts/v-0.10/references/components/div.md
deleted file mode 100644
index 1e75523..0000000
--- a/_drafts/v-0.10/references/components/div.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: <div>
-type: references
-order: 2.2
-version: 0.10
----
-
-# &lt;div&gt;
-
-### Summary
-
-The most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox.
-
-alias: `<container>` (deprecated)
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components including its own kind.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
-  <image src="..."></image>
-  <text>...</text>
-</div>
-```
-
diff --git a/_drafts/v-0.10/references/components/image.md b/_drafts/v-0.10/references/components/image.md
deleted file mode 100644
index 3eae206..0000000
--- a/_drafts/v-0.10/references/components/image.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: <image>
-type: references
-order: 2.3
-version: 0.10
----
-
-# &lt;image&gt;
-
-### Summary
-
-`image` tag is used to render a specified picture, and it shouldn't contain any child component. You can use `img` as alias.
-
-**Notes:** the styles of `width` and `height` should be specified, otherwise it won't work.
-
-alias: `<img>`
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-- `src`: &lt;string&gt; image source url
-- `resize`: <span class="api-version">v0.5+</span> &lt;string&gt; the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `width`: &lt;length&gt; the width of the component. This style should be specified.
-- `height`: &lt;length&gt; the height of the component. This style should be specifed.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Examples
-
-```html
-<div>
-  <image src="..." ></image>
-  <text>...</text>
-</div>
-```
diff --git a/_drafts/v-0.10/references/components/index.md b/_drafts/v-0.10/references/components/index.md
deleted file mode 100644
index 66e211c..0000000
--- a/_drafts/v-0.10/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Build-in Components
-type: references
-order: 2
-version: 0.10
----
-
-# Build-in Components
-
-- [&lt;a&gt;](./a.html)
-- [&lt;indicator&gt;](./indicator.html)
-- [&lt;switch&gt;](./switch.html)
-- [&lt;text&gt;](./text.html)
-- [&lt;textarea&gt;](./textarea.html)
-- [&lt;video&gt;](./video.html)
-- [&lt;web&gt;](./web.html)
-- [&lt;div&gt;](./div.html)
-- [&lt;image&gt;](./image.html)
-- [&lt;input&gt;](./input.html)
-- [&lt;list&gt;](./list.html)
-- [&lt;cell&gt;](./cell.html)
-- [&lt;refresh&gt; & &lt;loading&gt;](./refresh.html)
-- [&lt;scroller&gt;](./scroller.html)
-- [&lt;slider&gt;](./slider.html)
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/components/indicator.md b/_drafts/v-0.10/references/components/indicator.md
deleted file mode 100644
index b06dc95..0000000
--- a/_drafts/v-0.10/references/components/indicator.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: <indicator>
-type: references
-order: 2.10
-version: 0.10
----
-
-# &lt;indicator&gt;
-
-### Summary
-
-This component must be used as a subcomponent of a [`slider`](./slider.html) component.
-
-### Child Components
-
-This component supports no child components.
-
-### Attributes
-
-There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
-
-### Styles
-
-- `item-color`: &lt;colors&gt; This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-selectedColor`: &lt;colors&gt; This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
-- `item-size`: &lt;length&gt; The size of the indicator elements, which is an float attribute.
-
-**common styles**: check out the [common styles](../common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-
-**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`.
-
-**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead.
-
-### Events
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-
-### Example
-
-```html
-<template>
-  <div>
-    <slider class="slider">
-      <div class="slider-pages" repeat="{{itemList}}">
-        <image class="img" src="{{pictureUrl}}"></image>
-        <text class="title">{{title}}</text>
-      </div>
-
-      <indicator class="indicator"></indicator>
-    </slider>
-  </div>
-</template>
-
-<style>
-  .img {width: 150; height: 150;}
-  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
-  .slider {
-    flex-direction: row;
-    margin: 18;
-    width: 714;
-    height: 230;
-  }
-  .slider-pages {
-    flex-direction: row;
-    width: 714;
-    height: 200;
-  }
-  .indicator {
-    width:714;
-    height:200;
-    position:absolute;
-    top:1;
-    left:1;
-    item-color: red;
-    item-selectedColor: blue;
-    item-size: 20;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      itemList: [
-        {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
-        {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
-        {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
-      ]
-    }
-  }
-</script>
-```
diff --git a/_drafts/v-0.10/references/components/input.md b/_drafts/v-0.10/references/components/input.md
deleted file mode 100644
index feaac53..0000000
--- a/_drafts/v-0.10/references/components/input.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: <input>
-type: references
-order: 2.4
-version: 0.10
----
-
-# input
-
-The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc.
-
-**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `password`, `tel`, `email`, `url` etc. each of which has the same meaning with W3C standard.
-
-* `value`: the value(text) of the control.
-
-* `placeholder`: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-
-* `disabled`: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-
-* `autofocus`: a boolean attribute lets you specify that a form control should have input focus when the page loads.
-
-* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-* placeholder-color: the color of placeholder. Default value is '#999999'.
-
-* text styles: checkout [text styles](../text-style.html)
-
-  * support 'color' style.
-  * support 'font-size' style.
-  * support 'font-style' style.
-  * support 'font-weight' style.
-  * support 'text-align' style.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-* input: the value of an input character changes.
-* change: the change event is fired when a change to the component's value is commited by the user. It always come after a 'blur' event.
-* focus: a component has received focus.
-* blur: a component has lost focus.
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'appear' / 'disappear' event. 
-
-### Notes
-does not support the common-event 'click'. Please listen to the 'input' or 'change' event instead.
-
-### Parameters of events' object
-
-* for 'input' and 'change' events:'value': the value of the component who dispatched this event.'timestamp': the time stamp of the event.
-* for 'focus' and 'blur' events:'timestamp': the time stamp of the event.
-
-## Example
-
-```html
-<template>
-  <div>
-      <input
-        type="text"
-        placeholder="Input Something"
-        class="input"
-        autofocus="true"
-        value=""
-        onchange="onchange"
-        oninput="oninput"
-      />
-      <text>oninput: {{txtInput}}</text>
-      <text>onchange: {{txtChange}}</text>
-  </div>
-</template>
-
-<style>
-  .input {
-    font-size: 60;
-    height: 80;
-    width: 400;
-  }
-</style>
-
-<script>
-  require('weex-components');
-  module.exports = {
-    data: {
-      txtInput: '',
-      txtChange: ''
-    },
-    methods: {
-      onchange: function(event) {
-        this.txtChange = event.value;
-        console.log('onchange', event.value);
-      },
-      oninput: function(event) {
-        this.txtInput = event.value;
-        console.log('oninput', event.value);
-      }
-    }
-  };
-</script>
-```
-
-[Try it](http://dotwe.org/e1b18eb89facb4e2a5467ee4bebd9be6)
-
-Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for  'input'. 
diff --git a/_drafts/v-0.10/references/components/list.md b/_drafts/v-0.10/references/components/list.md
deleted file mode 100644
index 3b4745e..0000000
--- a/_drafts/v-0.10/references/components/list.md
+++ /dev/null
@@ -1,292 +0,0 @@
----
-title: <list>
-type: references
-order: 2.5
-version: 0.10
----
-
-# List
-
-<span class="weex-version">v0.6.1+</span>
-
-The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
-
-It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage.
-
-**example**
-
-```html
-<template>
-  <list>
-    <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
-      <div class="item">
-        <text>{{name}}</text>
-      </div>
-    </cell>
-  </list>
-</template>
-
-<style>
-  .row {
-    width: 750;
-  }
-  .item {
-    justify-content: center;
-    border-bottom-width: 2;
-    border-bottom-color: #c0c0c0;
-    height: 100;
-    padding:20;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      staffs:[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}]
-    },
-    methods:{
-      onappear: function (e, index) {
-        console.log('+++++', index)
-        console.log(this.staffs[index].name + ' is appearing...');
-      },
-      ondisappear:function (e, index) {
-        console.log('+++++', index)
-      }
-    }
-  }
-</script>
-
-```
-
-[try it](http://dotwe.org/15d58cfbca9b6a72c89c9a13ad1f6155)
-
-### Child Components
-
-Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
-
-* cell 0.6.1 defines the attributes and behavior of the cells that appear in list. 
-* header 0.6.1 sticks to the top when it reaches the top of the screen.
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
-
-
-### Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0,whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-### Events
-
-onloadmore  0.5 used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-### API
-
-All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html)
-
-#### Difference between loading child component and onloadmore event
-
-loading is a child component that can response to the onloading  event, and this event can only be triggered when the  scroller/list has been scrolled down to the bottom.
-onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.
-
-
-* [scroller example](http://dotwe.org/85fd3988eefa24f058b7da7966e56203)
-* [list example](http://dotwe.org/62f895249014dde26cc0725c8005e42c)
-
-### Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
-### Example
-
-```html
-<template>
-  <div class="wrapper">
-    <list class="list">
-      <header class="header">
-        <text class="title">Search Results</text>
-      </header>
-      <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}">
-        <text class="text"> ↓ Pull to refresh </text>
-        <loading-indicator class="indicator"></loading-indicator>
-      </refresh>
-      <cell class="row" repeat="item in items" id="item-{{$index}}">
-        <div>
-          <text class="item">Repo name: {{item.full_name}}</text>
-        </div>
-        <div>
-          <text class="item">Repo star: {{item.stargazers_count}}</text>
-        </div>
-      </cell>
-      <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
-        <text class="text">{{loadingText}}</text>
-      </loading>
-    </list>
-    <div class="up" onclick="goToTop">
-      <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
-    </div>
-  </div>
-</template>
-
-<style>
-.wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.list{
-  background-color: #ffffff;
-  flex: 1;
-}
-.header {
-  height: 80;
-  align-items: center;
-  justify-content: center;
-  background-color: #efefef;
-  border-bottom-color: #eeeeee;
-  border-bottom-width: 2;
-  border-bottom-style: solid;
-}
-.title {
-  text-align: center;
-}
-.text {
-  text-align: center;
-}
-.row {
-  padding: 20;
-  border-bottom-color: #eeeeee;
-  border-bottom-width: 2;
-  border-bottom-style: solid;
-}
-.up {
-  width: 70;
-  height: 70;
-  position: fixed;
-  right: 20;
-  bottom: 20;
-}
-.img {
-  width: 70;
-  height: 70;
-}
-</style>
-
-<script>
-var dom = require('@weex-module/dom') || {}
-var stream = require('@weex-module/stream') || {}
-var modal = require('@weex-module/modal') || {}
-
-var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'
-
-module.exports = {
-  data: {
-    isLoaded: true,
-    page: 1,
-    loadingDisplay: 'hide',
-    refreshDisplay: 'hide',
-    loadingText: 'Loading...',
-    items:[]
-  },
-  created: function () {
-    var url = SEARCH_URL + '&page=' + this.page
-
-    this.renderData(url)
-    
-    this.page++
-  },
-  methods: {
-    renderData: function (url) {
-      var self = this
-
-      stream.fetch({
-        method: 'GET',
-        url: url,
-        type:'json'
-      }, function(res) {
-        self.refreshDisplay = 'hide'
-        self.loadingDisplay = 'hide'
-
-        try {
-          var results = res.data.items || []
-          
-          if (Array.isArray(results)) {
-            for(var i = 0; i < results.length; i++) {
-              self.items.push(results[i])
-            }
-          }
-
-          self.isLoaded = true
-        } catch(e) {}
-      },function(res){
-          
-      })
-    },
-    loadingData: function (e) {
-      var url = SEARCH_URL + '&page=' + this.page
-      var self = this
-      
-      if (self.isLoaded === false) return 
-      
-      self.loadingDisplay = 'show'
-      
-      if (self.page <=10 ) {
-        self.renderData(url)
-        self.page++
-      } else {
-        self.loadingDisplay = 'hide'
-        self.loadingText = 'NO MORE!'
-      }
-    },
-    goToTop: function (e) {
-      dom.scrollToElement(this.$el('item-0'), {
-        offset: -100
-      })
-    },
-    refreshData: function (e) {
-      var url = SEARCH_URL + '&page=1'
-
-      if (this.isLoaded === false) return 
-      
-      this.refreshDisplay = 'show'
-
-      modal.toast({
-        'message': 'Refreshing...', 
-        'duration': 1
-      })
-
-      this.items = []
-      this.page = 1
-      this.renderData(url)
-
-      this.refreshDisplay = 'hide'
-    }
-  }
-}
-</script>
-```
-
-[Try it](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/components/refresh-loading.md b/_drafts/v-0.10/references/components/refresh-loading.md
deleted file mode 100644
index 8b1d610..0000000
--- a/_drafts/v-0.10/references/components/refresh-loading.md
+++ /dev/null
@@ -1,297 +0,0 @@
----
-title: <refresh> & <loading>
-type: references
-order: 2.7
-version: 0.10
----
-
-# refresh & loading
-
-<span class="weex-version">v0.6.1+</span>
-
-## Loading Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-
-**example**
-
-```html
-`<template>
-  <list>
-    <header>
-      <div class="center">
-        <text style="text-align:center">I am the header</text>
-      </div>
-    </header>
-    <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
-      <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
-    </loading>
-    <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
-        <div class="item">
-          <text>{{name}}</text>
-        </div>
-    </cell>
-  </list>
-</template>
-
-<style>
-  .row {
-    width: 750;
-  }
-  .item {
-    justify-content: center;
-    border-bottom-width: 2;
-    border-bottom-color: #c0c0c0;
-    height: 100;
-    padding:20;
-  }
-  .center {
-    border-bottom-width: 2;
-    border-bottom-color: #cccccc;
-    height: 100;
-    padding:20;
-    background-color:#FFFFFF;
-    justify-content: center;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      staffs:[],
-      loadingDisplay: 'show',
-      loadingText: 'pull up to load more',
-      refreshText: 'pull down to refresh'
-    },
-    created:function() {
-      this.refreshDisplay='show'
-      this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
-    },
-    methods:{
-      onappear: function (e, index) {
-        // console.log('+++++', index);
-        // console.log(this.staffs[index].name + ' is appearing...');
-      },
-      ondisappear:function (e, index) {
-        // console.log('+++++', index);
-      },
-      onloading:function(e){
-        console.log('onloading...');
-        this.staffs.push({name:'onloading'})
-      }
-    }
-  }
-</script>
-
-```
-
-[try it](http://weex.alibaba-inc.com/raw/html5/a34523fee395aa68018d65f0fb622310.js)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://weex.alibaba-inc.com/playground/a34523fee395aa68018d65f0fb622310)
-
-### Attributes
-
-* display has value of show or hide.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-
-* onloading triggered when loading
-
-
-#### Restrictions
-* refresh/loading does not support remove action,  Weex 0.9 will fix it.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
-
-## Refresh Components
-
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
-
-```html
-<template>
-  <scroller onloadmore="onloadmore" loadmoreoffset="1000">
-    <refresh onrefresh="onrefresh" display="{{refreshDisplay}}">
-      <text id="refreshText">{{refreshText}}</text>
-    </refresh>
-    <div repeat="{{v in items}}">
-      <text style="font-size: 40; color: #000000">{{v.item}}</text>
-    </div>
-    <loading onloading="onloading" display="{{loadingDisplay}}">
-      <text id="loadingText">{{loadingText}}</text>
-    </loading>
-  </scroller>
-</template>
-<script>
-  module.exports = {
-    data: {
-      refreshDisplay: 'show',
-      loadingDisplay: 'show',
-      loadingText: 'pull up to load more',
-      refreshText: 'pull down to refresh',
-      items: []
-    },
-    created: function () {
-      for (var i = 0; i < 30; i++) {
-        this.items.push({'item': 'test data' + i});
-      }
-    },
-    methods: {
-      onrefresh: function () {
-        var vm = this;
-        vm.refreshDisplay = 'show'
-        if (vm.items.length > 50) {
-          vm.refreshText = "no more data!"
-          vm.refreshDisplay = 'hide'
-          return;
-        }
-        var len = vm.items.length;
-        for (var i = len; i < (len + 20); i++) {
-          vm.items.unshift({'item': 'test data ' + i});
-        }
-        vm.refreshDisplay = 'hide'
-      },
-      onloading: function () {
-        var vm = this;
-        vm.loadingDisplay = 'show'
-        if (vm.items.length > 30) {
-          vm.loadingText = "no more data!"
-          vm.loadingDisplay = 'hide'
-          return;
-        }
-
-        var len = vm.items.length;
-        for (var i = len; i < (len + 20); i++) {
-          vm.items.push({'item': 'test data ' + i});
-        }
-        vm.loadingDisplay = 'hide'
-      },
-      onloadmore:function(){
-        console.log("into--[onloadmore]")
-      }
-    }
-  }
-</script>
-```
-
-[try it](http://dotwe.org/242add915e41d307f2fa6f423278425a)
-
-### Child Components
-
-Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
-
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
-[example](http://dotwe.org/e65a2cb0abfcdbbabda6778064837a92)
-
-### Attributes
-* display has value of show or hide, default value is show.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-
-### Events
-* onrefresh triggered when the scroller has been pulled down
-* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object. [example](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-**example**
-
-```html
-<template>
-  <list>
-    <header>
-      <div class="center">
-        <text style="text-align:center">I am the header</text>
-      </div>
-    </header>
-    <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
-      <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
-    </refresh>
-    <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{staffs}}" index="{{$index}}">
-        <div class="item">
-          <text>{{name}}</text>
-        </div>
-    </cell>
-  </list>
-</template>
-
-<style>
-  .row {
-    width: 750;
-  }
-  .item {
-    justify-content: center;
-    border-bottom-width: 2;
-    border-bottom-color: #c0c0c0;
-    height: 100;
-    padding:20;
-  }
-  .center {
-    border-bottom-width: 2;
-    border-bottom-color: #cccccc;
-    height: 100;
-    padding:20;
-    background-color:#FFFFFF;
-    justify-content: center;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      staffs:[],
-      refreshDisplay: 'show',
-      loadingDisplay: 'show',
-      loadingText: 'pull up to load more',
-      refreshText: 'pull down to refresh'
-    },
-    created:function() {
-      this.refreshDisplay='show'
-      this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
-    },
-    methods:{
-      onappear: function (e) {
-        var index = e.target.attr.index
-        // console.log(this.staffs[index].name + ' is appearing...');
-      },
-      ondisappear:function (e) {
-      },
-      onrefresh:function(e){
-        this.refreshDisplay='show';
-        // this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'}];
-        this.refreshDisplay='hide'
-        // console.log(this.refreshDisplay);
-      },
-      onpullingdown:function(e){
-        console.log('onpullingdown triggered.');
-        console.log('dy:'+e.dy);
-        console.log('headerHeight:'+e.headerHeight);
-        console.log('maxHeight:'+e.maxHeight);
-      }
-    }
-  }
-</script>
-
-```
-
-[try it ](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
-
-
-### Restrictions
-
-* refresh/loading does not support remove action, may support in Weex 0.9.
-* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
diff --git a/_drafts/v-0.10/references/components/scroller.md b/_drafts/v-0.10/references/components/scroller.md
deleted file mode 100644
index 3197ab8..0000000
--- a/_drafts/v-0.10/references/components/scroller.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: <scroller>
-type: references
-order: 2.8
-version: 0.10
----
-
-# &lt;scroller&gt;
-<span class="weex-version">v0.6.1+</span>
-
-A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scroller, the whole child components will be scrollable.
-
-Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.
-
-
-**example**
-
-```html
-<template>
-  <scroller onloadmore="onloadmore" loadmoreoffset="100">
-    <div repeat="{{v in items}}">
-      <text style="font-size: 40; color: #000000">{{v.item}}</text>
-    </div>
-  </scroller>
-</template>
-<script>
-  module.exports = {
-    data: {
-      items: [],
-      triggered:false
-    },
-    created: function () {
-      for (var i = 0; i < 50; i++) {
-        this.items.push({'item': 'test data' + i});
-      }
-    },
-    methods: {
-      onloadmore:function(){
-        if(!this.triggered){
-          for (var i = 100; i >= 50; i--) {
-            this.items.push({'item':'onloadmore triggered' + i});
-          }
-        }
-        this.triggered=true;
-      }
-    }
-  }
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-## Child Components
-
-Scroller supports all kinds of components, such as div, text, etc.
-And there are two special components that can only be used inside scroller component.
-
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality. 
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality. 
-
-
-## Attributes
-
-* show-scrollbar: true/false whether show the scroll bar or not, default value is true
-* scroll-direction: <string> define scroll direction of component, horizontal or vertical
-* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
-* loadmoreretry : <number> default value 0,whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
-
-**example**
-
-```html
-<template>
-  <scroller onloadmore="onloadmore" loadmoreoffset="100">
-  <div repeat="{{v in items}}">
-    <text style="font-size: 40; color: #000000">{{v.item}}</text>
-  </div>
-  </scroller>
-</template>
-<script>
-module.exports = {
-  data: {
-    items: [],
-    triggered:false
-  },
-  created: function () {
-    for (var i = 0; i < 50; i++) {
-      this.items.push({'item': 'test data' + i});
-    }
-  },
-  methods: {
-    onloadmore:function(){
-      if(!this.triggered){
-        for (var i = 100; i >= 50; i--) {
-        this.items.push({'item':'onloadmore triggered' + i});
-        }
-      }
-      this.triggered=true;
-    }
-  }
-}
-</script>
-```
-
-[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
-
-
-Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent.
-
-Other attributes please check out the [common     attributes](../common-attrs.html).
-
-## Styles
-
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-
-## Events
-
-onloadmore  used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
-
-common events: check out the [common events](../common-event.html)
-
-* support onclick event. Check out [common events](../common-event.html)
-* support onappear / ondisappear event. Check out [common events](../common-event.html)
-
-
-
-## Restrictions
-
-Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
-For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.
-
diff --git a/_drafts/v-0.10/references/components/slider.md b/_drafts/v-0.10/references/components/slider.md
deleted file mode 100644
index b1a537f..0000000
--- a/_drafts/v-0.10/references/components/slider.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: <slider>
-type: references
-order: 2.9
-version: 0.10
----
-
-# &lt;slider&gt;
-
-## Summary
-
-A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
-
-## Child Components
-
-It supports all kinds of weex components as its slides, especially the `indicator` component which can be used only as a child component of `slider`.
-
-## Attributes
-
-- `auto-play`: &lt;boolean&gt; `true` | `false`. This value determines whether the slides plays automatically after the page rendering finished. The default value is `false`.
-- `interval`: &lt;number&gt; millisecond. This value determines time interval for each page displayed in slider.
-- `index`: &lt;number&gt; . This value determines the  index of current shown slide. The default value is `0`.
-
-Other attributes please check out the [common attributes](../references/common-attrs.html).
-
-## Styles
-
-**common styles**: check out [common styles for components](../references/common-style.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-## Events
-
-- `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
-
-**common events**: check out the [common events](../references/common-event.html)
-
-- support `click` event. Check out [common events](../references/common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
-
-### Example
-
-```html
-<template>
-  <div>
-    <slider class="slider" interval="3000" auto-play="true">
-      <div class="slider-pages" repeat="item in itemList">
-        <image class="img" src="{{item.pictureUrl}}"></image>
-        <text class="title">{{item.title}}</text>
-      </div>
-      <indicator class="indicator"></indicator>
-    </slider>
-  </div>
-</template>
-
-<style>
-  .img {
-    width: 714;
-    height: 150;
-  }
-  .title {
-    position: absolute;
-    top: 20;
-    left: 20;
-    color: #ff0000;
-    font-size: 48;
-    font-weight: bold;
-    background-color: #eeeeee;
-  }
-  .slider {
-    flex-direction: row;
-    margin: 18;
-    width: 714;
-    height: 230;
-  }
-  .slider-pages {
-    flex-direction: row;
-    width: 714;
-    height: 200;
-  }
-  .indicator {
-    width:714;
-    height:200;
-    position:absolute;
-    top:1;
-    left:1;
-    item-color: red;
-    item-selectedColor: blue;
-    item-size: 20;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      itemList: [
-        {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
-        {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
-        {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
-      ]
-    }
-  }
-</script>
-```
diff --git a/_drafts/v-0.10/references/components/switch.md b/_drafts/v-0.10/references/components/switch.md
deleted file mode 100644
index 441da7b..0000000
--- a/_drafts/v-0.10/references/components/switch.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: <switch>
-type: references
-order: 2.11
-version: 0.10
----
-
-# &lt;switch&gt;
-
-<span class="weex-version">v0.6.1+</span>
-
-The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.
-
-**example**
-
-```html
-<template>
-  <div>
-  <text>muted:</text>
-  <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch>
-</div>
-</template>
-
-<script>
-  module.exports ={
-    methods:{
-      onclick:function(e){
-        console.log('onclick:' + e.timestamp);
-      },
-      onchange:function(e){
-        console.log('onchage, value:' + e.value);
-      },
-      ondisappear:function(e){
-        console.log('ondisappear, value:' + e.value);
-      },
-      onappear:function(e){
-        console.log('onappear, value:' + e.value);
-      },
-    }
-  }
-</script>
-```
-
-[try it](http://dotwe.org/7306d24f4f677b6d9935dbd00e3aa981)
-
-## Child Components
-
-There are no child components for the switch component.
-
-## Attributes
-
-* checked &lt;boolean&gt; true|false, default value is false, indicating whether the button is on or not.
-* disabled &lt;boolean&gt; true|false, default value is false, indicating whether the button is enable or not.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties:
-
-* width
-* height
-* min-width
-* min-height
-* margin and margin-xxs
-* padding and padding-xxs
-* border and border-xxs
-
-Notes: Specially the width and height related properties is not configurable and the size of this component is fixed to 100x60 (for the design width 750px).
-
-common styles: check out [common styles for components](../common-style.html)
-
-## Events
-
-* onappear / ondisappear event. check out [common events](../common-event.html)
-* onclick: check out [common events](../common-event.html)
-* onchange: check out [common events](../common-event.html)
-
-## Parameters of events' object for onchange event:
-
-* value: the value of the component who dispatched this event, which is the boolean value true or false.
-* timestamp: the time stamp of the event.
diff --git a/_drafts/v-0.10/references/components/text.md b/_drafts/v-0.10/references/components/text.md
deleted file mode 100644
index 308fd4a..0000000
--- a/_drafts/v-0.10/references/components/text.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: <text>
-type: references
-order: 2.12
-version: 0.10
----
-
-# &lt;text&gt;
-
-The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-* value(string): text value of this component. This is equal to the content of 'text'. 
-
-### example
-
-```
-var textComponent = this.$el("textid");
-this.text = textComponent.attr.value;
-```
-
-## Styles
-
-* lines: specify the text lines. Default value is `0` for unlimited.
-* text styles: check out [text styles](../text-style.html)
-
-  * support 'color' style.
-  * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`.
-  * support 'font-style' style.
-  * support 'font-weight' style.
-  * support 'text-align' style.
-  * support 'text-decoration' style.
-  * support 'text-overflow' style.
-  * support 'line-height'(available from v0.6.1) style. line-height in iOS is different from h5 and Android, text value will be placed at bottom of line box.
-  * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes.
-
-### common styles
-check out [common styles for components](../common-style.html)
-
-* support flexbox related styles.
-* support box model related styles.
-* support 'position' related styles.
-* support 'opacity', 'background-color' etc.
-
-## Events
-
-### common events
-check out [common events](../common-event.html)
-
-* support 'click' event.
-* support 'appear' / 'disappear' event. 
-
-## Example
-
-```html
-<template>
-  <div>
-    <text>this is text content</text>
-    <text value="this is text value"></text>
-    <text style="text">{{price1}}</text>
-    <text id="textid" onclick={{showtext}}>this is gettext content</text>
-    <text value="{{text}}"></text>
-  </div>
-</template>
-
-<style>
-  .text {
-    font-size: 24; 
-    text-decoration: underline;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      price1: '99.99',
-      price2: '88.88',
-      text:''
-    },
-    methods: {
-      showtext: function(event) {
-        var textComponent = this.$el("textid");
-        this.text = textComponent.attr.value;
-      }
-    }
-  };
-</script>
-```
-[Try it](http://dotwe.org/48f4d7c50245145c72c33161e2bb4325)
diff --git a/_drafts/v-0.10/references/components/textarea.md b/_drafts/v-0.10/references/components/textarea.md
deleted file mode 100644
index 2645385..0000000
--- a/_drafts/v-0.10/references/components/textarea.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: <textarea>
-type: references
-order: 2.13
-version: 0.10
----
-
-# &lt;textarea&gt;
-<span class="weex-version">v0.8+</span>
-
-
-### Summary
-
-The weex builtin component `textarea` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.html).
-
-**Notes:** `<textarea>` support all event which `<input>` had.
-
-### Child Components
-
-This component supports no child components.
-
-### attributes
-
-- `value`: &lt;string&gt; the value of the control.
-- `placeholder`: &lt;string&gt; a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
-- `disabled`: &lt;boolean&gt; a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
-- `autofocus`: &lt;boolean&gt; a boolean attribute lets you specify that a form control should have input focus when the page loads.
-- `rows:`&lt;number&gt; a number which can specify the height of textarea, default is `2`.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-### Styles
-
-**text styles**: checkout [text styles](../text-style.html)
-
-- support `color` style.
-- support `font-size` style.
-- support `font-style` style.
-- support `font-weight` style.
-- support `text-align` style.
-
-
-**common styles**: check out [common styles for components](../common-style.html)
-
-- support flexbox related styles.
-- support box model related styles.
-- support ``position`` related styles.
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-- `input`: the value of an element changes.
-- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event.
-- `focus`: a component has received focus.
-- `blur`: a component has lost focus.
-
-**common events**: check out the [common events](../common-event.html)
-
-- support `appear` / `disappear` event. Check out [common events](../common-event.html).
-
-**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead.
-
-### Parameters of events' object
-
-- for ``input`` and ``change`` events:
-  - `value`: the value of the component who dispatched this event.
-  - `timestamp`: the time stamp of the event.
-- for ``focus`` and ``blur`` events:
-  - `timestamp`: the time stamp of the event.
-
-### Example
-
-```html
-<div>
-  <textarea
-    autofocus="true"
-    placeholder="..."
-    value="I am a multiple input">
-  </textarea>
-</div>
-```
diff --git a/_drafts/v-0.10/references/components/video.md b/_drafts/v-0.10/references/components/video.md
deleted file mode 100644
index fa4384e..0000000
--- a/_drafts/v-0.10/references/components/video.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: <video>
-type: references
-order: 2.14
-version: 0.10
----
-
-# &lt;video&gt;
-<span class="weex-version">v0.6.1+</span>
-
-The video component can be used to embed video content in a weex page.
-
-**example**
-
-```html
-<template>
-  <div>
-    <text>Big Eater!</text>
-    <video onstart='onstart' onpause='onpause' onfinish='onfinish' onfail='onfail'
-           auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video>
-</div>
-
-  </div>
-</template>
-
-<script>
-  module.exports ={
-    data: {
-      src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
-    },
-    methods:{
-      onstart:function(e){
-        console.log('onstart');
-        console.log(e);
-      },
-      onpause:function(e){
-        console.log('onpause');
-      },
-      onfinish:function(e){
-        console.log('onfinish');
-      },
-      onfail:function(e){
-        console.log('onfail');
-      },
-    }
-  }
-</script>
-```
-
-[try it](http://dotwe.org/97938570cddf76c792a1a5f9542253b1)
-
-## Child Components
-* text is the only valid type of child component.
-
-## Attributes
-
-* src: &lt;string&gt; The URL of the video to embed.
-* play-status: &lt;boolean&gt; play | pause. Use it to control video's play/pause status. Default value is pause.
-* auto-play: &lt;boolean&gt; true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-common styles: check out [common styles for components](../common-style.html)
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-## Events
-* onstart: triggered when playback state is Playing.
-* onpause: triggered when playback state is Paused.
-* onfinish: triggered when playback state is Finished.
-* onfail: triggered when playback state is Failed.
diff --git a/_drafts/v-0.10/references/components/web.md b/_drafts/v-0.10/references/components/web.md
deleted file mode 100644
index 89d47c7..0000000
--- a/_drafts/v-0.10/references/components/web.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: <web>
-type: references
-order: 2.15
-version: 0.10
----
-
-# &lt;web&gt;
-<span class="weex-version">v0.5+</span>
-
-Use web component to display any web content in the weex page. The `src`attribute is used to specify a special source. You also can use `webview` module to control some web operation such as goBack,goForward and reload. see [webview module](https://alibaba.github.io/weex/doc/modules/webview.html).For example,You can use web component and webview module to assemble a browser.
-
-## Child Components
-
-This component supports no child components.
-
-## Attributes
-
-**src**(string): this attribute specifies the page source to load.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-
-**width**(float): the width of the component, default value is 0. This style must be specified.
-
-**height**(float): the height of the component, default value is 0. This style must be specifed.
-
-
-### common styles
-
-check out the [common styles](../common-attrs.html).
-
-support flexbox related styles
-support box model related styles
-support `position` related styles
-
-## Events
-
-**pagestart**: sent after the web component starts loading a page.
-**pagefinish**: sent after the web component finishes loading a page.
-**error**: sent if the web component failed to load a page.
-
-### common events
-
-support `appear` / `disappear` event.
-
-Check out [common events](../common-event.html)
-
-### Notes
-not support `click` event. 
-
-## Example
-
-We use a simple Browser Demo to show how to use web component and webview module. Check out [webview module](../modules/webview.html).
-
-
-```html
-<template>
-  <div class="browserStyle">
-    <div style="flex-direction: row">
-      <input id="urlInput" type="url"  autofocus="false"  placeholder="..."  class="textStyle" value="{{input_text}}" oninput="input">
-      </input>
-    </div>
-    <div style="flex-direction: row">
-      <wxc-button value="LoadURL"  class="buttonSytle" size="small" onclick="loadURL"></wxc-button>
-      <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button>
-      <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button>
-    </div>
-    <div>
-      <web id="webview" src="{{src}}" class="webStyle"></web>
-    </div>
-  </div>
-</template>
-
-<style>
-
-  .browserStyle
-  {
-    width:600;
-    height: 825;
-    background-color:#778899 ;
-  }
-
-  .textStyle
-  {
-    width:600;
-    height: 50;
-    background-color: #D3D3D3;
-  }
-
-  .buttonSytle
-  {
-    width:180;
-    height: 50;
-    font-size: 12;
-    background-color: #D3D3D3;
-    margin:10;
-    padding-left: 5;
-    padding-right: 5;
-  }
-
-  .webStyle
-  {
-    width:600;
-    height: 700;
-    background-color: #8B0000;
-  }
-
-</style>
-
-<script>
-
-  var web_module = require('@weex-module/webview');
-
-  module.exports = {
-    data: {
-      src : "https://h5.m.taobao.com",
-      input_text:"https://www.tmall.com"
-    },
-
-    methods: {
-
-      loadURL: function (e) {
-        var web_element = this.$el('webview');
-        var input = this.$el("urlInput");
-        this.src = this.input_text;
-        web_module.reload(web_element);
-      },
-
-      backforward: function (e) {
-        var web_element = this.$el('webview');
-        web_module.goBack(web_element);
-        this.input_text = web_element.attr.src;
-      },
-
-      forward: function (e) {
-        var web_element = this.$el('webview');
-        web_module.goForward(web_element);
-        this.input_text = web_element.attr.src;
-      },
-      input:function (e) {
-        var input = this.$el("urlInput");
-        this.input_text = input.attr.value;
-      }
-
-    }
-  }
-</script>
-```
-
-[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4)
diff --git a/_drafts/v-0.10/references/components/wxc-navpage.md b/_drafts/v-0.10/references/components/wxc-navpage.md
deleted file mode 100644
index 0ae7eba..0000000
--- a/_drafts/v-0.10/references/components/wxc-navpage.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: <wxc-navpage>
-type: references
-order: 2.16
-version: 0.10
----
-
-# &lt;wxc-navpage&gt;
-
-### Summary
-
-The "wxc-navpage" tag implements a specialized component that contains a navbar at the top of the window and an embed content page. You can customize the navbar as you like. In addition, you can use `navigator` module to control the page jump, see [navigator module](../modules/navigator.html).
-
-### Child Components
-
-This type of component supports all kinds of weex component as its child components.
-
-### Attributes
-
-- `height`: &lt;length&gt; The height of the navbar. Default value is 88.
-- `background-color`: &lt;color&gt;The backgroudColor of the navbar. Default value is `white`.
-- `title`: &lt;string&gt; The title of the navbar.
-- `title-color`: &lt;color&gt;The color of the navbar title. Default value is `black`.
-- `left-item-title`: &lt;string&gt; The title of the leftItem.
--  `left-item-color`: &lt;color&gt; The color of the leftItem title. Default value is `black`.
-- `right-item-title`: &lt;string&gt; The title of the rightItem.
--  `right-item-color`: &lt;color&gt; The color of the rightItem title. Default value is `black`.
-- `left-item-src`: &lt;string&gt; The imageURL of the leftItem you want to set.
-- `right-item-src`: &lt;string&gt; The imageURL of the rightItem you want to set.
-
-Other attributes please check out the [common attributes](../references/common-attrs.html).
-
-### Styles
-
-**common styles**: check out the [common styles](../references/common-attrs.html)
-
-- support flexbox related styles
-- support box model related styles
-- support ``position`` related styles
-- support ``opacity``, ``background-color`` etc.
-
-### Events
-
-- `naviBar.leftItem.click`: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.
-- `naviBar.rightItem.click`: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
-
-**common events**: check out the [common events](../references/common-event.html)
-
-- support `click` event. Check out [common events](../references/common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
-
-### Example
-
-```html
-<template>
-  <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
-      <content> ...</content>
-  </wxc-navpage>
-</template>
-<script>
-  require('weex-components');
-  module.exports = {
-    created: function() {
-        this.$on('naviBar.rightItem.click',function(e){
-           //handle your click event here.
-        });
-
-        this.$on('naviBar.leftItem.click',function(e){
-          //handle your click event here.
-        });
-    }
-  }
-</script>
-```
diff --git a/_drafts/v-0.10/references/components/wxc-tabbar.md b/_drafts/v-0.10/references/components/wxc-tabbar.md
deleted file mode 100644
index 944b06d..0000000
--- a/_drafts/v-0.10/references/components/wxc-tabbar.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: <wxc-tabbar>
-type: references
-order: 2.17
-version: 0.10
----
-
-# &lt;wxc-tabbar&gt;
-
-The `wxc-tabbar` is a custom component, which belongs to the `weex-components` node package, implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for switching between different tab pages.
-
-Usage: You can use this component by a `require` statement, `require('weex-components');`, in the script tag. e.g.
-
-```html
-<template>
-  <div style="flex-direction: column;">
-    <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
-  </div>
-</template>
-
-<script>
-  require('weex-components');
-  // Other javascript statements.
-</script>
-```
-
-Before requiring `weex-components'`, you need to specify `weex-components` dependency in your project's package.json file. e.g.
-
-```json
-"dependencies": {
-  "weex-components": "^0.2.0"
-}
-```
-
-## Child Components
-
-`wxc-tabbar` has no child components.
-
-
-## Attributes
-
-* `selected-index` : &lt;number&gt; default value is 0
-* `selected-color`: &lt;color&gt; The color of the title when it is selected. Default is red color.
-* `unselected-color`: &lt;color&gt; The color of the title when it is unselected. Default is black color.
-* `tab-items` This attribute accepts an array of `tabitem` objects, each of which corresponds to the tab pages. And the order of the items equals to the order of the tab pages onscreen. You can configure the appearance of tabbar by setting the tabitem object's properties. Each tabitem properties are listed as below:
-  * `index`: &lt;integer&gt; This attribute is required, and it specifies the order of the item.
-  * `title`: &lt;string&gt; The item’s title. and it is optional. The tile will not be displayed if empty or not provided.
-  * `titleColor`: &lt;color&gt;The item’s titleColor. Default is black color.
-  * `image`: &lt;string&gt;The icon displayed when the tabitem is unselected. The image will not be displayed if empty or not provided.
-  * `selectedImage` : &lt;string&gt;The icon displayed when the tabitem is selected. The icon will not be displayed if empty or not provided.
-  * `src` : &lt;string&gt; The weex page for the tab page.
-  * `visibility`: &lt;string&gt;visible | hidden. This attribute specifies display status of the tab page. Default value is visible.
-
-Other attributes please check out the [common attributes](../common-attrs.html).
-
-## Styles
-common styles: check out [common styles](../common-style.html) for components
-
-* support flexbox related styles
-* support box model related styles
-* support position related styles
-* support opacity, background-color etc.
-
-## Events
-* `tabBar.onClick`: triggered when the tabitem is selected. You need to register the observer in ready or create block.
-e.g.
-
-
-```html
-<template&gt;
-  <div style="flex-direction: column;"&gt;
-    <wxc-tabbar tab-items = {{tabItems}}&gt;</wxc-tabbar&gt;
-  </div&gt;
-</template&gt;
-
-<script>
-  require('weex-components');
-  module.exports = {
-    data: {
-      },
-    methods: {
-      ready: function (e) {
-        var vm = this;
-        vm.$on('tabBar.onClick',function(e){
-          var index = e.detail.index;
-        });
-      },
-    }
-  }
-</script>
-```
-
-## Example
-You should checkout the playground's `tabbar` example.
diff --git a/_drafts/v-0.10/references/gesture.md b/_drafts/v-0.10/references/gesture.md
deleted file mode 100644
index fc41fd4..0000000
--- a/_drafts/v-0.10/references/gesture.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Gesture
-type: references
-order: 1.4
-version: 0.10
----
-
-# Gesture
-
-> Experiment Feature
-
-Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set `on` attributes on a node to listen to gesture.
-
-## Type
-For now, there are four types of gestures:
-
-* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture:
-	* `touchstart` will be fired when a touch point is placed on the touch surface.
-	* `touchmove` will be fired when a touch point is moved along the touch surface.
-	* `touchend` will be fired when a touch point is removed from the touch surface.
-* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch.
-	* `panstart`
-	* `panmove`
-	* `panend`
-* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture.
-* **LongPress**. Swipe is fired when a touch point is held for 500 ms or more.
-
-The Touch gesture and Pan is very close to each other, with following features hold:
-
-* **Touch**. Not sampled, accuracy, but slow.
-* **Pan**. Sampled, fast, less accuracy.
-
-Users may choose their gesture according to their situation.
-
-## Properties
-The following properties can be used in gesture callback:
-
-* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`.
-* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture. 
-
-### changedTouches
-
-`changedTouches` is an array, with the following properties in its children:
-
-* `identifier`. A unique identifier for a touch pointer.
-* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document. 
-* `pageY`. The Y coordinate of the touch pointer relative to the top of the document.
-* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
-* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
-
-## Constrain
-Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting. 
-
-## How to use
-
-Example:
-
-```html
-<template>
-	<div ontouchstart="handleTouchstart"></div>
-</template>
-
-<script>
-module.exports = {
-	methods: {
-		handleTouchstart: function(eventProperties) {
-			// handling with the Event Properties
-		}
-	}
-}
-</script>
-```
-
-With the code above, a `touchstart` event will be fired when a touch point is placed on the touch surface.
diff --git a/_drafts/v-0.10/references/images/css-boxmodel.png b/_drafts/v-0.10/references/images/css-boxmodel.png
deleted file mode 100644
index a2063e2..0000000
--- a/_drafts/v-0.10/references/images/css-boxmodel.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/css-flexbox-align.jpg b/_drafts/v-0.10/references/images/css-flexbox-align.jpg
deleted file mode 100644
index 8a7f731..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-align.jpg
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/css-flexbox-justify.svg b/_drafts/v-0.10/references/images/css-flexbox-justify.svg
deleted file mode 100644
index 33e742b..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-justify.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
-	<defs>
-		<pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
-			<rect x='0' y='0' width='10' height='10' fill='#eee' />
-			<rect x='10' y='10' width='10' height='10' fill='#eee' />
-			<rect x='0' y='10' width='10' height='10' fill='#ccc' />
-			<rect x='10' y='0' width='10' height='10' fill='#ccc' />
-		</pattern>
-	</defs>
-	<style>
-		text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
-		rect { stroke-width: 2px; stroke: #888; }
-		g > rect:nth-child(1) { fill: #888 }
-		g > rect:nth-child(2) { fill: #fcc; }
-		g > rect:nth-child(3) { fill: #cfc; }
-		g > rect:nth-child(4) { fill: #ccf; }
-		g > rect:nth-child(5) { fill: transparent; }
-	</style>
-	<g transform="translate(2,2)">
-		<rect x='0' y='0' width='500' height='50' />
-		<rect x='0' y='0' width='100' height='50' />
-		<rect x='100' y='0' width='80' height='50' />
-		<rect x='180' y='0' width='200' height='50' />
-		<rect x='0' y='0' width='500' height='50' />
-		<text x='250' y='38'>flex-start</text>
-	</g>
-	<g transform="translate(2,56)">
-		<rect x='0' y='0' width='500' height='50' />
-		<rect x='120' y='0' width='100' height='50' />
-		<rect x='220' y='0' width='80' height='50' />
-		<rect x='300' y='0' width='200' height='50' />
-		<rect x='0' y='0' width='500' height='50' />
-		<text x='250' y='38'>flex-end</text>
-	</g>
-	<g transform="translate(2,110)">
-		<rect x='0' y='0' width='500' height='50' />
-		<rect x='60' y='0' width='100' height='50' />
-		<rect x='160' y='0' width='80' height='50' />
-		<rect x='240' y='0' width='200' height='50' />
-		<rect x='0' y='0' width='500' height='50' />
-		<text x='250' y='38'>center</text>
-	</g>
-	<g transform="translate(2,164)">
-		<rect x='0' y='0' width='500' height='50' />
-		<rect x='0' y='0' width='100' height='50' />
-		<rect x='160' y='0' width='80' height='50' />
-		<rect x='300' y='0' width='200' height='50' />
-		<rect x='0' y='0' width='500' height='50' />
-		<text x='250' y='38'>space-between</text>
-	</g>
-	<g transform="translate(2,218)">
-		<rect x='0' y='0' width='500' height='50' />
-		<rect x='20' y='0' width='100' height='50' />
-		<rect x='160' y='0' width='80' height='50' />
-		<rect x='280' y='0' width='200' height='50' />
-		<rect x='0' y='0' width='500' height='50' />
-		<text x='250' y='38'>space-around</text>
-	</g>
-</svg>
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/images/css-flexbox-sample.png b/_drafts/v-0.10/references/images/css-flexbox-sample.png
deleted file mode 100644
index 0f1236d..0000000
--- a/_drafts/v-0.10/references/images/css-flexbox-sample.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/images/nav.png b/_drafts/v-0.10/references/images/nav.png
deleted file mode 100644
index 7081ca7..0000000
--- a/_drafts/v-0.10/references/images/nav.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v-0.10/references/index.md b/_drafts/v-0.10/references/index.md
deleted file mode 100644
index d59d654..0000000
--- a/_drafts/v-0.10/references/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Bootstrap
-type: references
-order: 1
-has_chapter_content: false
-chapter_title: Common Options
-version: 0.10
----
-
-# Bootstrap
-
-Besides its default meaning, `<script>` tag supports two more configuration with its `type` property *in the top level component of a page*.
-
-* `type="data"`: For initial data configuration, the data defined here will overwrite the data definition in the `<script>`.
-* `type="config"`: For configuration definition.
-
-```html
-<script type="data">
-  /* (optional) the definition of initial data */
-</script>
-
-<script type="config">
-  /* (optional) the definition of configuration */
-</script>
-```
-
-## Initial data definition
-
-Sometimes, it is hard to maintain huge data structure in the default `<script>` tag. So Weex allows us to have a `<script type="data">` tag to define initial data. The data defined in here will totally replace the data defined in the default `<script>` tag.
-
-here is an example:
-
-```html
-<script type="data">
-{
-  title: 'Alibaba',
-  date: new Date().toLocaleString()
-}
-</script>
-```
-
-## script configuration
-
-Weex also allows us to do some configuration with a `<script type="config">`, So far, we only support the `downgrade` configs.
-
-- `downgrade.osVersion`
-- `downgrade.appVersion`
-- `downgrade.weexVersion`
-- `downgrade.deviceModel`
diff --git a/_drafts/v-0.10/references/modules/animation.md b/_drafts/v-0.10/references/modules/animation.md
deleted file mode 100644
index 4b46564..0000000
--- a/_drafts/v-0.10/references/modules/animation.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: animation
-type: references
-order: 3.1
-version: 0.10
----
-
-# animation
-
-Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the `animation` module to perform animation on components. A animation can perform a series of simple transformations  (position, size, rotation, background color, and opacity) on the component. So, if you have a `image` component, you can move, rotate, grow, or shrink it.
-
-## API
-### transition(node, options, callback)
-
-[example](http://dotwe.org/5be74019d5e510fa95c5dedec24f7ce5)
-
-#### Arguments
-##### node    
-
-**type:** node
-
-**position:** An element that will be animated, normally you can get this by calling `this.$el(id)`.   
-
-##### options    
-
-**type:** object   
-
-**position:** Transition options.    
-- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.    
-- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.   
-- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:    
-
-|name|description|example|
-|:--|:--|:--|
-|`linear`|Specifies a transition effect with the same speed from start to end|[example](http://dotwe.org/d71491ded2bede32df3e8b44b53d5e4f)|
-|`ease-in`|Specifies a transition effect with a slow start|[example](http://dotwe.org/23b104f833039f263957481f2e2c40c9)|
-|`ease-out`|Specifies a transition effect with a slow end|[example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996)|
-|`ease-in-out`|Specifies a transition effect with a slow start and end|[example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3)|
-|`cubic-bezier(x1, y1, x2, y2)`|Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).|[example](http://dotwe.org/95d8f15d0014c31d3a1d15728313f2a5)|    
-
-- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:        
-
-| name | description | value type | default value |example|
-| :--- | :--- | :--- | :--- |:---|
-|width|The width applied to the component after the animation finished.|length|none|[example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90)|    
-|height|The height applied to the component after the animation finished.|length|none|[example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5)|    
-|backgroundColor|The background color applied to the component after the animation finished.|string|none|[example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712)|
-|opacity|The opacity applied to the component after the animation finished.|number between 0 to 1|`1`|[example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b)|
-|transformOrigin|The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent|`x-axis y-axis`|`center center`|[example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c)|
-|transform|Transform function to be applied to the element. The properties in the following table are supported|object|none|[example](http://dotwe.org/cfc0388441f5a53a73335885006c13e7)|
-
-properties of `transform`:    
-
-| name | description | value type | default value |example|
-| :--- | :--- | :--- | :--- |:---|
-|translate/translateX/translateY|Specifies the location of which the element will be translated.|pixel or percent|none|[example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003)|
-|rotate|Specifies the angle of which the element will be rotated, the unit is degree.|number|none|[example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d)|
-|scale/scaleX/scaleY|Stretch or shrink the element.|number|none|[example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8)|    
-
-#### callback    
-**type:** function
-
-**position:** Callback which is called after the completion of transition.
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/clipboard.md b/_drafts/v-0.10/references/modules/clipboard.md
deleted file mode 100644
index d0f45e7..0000000
--- a/_drafts/v-0.10/references/modules/clipboard.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: clipboard
-type: references
-order: 3.2
-version: 0.10
----
-
-# clipboard
-<span class="weex-version">v0.8+ (developing)</span>
-
-clipboard allows you to `getString()` or `setString()` from the system clipboard.
-
-Not long ago, We're still suffering from such a situation that we got a verification code sent by SMS, and we had no way to get the code from the SMS text but to typed it by our hands. How frustrated it is! But now you can enable your app to get the code from the system clipboard by calling  `clipboard.getString()` .
-
-## Caution
-
-* only support text.
-* only works on Android and iOS. NOT works for html5, for web security reason.
-
-## API
-
-### getString(callback)
-
-reads from clipboard.
-
-##### Arguments
-
-`callback(function)`: the callback function after executing this action. `data` is the return value.
-
-Example
-
-```js
-var clipboard = require('@weex-module/clipboard');
-clipboard.getString(function(ret) {
-  // callback. 'ret' is an object that contains 'result' and 'data'.
-  // use 'ret.data' to fetch the value.
-  console.log("read from clipboard is " + ret.data);
-});
-
-```
-### setString(text)
-
-sets the text to clipboard, having the same effect as copying manually.
-
-##### Arguments
-
-`text(string)`: the text copied to clipboard.
-Example
-
-```js
-var clipboard = require('@weex-module/clipboard');
-clipboard.setString("SomeStringHere");
-```
diff --git a/_drafts/v-0.10/references/modules/dom.md b/_drafts/v-0.10/references/modules/dom.md
deleted file mode 100644
index 948abf0..0000000
--- a/_drafts/v-0.10/references/modules/dom.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: dom
-type: references
-order: 3.3
-version: 0.10
----
-
-# dom
-
-## Summary
-
-A series of dom apis that sending virtual-dom's messages to the native renderer to update the dom tree. The only API for developers to use in a `.we` file is `scrollToElement` <del>which you can use by calling the `$scrollTo` method</del>. Other APIs mentioned on this page should only be used through the native renderer in the `callNative` process.
-
-## API
-
-### scrollToElement(node, options)
-
-Scroll the page to the specified node. This API should only be used on the element in the `scroller` or `list` component.
-
-<del>This API can be used by calling the VM's method `$scrollTo` **(deprecated)**.</del> You can use `require('@weex-module/dom').scrollToElement` to call this API in your `.we` file.
-
-#### Arguments
-
-* `node`*(Node)*: an element that scrolled into the view.
-* `options`*(object)*: some options.
-  * `offset`*(number)*: An offset to the visible position, default is `0`.
-
-#### Example
-
-```javascript
-var dom = require('@weex-module/dom');
-dom.scrollToElement(this.$el('someId'), {offset: 10});
-```
-
-### createBody(element)
-
-Create the body for the whole dom tree. Element type should only be the ones that can be used as roots (`div`, `scroller` and `list`).
-
-#### Arguments
-
-* `element`*(object)*: a object that specified the body node info like ref, type, children, etc.
-
-### addElement(parentNode, element, index)
-
-Add a element into the dom tree.
-
-#### Arguments
-
-* `parentNode`*(Node)*: specify the element's parent node.
-* `element`*(object)*: a object that specified the config info for the node to be added.
-* `index`*(number)*: insert the element to the specified position.
-
-### removeElement(node)
-
-Remove a node in the dom tree.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be removed.
-
-### moveElement(node, parentNode, index)
-
-Move a exsited node into another parent (or the same parent) before the specified position.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be moved.
-* `parentNode`*(Node)*: the parent node to move into.
-* `index`*(number)*:: according to the specified position index, will the node be inserted into.
-
-### addEvent(node, type)
-
-Inform the renderer that there are listeners for a specified event type.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be listened on.
-* `type`*(string)*: which type of events the node should be listened for.
-
-### removeEvent(node, type)
-
-Remove event listeners on the specified node for the specified event type.
-
-#### Arguments
-
-* `node`*(Node)*: on which node should the listeners to be removed
-* `type`*(string)*: specify the event type.
-
-### updateAttrs(node, attr)
-
-Update attrbutes of the specified node.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be updated.
-* `attr`*(object)*: the attributes object with the attribute items to be updated.
-
-### updateStyle(node, style)
-
-Update styles of the specified node.
-
-#### Arguments
-
-* `node`*(Node)*: the node to be updated.
-* `style`*(object)*: the style object with the style rules to be updated.
-
-### createFinish()
-
-Notify native renders that the series of messages for updating the native dom tree have reached a end.
-
-### refreshFinish()
-
-Notify native renders that the series of messages for refreshing a native dom tree have reached a end.
-
diff --git a/_drafts/v-0.10/references/modules/globalevent.md b/_drafts/v-0.10/references/modules/globalevent.md
deleted file mode 100644
index 0db8c48..0000000
--- a/_drafts/v-0.10/references/modules/globalevent.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: globalEvent
-type: references
-order: 3.10
-version: 0.10
----
-
-# globalEvent
-<span class="weex-version">v0.8+ (developing)</span>
-
-## Summary
-
-`globalEvent` are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that requires additional APIs to work with.
-
-You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`.
-
-*AUCTION* 
-- Only instance level is not application level . 
-
-## How to make your Module support global events
-API development is complete, when the event needs to be sent, the need through the following methods:
-
-```javascript
-/**
-  * 
-  * @param eventName eventName
-  * @param params event params
-  */
-instance.fireGlobalEventCallback(eventName,params);
-```
-
-How to dispatch a global event in a weex-html5 component or module ? Just dispatch the event on the document element:
-
-```javascript
-var evt = new Event('some-type')
-evt.data = { foo: 'bar' }
-document.dispatchEvent(evt)
-```
-
-### Example
-
-#### Android
-
-```java
-Map<String,Object> params=new HashMap<>();
-params.put("key","value");
-mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
-```
-#### iOS
-
-```Objective-C
-[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
-```
-
-## API
-
-### addEventListener(String eventName, String callback)
-
-register global event.
-
-#### Arguments
-
-* `eventName`*(string)*: The name of the event you want to listen to.  
-* `callback`*(function)*: the callback function after executing this action.  
-
-#### Example
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.addEventListener("geolocation", function (e) {
-	console.log("get geolocation")
-	});
-```
-
-### removeEventListener(String eventName)
-
-remove global event 
-
-#### Arguments
-
-* `eventName`*(string)*: You no longer need to listen for event names.
-
-#### Example
-
-```javascript
-var globalEvent = require('@weex-module/globalEvent');
-globalEvent.removeEventListener("geolocation");
-```
-
diff --git a/_drafts/v-0.10/references/modules/index.md b/_drafts/v-0.10/references/modules/index.md
deleted file mode 100644
index 2a094ca..0000000
--- a/_drafts/v-0.10/references/modules/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Built-in Modules
-type: references
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# Built-in Modules
-
-## How to use
-
-You can use a simply way like `require('@weex-module/name')` to access the apis of module. e.g.
-
-```html
-<script>
-var dom = require('@weex-module/dom')
-
-module.exports = {
-  data: {},
-  created: function () {
-    dom.scrollToElement(this.$el('someIdForElement'), {
-    offset: 0
-    })
-  }
-}
-</script>
-```
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/modal.md b/_drafts/v-0.10/references/modules/modal.md
deleted file mode 100644
index 2ebad15..0000000
--- a/_drafts/v-0.10/references/modules/modal.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: modal
-type: references
-order: 3.4
-version: 0.10
----
-
-# modal  
-
-Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.    
-
-## API    
-### toast(options)   
-
-A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.    
-
-#### Arguments
-- `options` (object): toast options.
- - `message` (string): the text message that the toast shows.
- - `duration` (number): the duration(seconds) that the toast shows.   
-
-**Example:**
-
-```html
-<template>
-  <div style="height: 200px; width: 400px; background-color: #00bfff;
-    justify-content: center; align-items: center" onclick="{{perform}}">
-    <text style="font-size: 60px; color: #ffffff">Toast</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      perform: function () {
-        var modal = require('@weex-module/modal');
-        modal.toast({
-          'message': 'I am a toast',
-          'duration': 3
-        });
-      }
-    }
-  }
-</script>
-```    
-### alert(options, callback)    
-
-An alert box is often used if you want to make sure information comes through to the user.    
-When an alert box pops up, the user will have to click "OK" to proceed.    
-
-#### Arguments  
-
-- `options` (object): alert box options.
- - `message` (string): the text message that the alert shows.
- - `okTitle` (string): the text of positive button, default is 'OK'.
- - `callback` (function): callback when complete.    
-  This method has a callback function whose arguments will be:    
-- `result` (string): the title text of the confirm button that clicked by user.
-
-**Example:**
-
-```html
-<template>
-  <div>
-    <div style="height: 200px; width: 400px; background-color: #00bfff;
-  justify-content: center; align-items: center" onclick="{{perform}}">
-      <text style="font-size: 60px; color: #ffffff">Alert</text>
-    </div>
-    <text>{{params}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      params: ''
-    },
-    methods: {
-      perform: function () {
-        var modal = require('@weex-module/modal');
-        var self = this;
-        modal.alert({
-          'message': 'I am alert message',
-          'okTitle' : 'YES'
-        }, function (result) {
-          self.params = String(result)
-        });
-      }
-    }
-  }
-</script>
-```
-
-### confirm(options, callback)    
-A confirm box is often used if you want the user to verify or accept something.    
-
-When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.    
-
-#### Arguments
-- `options` (object): confirm box options.
-  - `message` (string): the message that the confirm shows.
-  - `okTitle` (string): the title of confirm button, default is 'OK'.
-  - `cancelTitle` (string): the title of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.
-
-This method has a callback function whose arguments will be:    
-- `result`(string): the title text of the button that clicked by user.    
-**Example:**
-
-```html
-<template>
-  <div>
-    <div style="height: 200px; width: 400px; background-color: #00bfff;
-  justify-content: center; align-items: center" onclick="{{perform}}">
-      <text style="font-size: 60px; color: #ffffff">Confirm</text>
-    </div>
-    <text>{{params}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      params: ''
-    },
-    methods: {
-      perform: function () {
-        var modal = require('@weex-module/modal');
-        var self = this;
-        modal.confirm({
-          'message': 'I have read and accept the terms.',
-          'okTitle' : 'YES',
-          'cancelTitle' : 'NO'
-        }, function (e) {
-          self.params = String(e)
-        });
-      }
-    }
-  }
-</script>
-```    
-
-### prompt(options, callback)    
-
-A prompt box is often used if you want the user to input a value before entering a page.    
-When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.    
-
-#### Arguments    
-- `options` (object): some options.
-  - `message` (string): the message that the prompt shows.
-  - `okTitle` (string): the title text of confirm button, default is 'OK'.
-  - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.     
-  This method has a callback function whose arguments will be:    
-- `ret` (object): the argument will be a object, which has attributes `result` and `data`,  like `{ result: 'OK', data: 'hello world' }`
-  - `result` (string): the title of the button that clicked by user.
-  - `data` (string): the value of the text that entered by user.     
-
-**Example:**    
-
-```html
-<template>
-  <div>
-    <div style="height: 200px; width: 400px; background-color: #00bfff;
-  justify-content: center; align-items: center" onclick="{{perform}}">
-      <text style="font-size: 60px; color: #ffffff">Prompt</text>
-    </div>
-    <text>{{params}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      params: ''
-    },
-    methods: {
-      perform: function () {
-        var modal = require('@weex-module/modal');
-        var self = this;
-        modal.prompt({
-          'message': 'I am a prompt',
-          'okTitle' : 'YES',
-          'cancelTitle' : 'NO'
-        }, function (e) {
-          self.params = JSON.stringify(e)
-        });
-      }
-    }
-  }
-</script>
-```
\ No newline at end of file
diff --git a/_drafts/v-0.10/references/modules/navigator.md b/_drafts/v-0.10/references/modules/navigator.md
deleted file mode 100644
index fe4442c..0000000
--- a/_drafts/v-0.10/references/modules/navigator.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: navigator
-type: references
-order: 3.5
-version: 0.10
----
-
-# Navigator 
-<span class="weex-version">v0.6.1+</span>
-
-As it's known to all that, we can navigate back and forth in the web browser using the navigation bar.
-And The navigator module mimics the same behaviors in the iOS/Android application. Without such an ability, We will have to stay in the same page forever, so it is very important. Besides the navigation, the module can let us to specify whether to apply animation or not during the transition.
-
-**example**
-
-```html
-<template>
-  <div class="div">
-    <text class="text" onclick="onItemClick">click me! {{message}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports ={
-    data:{
-      message:""
-    },
-    methods:{
-      onItemClick:function(e){
-
-        var navigator = require('@weex-module/navigator');
-        var params = {'url':'http://weex.alibaba-inc.com/raw/html5/3d2996653c1d129603f9c935b895e998.js','animated':true};
-        navigator.push(params, function(e) {
-          console.log('i am the callback.')
-        });
-      }
-    }
-  }
-</script>
-<style>
-  .div {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 750;
-    height: 90;
-    padding-left:30;
-    padding-right:30;
-
-    border-bottom-width: 1;
-    border-style: solid;
-    border-color: #dddddd;
-  }
-  .text{
-    width: 750;
-    height: 90;
-  }
-</style>
-```
-
-[try it](http://dotwe.org/004a5e3f26290cf5b9ce03806a574633)
-
-## API
-### push(options, callback)
-
-push a weex page onto the navigator stack, you can specify whether apply animation when pushing. And you can also specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
-  * url(stirng): The URL of the weex page to push.
-  * animated(string): true, if the weex page is push through animation, otherwise, false. Default value is true.
-
-* callback(object): the callback function to be called after executing this action.
-
-```javascript
-var params = {
-  'url': 'navigator-demo.js',
-  'animated' : 'true',
-}
-var navigator = require('@weex-module/navigator');
-navigator.push(params, function(e) {
-    //callback
-});
-```
-
-### pop(options, callback)
-pop a weex page onto the navigator stack, you can specify whether apply animation when popping. And you can also specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
-  * animated(string): true if the weex page is pop through animation; otherwise, false. Default value is true.
-* callback(object): the callback function after executing this action.
-
-**example**
-
-```javascript
-var params = {
-  'animated' : 'true',
-}
-var navigator = require('@weex-module/navigator');
-navigator.pop(params, function(e) {
-    //callback
-});
-```
-
-### close(options, callback)
-close a weex page, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* options(object): some options.
-  * animated(string): true, should animation be applied when closing. Default value is true.
-* callback(object): the callback function after executing this action.
-
-### setNavBarBackgroundColor(params, callback)
-set color for the navigation bar's background color, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): some parameters.
-  * backgroundColor(string): it's a required param, no default value provided.
-* callback(object): the callback function after executing this action.
-
-
-### setNavBarLeftItem(params,callback)
-set left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will only be used when title is not present.
-  * title(string): the title for the bar button.
-  * titleColor (string): the title color.
-  * icon (string): the icon for the bar button, should be an an downloadable image.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarLeftItem(callback)
-clear left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* callback(object): the callback function after executing this action.
-
-### setNavBarRightItem(params,callback)
-set the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will be used when title is not present.
-  * title(string): the title for the bar button.
-  * titleColor (string): the title color.
-  * icon (string): the icon for the bar button, should be an an downloadable image.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarRightItem(params, callback)
-clear the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-**parameters**
-
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-
-### setNavBarMoreItem(params,callback)
-set the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-Actually, the function does nothing.
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-### clearNavBarMoreItem(params, callback)
-clear the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-Actually, the function does nothing.
-* params(object): optional.
-* callback(object): the callback function after executing this action.
-
-### setNavBarTitle(params,callback)
-set the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): parameters can not be empty.
-  * title(string): the title for the bar button.
-* callback(object): the callback function after executing this action.
-
-
-### clearNavBarTitle(params,callback)
-clear the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
-
-**parameters**
-
-* params(object): optional.
-* callback(object): the callback function after executing this action.
diff --git a/_drafts/v-0.10/references/modules/storage.md b/_drafts/v-0.10/references/modules/storage.md
deleted file mode 100644
index 9c62109..0000000
--- a/_drafts/v-0.10/references/modules/storage.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: storage
-type: references
-order: 3.6
-version: 0.10
----
-
-# storage
-<span class="weex-version">v0.7+</span>
-
-## Summary
-
-`storage` is a series of apis, allowing you to for example add, modify or delete stored data items.
-
-## API
-
-### setItem(key, value, callback)
-
-When passed a key name and value, will add that key to the storage,
-or update that key's value if it already exists.
-
-#### Arguments
-
-* `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
-* `value`*(string)*: the name of the value you want to store."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.setItem('bar', 'bar-value', function(e) {
-  // callback.'e' is an object that contains 'result' and 'data'. e.result indicate whether `setItem` is succeed.
-  // e.data will return 'undefined' if success or 'invalid_param' if your key/value is ""/null.
-});
-```
-
-### getItem(key, callback)
-
-When passed a key name, will return that key's value.
-
-#### Arguments
-
-* `key`*(string)*:  the name of the key you want to retrieve the value of."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.getItem('foo', function(e) {
-  //callback.'e' is an object that contains 'result' and 'data'.
-  // use 'e.data' to fetch the value of the key,if not found,'undefined' will return.
-});
-```
-
-### removeItem(key, callback)
-
-When passed a key name, will remove that key from the storage.
-
-#### Arguments
-
-* `key`*(string)*:  the name of the key you want to remove."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.removeItem('foo', function(e) {
-  // callback. 'e' is an object that contains 'result' and 'data'.
-  // e.result will return 'success' or 'failed' according to the executing result.
-  // e.data will always return 'undefined' in this function if success.
-});
-```
-
-### length(callback)
-
-Returns an integer representing the number of data items stored in the Storage object.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.  
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.length(function(e) {
-  // callback. 'e' is an object that contains 'result' and 'data'.
-  //e.data will return that number.
-});
-```
-
-### getAllKeys(callback)
-
-Returns an array that contains all keys stored in Storage object.
-
-#### Arguments
-
-* `callback`*(object)*: the callback function after executing this action.  
-
-##### Example
-
-```javascript
-var storage = require('@weex-module/storage');
-storage.getAllKeys(function(e) {
-  // callback. 'e' is an object that contains 'result' and 'data'.
-  //e.data will return that array of keys.
-});
-```
diff --git a/_drafts/v-0.10/references/modules/stream.md b/_drafts/v-0.10/references/modules/stream.md
deleted file mode 100644
index 522e3b0..0000000
--- a/_drafts/v-0.10/references/modules/stream.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: stream
-type: references
-order: 3.7
-version: 0.10
----
-
-# stream
-
-A series of stream api. It provides a network request.
-
-## API
-
-### fetch(options, callback,progressCallback)
-
-Start a network request, use two callbacks to receive server's response data.
-
-**Arguments**
-
-* options(object): the request options, key value style dictionary.
-
-    * method(string): the HTTP method `GET` or `POST`.
-
-    * url(string): the request url.
-
-    * headers(string): the HTTP request headers.
-
-    * type(string): request type, 'json','text' or 'jsonp'(same as 'json' in native implementation)
-
-    * body(string): the HTTP body.
-
-* callback(function): A callback function whose argument is the response object of the request. Callback function will receive a `response` object.
-
-    * status(number): response status code.
-
-    * ok(boolean): true if status code is bewteen 200~299.
-
-    * statusText(string): status text
-
-    * data(string): response data. It's a object if request option is `json`/`jsonp`, or *(string)* in other type value.
-
-    * headers(object): response headers
-
-* progressCallback(function):  A progress callback. This callback will be invoked before request finished.
-
-    * readyState(number): Current request state.'1':request connection opened;'2':response headers received.;'3':response data is loading;
-
-    * status(number): response status code.
-
-    * length(number): bytes of data have received. You can read full length of response from 'headers'.
-
-    * statusText(string): status text.
-
-    * headers(object): response headers.
-
-### Example
-
-```html
-<template>
-  <div>
-    <text onclick="startStream">click here to start stream</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      startStream: function () {
-        var stream_module = require('@weex-module/stream');
-        stream_module.fetch({
-          method: 'GET',
-          url: "http://httpbin.org/get",
-          type:'json'
-        }, function(response) {
-          //finished response
-          console.log("all received:",response);
-        },function(response){
-          //progress response
-          console.log("current bytes received:",response.length);
-        });
-      }
-    }
-  }
-</script>
-```
-[Try it](http://dotwe.org/6e4ede64fdfe070b9696cc4cc3bdd086)
diff --git a/_drafts/v-0.10/references/modules/timer.md b/_drafts/v-0.10/references/modules/timer.md
deleted file mode 100644
index c82109d..0000000
--- a/_drafts/v-0.10/references/modules/timer.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Timer
-type: references
-order: 3.8
-version: 0.10
----
-
-# Timer
-
-Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
-Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.    
-
-## API
-
-All timeout or interval in this module are measured in milliseconds.    
-Also, timeout and interval should be a non-negative integer(the max of integer is 0x7FFFFFFF). If timeout or interval is negative, then it will be reset to zero, e.g. the task will be put in the task queue immediately.     
-
-### setTimeout(fn, timeout)    
-
-The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.    
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `timeout` (number): The number of milliseconds to wait before executing the function    
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.   
-
-### setInterval(fn, interval)    
-
-The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.  
-
-#### Arguments    
-
-- `fn` (function): The function that will be executed
-- `interval` (number): The intervals (in milliseconds) on how often to execute the function
-
-#### Return value    
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer  
-
-### clearTimeout(fnId)    
-
-The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.    
-
-#### Arguments    
-
-- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
-
-### clearInterval(fnId)
-
-The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.    
-
-#### Arguments
-
-- `fnId` (number): The fnId of the timer returned by the `setInterval()` method    
-
-[Try it](http://dotwe.org/996578e8f29b88d7d4fa01ab031fbbda)
diff --git a/_drafts/v-0.10/references/modules/webview.md b/_drafts/v-0.10/references/modules/webview.md
deleted file mode 100644
index 88c6f17..0000000
--- a/_drafts/v-0.10/references/modules/webview.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: webview
-type: references
-order: 3.9
-version: 0.10
----
-
-# webview
-
-A series of web operation api like `goBack`, `goForward`, and `reload`. 'webview' module used with the web component.
-
-## API
-
-### goBack(webElement)
-
-Loads the previous location in the history stack.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.goBack(webElement);
-```
-
-### goForward(webElement)
-
-Loads the next location in the history stack.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.goForward(webElement);
-```
-
-### reload(webElement)
-
-Reloads the current web page.
-
-**Arguments**
-
-* webElement(web): the element of the web component.
-
-#### Example
-
-```
-var webview = require('@weex-module/webview');
-var webElement = this.$el('webview');
-webview.reload(webElement.ref);
-```
-
-## Example
-
-```html
-<template>
-  <div class="browserStyle">
-    <div style="flex-direction: row">
-      <input id="urlInput" type="url"  autofocus="false"  placeholder="..."  class="textStyle" value="{{input_text}}" oninput="input">
-      </input>
-    </div>
-    <div style="flex-direction: row">
-      <wxc-button value="LoadURL"  class="buttonSytle" size="small" onclick="loadURL"></wxc-button>
-      <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button>
-      <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button>
-    </div>
-    <div>
-      <web id="webview" src="{{src}}" class="webStyle"></web>
-    </div>
-  </div>
-</template>
-
-<style>
-
-  .browserStyle
-  {
-    width:600;
-    height: 825;
-    background-color:#778899 ;
-  }
-
-  .textStyle
-  {
-    width:600;
-    height: 50;
-    background-color: #D3D3D3;
-  }
-
-  .buttonSytle
-  {
-    width:180;
-    height: 50;
-    font-size: 12;
-    background-color: #D3D3D3;
-    margin:10;
-    padding-left: 5;
-    padding-right: 5;
-  }
-
-  .webStyle
-  {
-    width:600;
-    height: 700;
-    background-color: #8B0000;
-  }
-
-</style>
-
-<script>
-
-  var web_module = require('@weex-module/webview');
-
-  module.exports = {
-    data: {
-      src : "https://h5.m.taobao.com",
-      input_text:"https://www.tmall.com"
-    },
-
-    methods: {
-
-      loadURL: function (e) {
-        var web_element = this.$el('webview');
-        var input = this.$el("urlInput");
-        this.src = this.input_text;
-        web_module.reload(web_element);
-      },
-
-      backforward: function (e) {
-        var web_element = this.$el('webview');
-        web_module.goBack(web_element);
-        this.input_text = web_element.attr.src;
-      },
-
-      forward: function (e) {
-        var web_element = this.$el('webview');
-        web_module.goForward(web_element);
-        this.input_text = web_element.attr.src;
-      },
-      input:function (e) {
-        var input = this.$el("urlInput");
-        this.input_text = input.attr.value;
-      }
-
-    }
-  }
-</script>
-```
-
-[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4)
-
-
diff --git a/_drafts/v-0.10/references/special-element.md b/_drafts/v-0.10/references/special-element.md
deleted file mode 100644
index 4a4d57e..0000000
--- a/_drafts/v-0.10/references/special-element.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Special Element
-type: references
-order: 1.10
-version: 0.10
----
-
-# Special Element
-
-## Content
-
-The element serves as content distribution outlet in a composed component template. The element itself will be replaced.
-
-alias: 'slot'.
-
-## Example
-
-As shown in the example, 'content' replaced by 'text'.
-
-```html
-<we-element name="item">
-  <template>
-    <div>
-      <content></content>
-    </div>
-  </template>
-</we-element>
-
-<template>
-  <div>
-    <item>
-      <text>Content Text</text>
-    </item>
-  </div>
-</template>
-```
diff --git a/_drafts/v-0.10/references/specs/index.md b/_drafts/v-0.10/references/specs/index.md
deleted file mode 100644
index d303a16..0000000
--- a/_drafts/v-0.10/references/specs/index.md
+++ /dev/null
@@ -1,309 +0,0 @@
----
-title: JS Bundle format
-type: references
-order: 4
-has_chapter_content: false
-chapter_title: Low-level Specs
-version: 0.10
----
-
-# JS Bundle format
-
-JS Bundle Version: v0.3.0
-
-## v0.5.0
-
-### Whole Syntax and Structure
-
-A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is used to define some custom components for the instance and bootstrap the instance with certain name, config and data. Developers could use all kinds of JS code packager like webpack, browserify, requirejs to organize your whole instance code.
-
-### Meta Info
-
-The JS Bundle Must begin with a comment line which is a JSON object like:
-
-```javascript
-// { "framework": "Weex", "version": "0.5.0" }
-```
-
-This JSON object as least contains:
-
-* property `framework` must be `"Weex"`
-* property `version` should be corresponded with the JS Bundle format version
-
-### Global Members
-
-* `__weex_define__(name, options)`
-* `__weex_bootstrap__(name, config, data)`
-* `__weex_document__`
-* `__weex_require__(name)`
-
-#### `__weex_define__(name:string, options: object)`
-
-Define a custom component named `name` for current instance with `options`.
-
-**example:**
-
-```javascript
-__weex_define__('rmb', {
-  template: {
-    type: 'div',
-    style: {flexDirection: 'row'},
-    children: [
-      {type: 'text', attr: {value: '¥'}},
-      {type: 'text', attr: {value: this.value}}
-    ]
-  },
-  data: function () {
-    return {
-      value: '0'
-    }
-  },
-  methods: {...}
-})
-```
-
-The enabled component options contains:
-
-* `template`: just the same as [v0.3.0](#details-of-template-option-definitions)
-* `style`: just the same as [v0.3.0](#details-of-style-option-definitions)
-* `data`: a function which return a plain object to observe by the ViewModel
-* `methods`: a function map to proxy to the ViewModel
-* `computed`: a map of several computed keys for the ViewModel
-* `init`, `created`, `ready`: lifecycle methods
-* `events`: event handlers for the ViewModel
-<!-- * `components`: a map for options of sub components the ViewModel needed (So `__weex_define__(name, options)` equals to run `this.components[name] = options` in each custom components when `init`) -->
-
-The enabled ViewModel APIs contains:
-
-* `$el(id): Element`: find element by id in current ViewModel scope
-* `$vm(id): ViewModel`: find sub ViewModel by id
-* `$getConfig(): object`: get instance config info
-* `$broadcast`/`$emit`/`$dispatch`/`$on`/`$off`: listen and fire component events
-* `$transition` *(experimental)*: animation transition (see more in [animation native module](../animation.html))
-
-#### `__weex_require__(name: string): object`
-
-Get a Weex native module with several native APIs.
-
-**example:**
-
-```javascript
-var modal = __weex_require__('modal')
-modal.toast({
-  message: 'Hey!',
-  duration: 2
-})
-```
-
-polyfill for v0.3.0
-
-```javascript
-function __weex_require__(name) {
-  var result
-  define('__weex_require__', function (r, e, m) {
-    result = r('@weex-module/' + name)
-  })
-  return result
-}
-```
-
-#### `__weex_bootstrap__(nameOrOptions: string|object, config: object?, data: object?): AppInstance | Error`
-
-Start to render by a certain component name or a direct component options as the root element, and some instance `config` and instance `data`. If everything fine, it will returns the root app instance. Otherwise it will return an `Error` instance which describes something wrong.
-
-**example:**
-
-```javascript
-__weex_bootstrap__(
-  'root',
-  {
-    // format 1:
-    // downgrade: { appVersion: '>= 0.5.0' },
-    // format 2:
-    // downgrade: function (config) { return true }
-  },
-  {
-    // external data
-    // value: '12345'
-  }
-)
-```
-
-The instance `config` now only support `downgrade` property which allows two format:
-
-1. an object like `{ osVersion, appVersion, weexVersion, deviceModel }`
-2. a function like `function (config) { return true }` to return a boolean value. `true` means normal and `false` means downgrade.
-
-The instance `data` will merge to root component data. So the root component is also easy to reuse and the instance data is easy to customize.
-
-#### `__weex_document__`
-
-An virtual-DOM `Document` instance. Also the host of [virtual-DOM APIs](./virtual-dom-apis.html). Every Weex instance has and must have just one `Document` instance.
-
-### Preserved Global Variables
-
-`define`, `bootstrap`, `module`, `exports`, `document`, `require`, `register`, `render`
-
-### A whole example
-
-```javascript
-// { "framework": "Weex", "version": "0.5.0" }
-
-var modal = __weex_require__('modal')
-
-__weex_define__('item', {
-  template: {
-    type: 'div',
-    style: { flexDirection: 'row' },
-    event: {
-      click: function (e) {
-        this.update(e)
-      }
-    },
-    children: [
-      { type: 'image', attr: { src: this.imageUrl }, ...},
-      { type: 'text', attr: { value: this.title }, ...}
-    ]
-  },
-  data: function () {
-    return {
-      imageUrl: '',
-      title: ''
-    }
-  },
-  methods: {
-    update: function (e) {
-      modal.toast({ message: this.title })
-    }
-  }
-})
-
-__weex_define__('app', {
-  template: {
-    type: 'div',
-    children: [
-      {
-        type: 'item',
-        repeat: {
-          expression: function () {
-            return this.list
-          },
-          key: '$index',
-          value: '$value'}
-        },
-        attr: {
-          imageUrl: function () {
-            return this.$value.imageUrl
-          },
-          title: function () {
-            return this.$value.title
-          }
-        }
-      }
-    ]
-  },
-  data: function () {
-    return {
-      list: [
-        { imageUrl: 'xxx', title: '111' },
-        { imageUrl: 'yyy', title: '222' },
-        { imageUrl: 'zzz', title: '333' }
-      ]
-    }
-  }
-})
-
-__weex_bootstrap__('app')
-```
-
-## v0.3.0
-
-### Whole Syntax and Structure
-
-A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is organized by several modules with AMD-like format:
-
-```javascript
-define('moduleName1', function (require, exports, module) {
-  // content of module1
-})
-
-define('moduleName2', function (require, exports, module) {
-  // content of module2
-})
-
-...
-```
-
-A whole Weex JS Bundle is concatenated by these modules and last a `bootstrap(rootComponentName, optionalConfig, optionalExternalData)` function call.
-
-```javascript
-define('@weex-component/a', function (require, exports, module) {
-  // content of composed component <a>
-})
-
-define('@weex-component/b', function (require, exports, module) {
-  // content of composed component <b>
-})
-
-bootstrap('@weex-component/b')
-```
-
-As the sample above, the component name should be hyphenated (a-z, 0-9, "-"). Other characters are not allowed.
-
-And, the method call `bootstrap()` allows 1~3 parameters: root module name (String), config info (optional JSON) and external data (optional JSON).
-
-### Content of Composed Components
-
-A module of composed component contains 3 parts: whole options definition, additional template option definition and additional style option definition.
-
-- whole options is a piece of JavaScript code to put component options (except `template` option and `style` option) into `module.exports`
-- `template` option is a piece of JSON-like object assigned to `module.exports.template` which describes the display structure of this component
-- `style` option is a piece of JSON object assigned to `module.exports.style` which describes the reusable styles in this component
-
-The `template` option is required and appeared only once, and the `style` option and whole options definition are optional.
-
-These options are defined and transformed by Transformer. Actually you can also ignore all the format limitation and write options to `module.exports` as the same result if you are not going to use Transformer. But that's not recommended.
-
-#### Details of template option definitions
-
-A piece of multi-level embedded JSON-like object which describes the view structure.
-
-Every level JSON-like object has these members below:
-
-* `type`: a required string, component name/type
-* `component`: an optional boolean, whether this component is composed or native
-* `attr`: an optional k-v pairs which contains all attributes of an element, the value could be a string, number, boolean or a function that bind some data value
-* `style`: an optional k-v pairs which contains all styles of an element, just the same format as the `attr`
-* `classList`: an optional array of strings which contains class names for styling.
-* `events`: an optional k-v pairs whose keys are event type and values are corresponding method names
-* `children`: an optional array of child components info
-* `append`: an optional string which determines a compiling workflow strategy: append node-by-node singly or a whole node tree just one time. the default value is `node` and another supported value is `tree`.
-* `shown`: a optional function which returns a boolean value to determine whether this component should be displayed
-* `repeat`: a optional function which returns a list data to displays components with each
-
-**Corresponding Keys to Weex Transformer:**
-
-- tag `name` in Weex file corresponds to `type`
-- attr `if` in Weex file corresponds to `shown`
-- attr `repeat` in Weex file corresponds to `repeat`
-- attr `append` in Weex file corresponds to `append`
-- attr `style` in Weex file with CSS syntax corresponds to `style`
-- attr `class` in Weex file with class names separated by blanks corresponds to `classList`
-- attr `on***` in Weex file with prefix `on` corresponds to a k-v pair in `events`
-- other attributes in Weex file corresponds to `attr`
-- Child nodes in Weex file corresponds to `children`
-
-All tag names, attr names are case-insensitive and transformed to lower-cased. But the attr values are case-sensitive.
-
-#### Details of style option definitions
-
-Just a two-levels JSON object.
-
-* The first levels are class names.
-* The second levels are k-v pairs which describes style names & properties for each class name.
-
-**Corresponding Keys to Weex Transformer:**
-
-* class name corresponds to first level keys
-* prop name corresponds to second level keys
-* prop value corresponds to second level values
diff --git a/_drafts/v-0.10/references/specs/js-bundle-format.md b/_drafts/v-0.10/references/specs/js-bundle-format.md
deleted file mode 100644
index 0b103d9..0000000
--- a/_drafts/v-0.10/references/specs/js-bundle-format.md
+++ /dev/null
@@ -1,307 +0,0 @@
----
-title: JS Bundle format
-type: references
-order: 4.1
-version: 0.10
----
-
-# JS Bundle format
-
-JS Bundle Version: v0.3.0
-
-## v0.5.0
-
-### Whole Syntax and Structure
-
-A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is used to define some custom components for the instance and bootstrap the instance with certain name, config and data. Developers could use all kinds of JS code packager like webpack, browserify, requirejs to organize your whole instance code.
-
-### Meta Info
-
-The JS Bundle Must begin with a comment line which is a JSON object like:
-
-```javascript
-// { "framework": "Weex", "version": "0.5.0" }
-```
-
-This JSON object as least contains:
-
-* property `framework` must be `"Weex"`
-* property `version` should be corresponded with the JS Bundle format version
-
-### Global Members
-
-* `__weex_define__(name, options)`
-* `__weex_bootstrap__(name, config, data)`
-* `__weex_document__`
-* `__weex_require__(name)`
-
-#### `__weex_define__(name:string, options: object)`
-
-Define a custom component named `name` for current instance with `options`.
-
-**example:**
-
-```javascript
-__weex_define__('rmb', {
-  template: {
-    type: 'div',
-    style: {flexDirection: 'row'},
-    children: [
-      {type: 'text', attr: {value: '¥'}},
-      {type: 'text', attr: {value: this.value}}
-    ]
-  },
-  data: function () {
-    return {
-      value: '0'
-    }
-  },
-  methods: {...}
-})
-```
-
-The enabled component options contains:
-
-* `template`: just the same as [v0.3.0](#details-of-template-option-definitions)
-* `style`: just the same as [v0.3.0](#details-of-style-option-definitions)
-* `data`: a function which return a plain object to observe by the ViewModel
-* `methods`: a function map to proxy to the ViewModel
-* `computed`: a map of several computed keys for the ViewModel
-* `init`, `created`, `ready`: lifecycle methods
-* `events`: event handlers for the ViewModel
-<!-- * `components`: a map for options of sub components the ViewModel needed (So `__weex_define__(name, options)` equals to run `this.components[name] = options` in each custom components when `init`) -->
-
-The enabled ViewModel APIs contains:
-
-* `$el(id): Element`: find element by id in current ViewModel scope
-* `$vm(id): ViewModel`: find sub ViewModel by id
-* `$getConfig(): object`: get instance config info
-* `$broadcast`/`$emit`/`$dispatch`/`$on`/`$off`: listen and fire component events
-* `$transition` *(experimental)*: animation transition (see more in [animation native module](../animation.html))
-
-#### `__weex_require__(name: string): object`
-
-Get a Weex native module with several native APIs.
-
-**example:**
-
-```javascript
-var modal = __weex_require__('modal')
-modal.toast({
-  message: 'Hey!',
-  duration: 2
-})
-```
-
-polyfill for v0.3.0
-
-```javascript
-function __weex_require__(name) {
-  var result
-  define('__weex_require__', function (r, e, m) {
-    result = r('@weex-module/' + name)
-  })
-  return result
-}
-```
-
-#### `__weex_bootstrap__(nameOrOptions: string|object, config: object?, data: object?): AppInstance | Error`
-
-Start to render by a certain component name or a direct component options as the root element, and some instance `config` and instance `data`. If everything fine, it will returns the root app instance. Otherwise it will return an `Error` instance which describes something wrong.
-
-**example:**
-
-```javascript
-__weex_bootstrap__(
-  'root',
-  {
-    // format 1:
-    // downgrade: { appVersion: '>= 0.5.0' },
-    // format 2:
-    // downgrade: function (config) { return true }
-  },
-  {
-    // external data
-    // value: '12345'
-  }
-)
-```
-
-The instance `config` now only support `downgrade` property which allows two format:
-
-1. an object like `{ osVersion, appVersion, weexVersion, deviceModel }`
-2. a function like `function (config) { return true }` to return a boolean value. `true` means normal and `false` means downgrade.
-
-The instance `data` will merge to root component data. So the root component is also easy to reuse and the instance data is easy to customize.
-
-#### `__weex_document__`
-
-An virtual-DOM `Document` instance. Also the host of [virtual-DOM APIs](./virtual-dom-apis.html). Every Weex instance has and must have just one `Document` instance.
-
-### Preserved Global Variables
-
-`define`, `bootstrap`, `module`, `exports`, `document`, `require`, `register`, `render`
-
-### A whole example
-
-```javascript
-// { "framework": "Weex", "version": "0.5.0" }
-
-var modal = __weex_require__('modal')
-
-__weex_define__('item', {
-  template: {
-    type: 'div',
-    style: { flexDirection: 'row' },
-    event: {
-      click: function (e) {
-        this.update(e)
-      }
-    },
-    children: [
-      { type: 'image', attr: { src: this.imageUrl }, ...},
-      { type: 'text', attr: { value: this.title }, ...}
-    ]
-  },
-  data: function () {
-    return {
-      imageUrl: '',
-      title: ''
-    }
-  },
-  methods: {
-    update: function (e) {
-      modal.toast({ message: this.title })
-    }
-  }
-})
-
-__weex_define__('app', {
-  template: {
-    type: 'div',
-    children: [
-      {
-        type: 'item',
-        repeat: {
-          expression: function () {
-            return this.list
-          },
-          key: '$index',
-          value: '$value'}
-        },
-        attr: {
-          imageUrl: function () {
-            return this.$value.imageUrl
-          },
-          title: function () {
-            return this.$value.title
-          }
-        }
-      }
-    ]
-  },
-  data: function () {
-    return {
-      list: [
-        { imageUrl: 'xxx', title: '111' },
-        { imageUrl: 'yyy', title: '222' },
-        { imageUrl: 'zzz', title: '333' }
-      ]
-    }
-  }
-})
-
-__weex_bootstrap__('app')
-```
-
-## v0.3.0
-
-### Whole Syntax and Structure
-
-A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is organized by several modules with AMD-like format:
-
-```javascript
-define('moduleName1', function (require, exports, module) {
-  // content of module1
-})
-
-define('moduleName2', function (require, exports, module) {
-  // content of module2
-})
-
-...
-```
-
-A whole Weex JS Bundle is concatenated by these modules and last a `bootstrap(rootComponentName, optionalConfig, optionalExternalData)` function call.
-
-```javascript
-define('@weex-component/a', function (require, exports, module) {
-  // content of composed component <a>
-})
-
-define('@weex-component/b', function (require, exports, module) {
-  // content of composed component <b>
-})
-
-bootstrap('@weex-component/b')
-```
-
-As the sample above, the component name should be hyphenated (a-z, 0-9, "-"). Other characters are not allowed.
-
-And, the method call `bootstrap()` allows 1~3 parameters: root module name (String), config info (optional JSON) and external data (optional JSON).
-
-### Content of Composed Components
-
-A module of composed component contains 3 parts: whole options definition, additional template option definition and additional style option definition.
-
-- whole options is a piece of JavaScript code to put component options (except `template` option and `style` option) into `module.exports`
-- `template` option is a piece of JSON-like object assigned to `module.exports.template` which describes the display structure of this component
-- `style` option is a piece of JSON object assigned to `module.exports.style` which describes the reusable styles in this component
-
-The `template` option is required and appeared only once, and the `style` option and whole options definition are optional.
-
-These options are defined and transformed by Transformer. Actually you can also ignore all the format limitation and write options to `module.exports` as the same result if you are not going to use Transformer. But that's not recommended.
-
-#### Details of template option definitions
-
-A piece of multi-level embedded JSON-like object which describes the view structure.
-
-Every level JSON-like object has these members below:
-
-* `type`: a required string, component name/type
-* `component`: an optional boolean, whether this component is composed or native
-* `attr`: an optional k-v pairs which contains all attributes of an element, the value could be a string, number, boolean or a function that bind some data value
-* `style`: an optional k-v pairs which contains all styles of an element, just the same format as the `attr`
-* `classList`: an optional array of strings which contains class names for styling.
-* `events`: an optional k-v pairs whose keys are event type and values are corresponding method names
-* `children`: an optional array of child components info
-* `append`: an optional string which determines a compiling workflow strategy: append node-by-node singly or a whole node tree just one time. the default value is `node` and another supported value is `tree`.
-* `shown`: a optional function which returns a boolean value to determine whether this component should be displayed
-* `repeat`: a optional function which returns a list data to displays components with each
-
-**Corresponding Keys to Weex Transformer:**
-
-- tag `name` in Weex file corresponds to `type`
-- attr `if` in Weex file corresponds to `shown`
-- attr `repeat` in Weex file corresponds to `repeat`
-- attr `append` in Weex file corresponds to `append`
-- attr `style` in Weex file with CSS syntax corresponds to `style`
-- attr `class` in Weex file with class names separated by blanks corresponds to `classList`
-- attr `on***` in Weex file with prefix `on` corresponds to a k-v pair in `events`
-- other attributes in Weex file corresponds to `attr`
-- Child nodes in Weex file corresponds to `children`
-
-All tag names, attr names are case-insensitive and transformed to lower-cased. But the attr values are case-sensitive.
-
-#### Details of style option definitions
-
-Just a two-levels JSON object.
-
-* The first levels are class names.
-* The second levels are k-v pairs which describes style names & properties for each class name.
-
-**Corresponding Keys to Weex Transformer:**
-
-* class name corresponds to first level keys
-* prop name corresponds to second level keys
-* prop value corresponds to second level values
diff --git a/_drafts/v-0.10/references/specs/js-framework-apis.md b/_drafts/v-0.10/references/specs/js-framework-apis.md
deleted file mode 100644
index e1412c6..0000000
--- a/_drafts/v-0.10/references/specs/js-framework-apis.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: JS Framework APIs
-type: references
-order: 4.2
-version: 0.10
----
-
-# JS Framework APIs
-<span class="weex-version">0.4</span>
-
-## Intro about JS Runtime
-
-These APIs are designed for JS Framework and Native Engine working together.
-
-Considering the limitation of mobile phone resource, *Weex runs only one JS runtime* to handle all Weex instances. So it need a multi-instance management layer in JavaScript. These JS Framework APIs are just designed to do the management job.
-
-* First, each Weex instance have a lifecycle, from `createInstance` to `destroyInstance`. During this period, we can import some extra data by `refreshInstance`.
-* To communicate with Native Engine, we have a couple of APIs: `sendTasks` and `receiveTasks`. They are used to call each other by some commands and messages.
-* And when JS runtime start at the beginning of the app launching, we need something initialized and configured. So we supply some APIs like `registerComponents`, `registerModules`.
-* The last API is just for debugging, we supply an API named `getRoot` to return the whole virtual-DOM data for developers.
-* If any of these API calls failed, an `Error` object should be returned.
-
-## Called by native and supplied from JS Framework
-
-### `createInstance(instanceId, code, options, data)`
-
-Create a Weex instance from Native Engine
-
-* `instanceId`: The unique id for a Weex instance, generated by Native Engine.
-* `code`: The JS bundle code send from Native Engine. It will be executed by `new Function(code)` in JS Framework. The code format depends on [JS Bundle Foramt](./js-bundle-format.html)
-* `options`: *Optional*. An options object. *Currently it supports `debug` flag which enable printing log and `bundleUrl` flag which the url of bundle.*
-* `data`: *Optional*. It's an chance to supply external data instead of the original data in JS bundle.
-
-Example:
-
-```javascript
-createInstance('x', 'define(...); define(...); define(...); bootstrap(...)')
-createInstance('x', '...', { bundleUrl, debug, ... }, { a: 1, b: 2 }})
-```
-
-### `destroyInstance(instanceId)`
-
-Destroy an existed Weex instance by id from Native Engine
-
-### `refreshInstance(instanceId, data)`
-
-Refresh data to an existed Weex instance with certain external data from Native Engine
-
-Example:
-
-```javascript
-refreshInstance('x', {a: 100, b: 200})
-```
-
-### `registerComponents(components)`
-
-Register all native components
-
-* `components`: A array of whose items are component options that are force part to use. *Currently it supports `append` attribute which forces the appending mechanism (`tree` or `node`) when first time rendering.*
-
-Example:
-
-```javascript
-registerComponents([
-  { type: 'container' },
-  { type: 'text' },
-  { type: 'image' },
-  { type: 'slider', append: 'tree' },
-  { type: 'list' },
-  { type: 'cell', append: 'tree' },
-  ...
-])
-```
-
-### `registerModules(modules)`
-
-Register the name, methods and args format of each module
-
-* `modules`: A map that collects all native module definitions. Each module definition is an array which has several API definitions. Each API definition has a `name` string and an `args` array which contains a list of each parameter's type.
-
-**NOTE: the `node` type data will actually return its `ref` property. And the `function` type data will actually return a unique function id referring to it.**
-
-Example:
-
-```javascript
-registerModules({
-  event: [
-    {name: 'openURL', args: ['string']}
-  ],
-  ...
-})
-```
-
-### `receiveTasks(instanceId, tasks)`
-
-Fire events or callbacks to an existed Weex instance from Native Engine
-
-* `tasks[]`: A task list. Each task has a `method="fireEvent|callback"` property and a list of `args`.
-    - In `fireEvent` method, the `args` is `ref` of the target, event `type`, event `data` and `domChanges` description in order. **Note: if some event make virtual-DOM data changed (e.g. value changed in `<input>` or current index changed in `<slider>`), the changing of the target element will be passed as `domChanges`.**
-    - In `callback` method, the `args` is `funcId` of a handler, `data` and `ifKeepAlive` which describes whether this callback handler should be keeping called. (Each callback handler is matched with a `funcId` when the original call happens.)
-
-Example:
-
-```javascript
-receiveTasks('x', [{method: 'fireEvent', args: ['x', '13', 'click', {a: 100, b: 200}]}])
-receiveTasks('x', [{method: 'callback', args: ['x', '7', {a: 100, b: 200}, true]}])
-```
-
-### `getRoot(instanceId)`
-
-Return a JSON object which describes the whole virtual DOM body of an existed Weex instance, which designed for debugging
-
-Example:
-
-```javascript
-getRoot('x')
-// {ref: '_root', type: 'container', attr: {...}, style: {...}, children: [...]}
-```
-
-## Called from JavaScript and implemented with native code
-
-### `sendTasks(instanceId, tasks)`
-
-Make native calls from JS Framework
-
-* `tasks[]`: A task list. Each task has a `module` name, a `method` name, and a `args[]` list.
-
-Example:
-
-```javascript
-sendTasks('x', [
-  {module: 'dom', method: 'addElement', args: ['_root', {ref: '1', type: 'container'}, -1]},
-  {module: 'dom', method: 'addElement', args: ['1', {ref: '2', type: 'text', ...}, -1]},
-  {module: 'dom', method: 'addElement', args: ['1', {ref: '3', type: 'image', ...}, -1]},
-  ...
-])
-```
-
-## Supporting other JS Framework <sup>(experimental)</sup>
-
-### Register a new JS Framework
-
-```javascript
-// lib/frameworks/index.js
-
-import Vue from '...'
-import React from '...'
-import Angular from '...'
-
-export const frameworks = {
-  Vue,
-  React,
-  Angular
-}
-```
-
-### Expose JS Framework APIs
-
-```javascript
-// 3rd-party-framework.js
-
-export function createInstance (id, code, config, data) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-The virtual-DOM tasks should follow [virtual-DOM spec](./virtual-dom-apis.html).
-
-### Framework Helper
-
-You can import `lib/runtime/helper.js` to get two important things:
-
-* `Document` class, see [virtual-DOM spec](./virtual-dom-apis.html) for more.
-* `sendTasks` method.
-
-### JS Bundle format
-
-You must ensure the JS Bundle has its first line of code like this:
-
-```javascript
-// { "framework": "Vue" }
-...
-```
-
-to allow JS Runtime to detect which JS Framework it should be opened by.
-
-If no valid annotation found. The JS Bundle will be opened by default JS Framework of Weex.
diff --git a/_drafts/v-0.10/references/specs/virtual-dom-apis.md b/_drafts/v-0.10/references/specs/virtual-dom-apis.md
deleted file mode 100644
index 566de1a..0000000
--- a/_drafts/v-0.10/references/specs/virtual-dom-apis.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: Virtual DOM APIs
-type: references
-order: 4.3
-version: 0.10
----
-
-# Virtual DOM APIs
-<span class="weex-version">0.4</span>
-
-## `Document`
-
-Each instance has a corresponding document with the instance id. A document has many nodes which compose a node tree.
-
-### Constructor
-
-##### `new Document(id: string, url: string?)`
-
-### Members
-
-##### `createElement(tagName: string, props: Object?): Element`
-
-Create a certain type `Element`. And the `props` may contain `attr` object and `style` object. e.g. `createBody('div', {style: {backgroundColor: '#ffffff'}})`
-
-##### `createComment(text: string): Comment`
-
-Create a `Comment` with a certain comment text.
-
-##### `open()`
-
-Set a flag which means init rendering start, so each dom update will be called immediately
-
-##### `close()`
-
-Set a flag which means init rendering finished, so the dom updates later will be batched in each task.
-
-##### `fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
-
-Fire an certain type of event on a certain element with an event object. When the event leads to some dom changes, the fourth parameter will describe the change just like `props` parameter in `createElement` method.
-
-#### Read-only & Getters
-
-##### `id: string`
-
-##### `URL: string?`
-
-##### `body: Element`
-
-body element
-
-##### `documentElement: Element`
-
-document element
-
-##### `getRef(ref: string): Node?`
-
-Get node by `ref` from the internal node map
-
-**Note**: the `documentElement` will be generated automatically when a document created, and the `body` should to be created manually and appended to `documentElement` to work. The `type` of a `body` must be one of `div`, `list` or `scroller`.
-
-## `Node`
-
-### Constructor
-
-##### `new Node()`
-
-### Members
-
-##### `destroy()`
-
-#### Read-only & Getters
-
-##### `ref: string`
-
-##### `nextSibling: Node?`
-
-##### `previousSibling: Node?`
-
-##### `parentNode: Node?`
-
-## `Element` extends `Node`
-
-### Constructor
-
-##### `new Element(type: string, props: Object?, ownerDocument: Document)`
-
-Create an element and the `props` may contain `attr` object and `style` object.
-
-### Members
-
-#### DOM Tree
-
-##### `appendChild(node: Node)`
-
-##### `insertBefore(node: Node, before: Node?)`
-
-##### `insertAfter(node: Node, after: Node?)`
-
-##### `removeChild(node: Node, preserved: boolean?)`
-
-Removes a child. The parameter `preserved` means whether destroy the removed node immediately or preserve it.
-
-##### `clear()`
-
-#### DOM props
-
-##### `setAttr(key: string, value: string, silent: boolean?)`
-
-If `silent` is true, it won't cause native calls. Used for handling event with virtual-DOM changes.
-
-##### `setStyle(key: string, value: string, silent: boolean?)`
-
-The `silent` parameter is just same as `setAttr` method.
-
-##### `setClassStyle(classStyle: Object)`
-
-The specificity of class style is lower than normal style. In another way the normal style will override the same name value in class style.
-
-##### `addEvent(type: string, handler: Function)`
-
-##### `removeEvent(type: string)`
-
-##### `fireEvent(type: string, e: any)`
-
-#### Read-only & Getters
-
-##### `toJSON(): Object`
-
-Format of `{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}`
-
-## `Comment` extends `Node`
-
-`Comment` won't be passed to the rendering engine. So it's very useful as a assistant placeholder sometimes.
-
-### Constructor
-
-##### `new Comment(value: string)`
-
-### Members
-
-#### Read-only & Getters
-
-##### `type: string`
-
-Returns `'comment'`
-
-##### `value: string`
diff --git a/_drafts/v-0.10/references/text-style.md b/_drafts/v-0.10/references/text-style.md
deleted file mode 100644
index 6b9ee4f..0000000
--- a/_drafts/v-0.10/references/text-style.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Text Style
-type: references
-version: 0.10
-order: 1.8
----
-
-# Text Style
-<span class="weex-version">0.5</span>
-
-Text alike components share some common style rules. The text alike components currently includes [`text`](./components/text.html) and [`input`](./components/input.html).
-
-## Properties
-
-- `color`: &lt;colors&gt; this property set the foreground color of an component's text content.
-- `font-size`: &lt;length&gt; this property specifies the size of the font.
-- `font-style`: &lt;enum&gt; `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
-- `font-weight`: &lt;enum&gt; `normal` | `bold`. This property specifies the boldness of the font. Default value is `normal`.
-- `text-decoration`: &lt;enum&gt; `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
-- `text-align`: &lt;enum&gt; `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
-- `font-family`:&lt;string&gt; this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices.
-- `text-overflow`:&lt;string&gt; `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.  
-
-The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color.
-
-Example:
-
-```css
-.my-class { color: red; }
-.my-class { color: #f00; }
-.my-class { color: #ff0000; }
-.my-class { color: rgb(255, 0, 0); }
-.my-class { color: rgba(255, 0, 0, 0.5); }
-```
-
-## Type of Style Value
-
-- length: number followed by length unit `px`, `px` can be omitted.
-- colors: support multiple formats of values, including rgb (`rgb(255, 0, 0)`), rgba (`rgba(255, 0, 0, 0.5)`), hexadecimal (`#ff0000`), short hexadecimal (`#f00`), named color (`red`).
-- enumerated values: a limited number of string values.
-
-**Note:** [The list of color keywords.](./color-names.html)
-
diff --git a/_drafts/v-0.10/tools/devtools-android.md b/_drafts/v-0.10/tools/devtools-android.md
deleted file mode 100644
index 9ce8991..0000000
--- a/_drafts/v-0.10/tools/devtools-android.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Devtools for Android
-type: tools
-order: 2.1
-version: 0.10
----
-
-# Devtools for Android
-
-[![GitHub release](https://img.shields.io/github/release/weexteam/weex_devtools_android.svg)](https://github.com/weexteam/weex_devtools_android/releases)   [![Codacy Badge](https://api.codacy.com/project/badge/Grade/af0790bf45c9480fb0ec90ad834b89a3)](https://www.codacy.com/app/weex_devtools/weex_devtools_android?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=weexteam/weex_devtools_android&amp;utm_campaign=Badge_Grade) 	[![Code Climate](https://codeclimate.com/github/weexteam/weex_devtools_android/badges/gpa.svg)](https://codeclimate.com/github/weexteam/weex_devtools_android) [![Issue Count](https://codeclimate.com/github/weexteam/weex_devtools_android/badges/issue_count.svg)](https://codeclimate.com/github/weexteam/weex_devtools_android) [![GitHub issues](https://img.shields.io/github/issues/weexteam/weex_devtools_android.svg)](https://github.com/weexteam/weex_devtools_android/issues)  [ ![Download](https://api.bintray.com/packages/alibabaweex/maven/weex_inspector/images/download.svg) ](https://bintray.com/alibabaweex/maven/weex_inspector/_latestVersion)
-
-Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) inspired by [Stetho](https://github.com/facebook/stetho), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page.At present The devtools consist of two part : `Inspector` and `Debugger`. If you want it work well, you must install a `weex-devtool` as debug server.
-
-- **Inspector**
- Inspector can be used to show your `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
-
-- **Debugger**
- Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`.
-
-## Install and launch devtools server
-Open your terminal then type `npm install -g weex-toolkit` and run.Launch it just type and run the command `weex debug`, then a Chrome web page will be opened.
-
-## Use on an android device or emulator
-
-### Taste of first debug with playground
-If you are a green hand to the debug of weex, we recommend you to try your first debug with `playground`, what you need to do is just launch the playground and scan the QR code shown in the debug page which wound opened if the `devtools server` have been launched. after you scan the QR code, the web page will list your connected devices.
-
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png "connecting (multiple) devices")
-
-#### How Debugger Works
-Devtools expands [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) and the mechanism of communication between client and debug sever is based on [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC).
-
-##### Devtools Client
-Devtools Client is integrated in App as aar, it connects to debug server through webscoket protocol with out permission check. I recommend you just packaged it in your debug version consider of the security mechanism.
-
-##### Devtools Debug Server
-Devtools Debug Server is the center node of the communication, it connects to both app and chrome, acts as the turn server of debugging protocol messages and the manager of the js runtime.
-
-##### Chrome FrontEnd
-Chrome's V8 engine acts as the javascript runtime, when debug mode is enabled, all the js code run on it. On the other side we also reuse most of the Chrome's debugging user interface, such as set breakpoint, see call stack and so on. 
-
-![debug sequence diagram](https://img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg "debug sequence diagram")
-
-### Enable devtools in your own app
-Of course you can reuse the code of playground to build your own app, that is the simplest way to let your app's js code debuggable. On the other hand QR code is not necessary, if your review the source code you can draw a conclusion that QR CODE is just a way to set `devtools server` address. following those steps you can do the same thing.
-
-#### Gradle dependency on inspector. 
-There are two choices to set the dependency, the Choice A is recommanded if you have no change to weex_sdk or inspector, while if you use your own custom weex_sdk or inspector Choice B is suitable.
- 
-  * *A - aar dependency from jcenter*.
-  ````
-  dependencies {
-          compile 'com.taobao.android:weex_inspector:0.0.8.1'
-  }
-  ````
-I strongly recommend you use the latest version since both weex sdk and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector).
-
-  * *B - source code dependency.*
-
-  you need to copy the dir of inspector to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`.
-  ````
-  dependencies {
-          compile project(':inspector')
-  }
-  ````
-
-##### Version compatibility
-
-| weex sdk | weex inspector | debug server |
-|----------|----------------|--------------|
-|0.8.0.1+  | 0.0.8.1        |0.2.39+       |
-|0.7.0+    | 0.0.7.13       |0.2.38        |
-|0.6.0+    | 0.0.2.2        |              |
-
-
-#### Initialize in your XXXApplication file.
-````
-    public class MyApplication extends Application {
-      public void onCreate() {
-      super.onCreate();
-      initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
-      }
-      private void initDebugEnvironment(boolean enable, String host) {
-        WXEnvironment.sRemoteDebugMode = enable;
-        WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-      }
-}
-````
-
-#### Ship It!
-  1. You must launch your bundle server firstly. In your weex dir, run command "./start";
-  2. Launch your remote debug server. Run command `weex debug`, chrome will open a web page show a simply guidance and QR code;
-  3. Launch your app and make sure debug mode was enabled. You will see a device list in the chrome web page opened by last step, each device item have two button, `Debugger` and `Inspector`;There are two way to enable debug mode:
-    * scaning the QR code and handle the content just like the playground have done.
-    * init it in the XXXApplication by calling `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")`, if you call `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")` after weex sdk inited, you need to call `WXSDKEngine.reload()` to refresh the runtime.
-  4. Once you click the button `Inspector` chrome will open a page show the inspector view, on the other side, click the button `Debugger` chrome will open a new page to show the debug view;
-
-
-
-
-
----
-
-#### OPTIONS
-
-##### [**OPTION**] *set your remote bundle server ip.*
-
-    For example, in the playground it is in the `IndexActivity.java`, you need to change the value of `DEFAULT_IP` in IndexActivity.java from `"your_current_IP"` to a server ip like `"30.30.30.150"`:
-````
-    private static final String DEFAULT_IP = "30.30.30.150"; // "your_current_IP";
-````
-
-##### [**OPTION**] *enable network inspection.*
-````
-OkHttpClient client = new OkHttpClient();
-client.networkInterceptors().add(new OkHttpInterceptor());
-````
-
-###### Notice
-  The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip.
-  
-#### Known Issues
- You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible.
diff --git a/_drafts/v-0.10/tools/devtools-ios.md b/_drafts/v-0.10/tools/devtools-ios.md
deleted file mode 100644
index 602f63d..0000000
--- a/_drafts/v-0.10/tools/devtools-ios.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Devtools for IOS
-type: tools
-order: 2.2
-version: 0.10
----
-
-# Devtools for IOS
-
-Remote debug for your native iOS app using Chrome Developer Tools
-
-## weex-devtool launch:
-
-0. install and run weex-devtool
-
-		$:npm install -g weex-devtool
-
-		$:weex-devtool  
-
-	it will launch chrome browser, showing wss ip address in chrome address bar.
-		
-		
-## playground install WXDevtool
-
-1. Install dependencies.
-   
-       $:pod install
-
-### Usage 
-
-1. AppDelegate.m header file
-
-		#import "WXDevTool.h"
-		
-2. Initialize inspector when the APP launched
-	
-	  **Note: The inspector API must be called before weex is initialized**
-		
-	   + (void)setDebug:(BOOL)isDebug;
-			
-	  isDebug default is NO, now you open inspect model. opposite is YES, if you set isDebug to YES, then open debug model and inspect model.
-			
-		 + (void)launchDevToolDebugWithUrl:(NSString *)url;		
-	  wssip was the wss address showing in the chrome address bar.
-
-	* open debug model and inspector model
-	
-	 	  eg:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-			{
-			  [WXDevTool setDebug:YES];
-			  [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
-			}
-			
-	* open inspect model, remove the @selector(setDebug:) or add [WXDevTool setDebug:NO]
-	
-	      eg:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-			{
-			  [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"];
-			}
-
-	 
-3. Build and running APP, this time chrome will display your device with App name, select inspector to open the inspector tab.
-4. Log print support for different levels of print.
-	
-       eg: #import "WXDevTool.h"
-		   PDLogE()/PDLogW()
-	
-### WXDevtool Dependencies
-
-Your app must be linked against the following frameworks/dylibs
-
-* libicucore.dylib
-* CFNetwork.framework
-* CoreData.framework
-* Security.framework
-* Foundation.framework
diff --git a/_drafts/v-0.10/tools/devtools.md b/_drafts/v-0.10/tools/devtools.md
deleted file mode 100644
index f883055..0000000
--- a/_drafts/v-0.10/tools/devtools.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Devtools
-type: tools
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# Devtools
-
-Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page, both Android and IOS platform are supported.
-
-## Install
-
-```
-   $ npm install  -g  weex-toolkit
-```
-#### usage
-```
-weex debug [options] [we_file|bundles_dir]
-
-  Options:
-
-    -h, --help           output usage information
-    -V, --verbose        display logs of debugger server
-    -v, --version        display version
-    -p, --port [port]    set debugger server port
-    -e, --entry [entry]  set the entry bundlejs path when you specific the bundle server root path
-    -m, --mode [mode]    set build mode [transformer|loader]
-    -w, --watch          watch we file changes auto build them and refresh debugger page![default enabled]
-```
-
-#### start debugger
-```
-$weex debug
-```
-this command will start debug server and launch a chrome opening `DeviceList` page.
-this page will display a qrcode ,you can use `Playground App` scan it for starting debug.
-
-#### start debugger with a we file
-```
-$weex debug your_weex.we
-```
-this command will compile `your_weex.we` to `your_weex.js`  and start the debug server as upon command.
-`your_weex.js` will deploy on the server and displayed in `DeviceList` page as  another qrcode contain the url of your_weex.js
-
-
-#### start debugger with a directory of we files
-```
-$weex debug your/we/path  -e index.we
-```
-this command will build every file in your/we/path and deploy them on the bundle server. your directory will mapping to  http://localhost:port/weex/ 
-use -e to set the entry of these bundles. and the url of "index.we" will display on device list page as another qrcode.
-
-## Features
-
-### Connect devices
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png "connecting (multiple) devices")
-
-### Inspector
- Inspector can be used to show your `Element` \ `Network` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
-
-![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png "devtools-inspector")
-
-#### Element
-##### native view element
-![native-element](https://img.alicdn.com/tps/TB16L3ENXXXXXcsXVXXXXXXXXXX-2878-1798.png "native-element")
-
-##### weex dom element
-![dom-element](https://img.alicdn.com/tps/TB1TsMuNXXXXXcsaXXXXXXXXXXX-2450-1460.png "dom-element")
-
-#### Network
-
-##### show the total time and latency
-![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png "inspector-network")
-
-##### show the header and response
-![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png "inspector-network")
-
-#### Console
-![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png "inspector-console")
-
-#### Resource
-![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png "inspector-resource")
-
-### Debugger
-
- Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`.
- 
-![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png "devtools-debugger")
-
-#### Breakpoint and CallStack
-![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png "debugger-breakpoint")
-
-
-## Integrate devtools
-
-* Android
-    * See the doc [Weex devtools (Android)](/tools/devtools-android.html), it will lead you to config and use it step by step.
-* IOS
-    * See the doc [Weex devtools (IOS)](/tools/devtools-ios.html), it will lead you to config and use it step by step.
-
diff --git a/_drafts/v-0.10/tools/index.md b/_drafts/v-0.10/tools/index.md
deleted file mode 100644
index 731c2f9..0000000
--- a/_drafts/v-0.10/tools/index.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: CLI
-type: tools
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# Weex-Toolkit
-
-Please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for latest version
-
-Weex CLI tool set
-
-## Pre Install
-some dependencies need recent version of npm to install
-
-if your
-```
-$ npm --version
-```
-output less then `2.15.1`, please run below cmd upgrade your npm at first
-```
-sudo npm install -g npm
-```
-
-## Install
-```
-$npm install -g weex-toolkit
-```
-
-##  Usage
-
-```
-$weex foo/bar/input_path  [options]  
-
-$weex create file_name  [options]
-
-Options:
-  --qr     display QR code for native runtime, **default action**
-  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
-           [for create sub cmd] it specified we file output path                    
-  --watch  using with -o , watch input path , auto run transform if change
-           happen
-  -s,--server  start a http file server, weex .we file will be transforme to JS
-           bundle on the server , specify local root path using the option
-  --port    http listening port number ,default is 8081            
-  --wsport  websocket listening port number ,default is 8082
-  -f, --force   [for create sub cmd] force to replace exsisting file(s) 
-  --version show version of weex toolkit 
-  --help   Show help                                                   
-```
-
-## Examples
-
-#### crate a `we file`(weex source file) using standard template
-```
-$weex create hello-world-weex
-```
-a file named 'hello-world-weex.we' we be created in current directory
-
-
-#### transform a `we file` to JS Bundle
-```
-$weex your_best_weex.we  -o .
-```
-`your_best_weex.we` will be transform to JS Bundle file `your_best_weex.js` , saved in your current directory
-
-#### transform a `we file` to JS Bundle , watch this file ,auto run transformer if change happen.
-```
-$weex your_best_weex.we  -o . --watch
-```
-
-#### transform every we file in a directory 
-```
-$weex we/file/storage/path  -o outputpath
-```
-every `we file` in `we/file/storage/path` we be transform to JS Bundle  , saved in `outputpath` path
-
-#### preview your we file using Weex Playground App
-download & install [weex playground App](http://alibaba.github.io/weex/download.html)
-```
-$weex your_best_weex.we  --qr
-```
-a QR code will display in your terminal , using Playground App scan that.
-
-
-#### start http server
-```
-$weex -s .
-```
-a http server will start running , your current directory(.) will be the document root for the server , every weex .we file will be transforme to JS Bundle when access through the server
-
-## Issue & Feedback
-
-[Github Issue List](https://github.com/weexteam/weex-toolkit/issues)
-
diff --git a/_drafts/v-0.10/tools/playground.md b/_drafts/v-0.10/tools/playground.md
deleted file mode 100644
index f315054..0000000
--- a/_drafts/v-0.10/tools/playground.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Playground
-type: tools
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# Weex Playground App
-
-One of best parts of Weex is Native Runtime . After preview your `we file` render in H5 using weex-toolkit CLI , you can try Native Runtime in a standalone App , this is Weex Playground App . More then that ,Weex playground App preset  a lot of  Demo & ShowCase ,so you will get to experience  performance of Weex native runtime  easily.
-
-Android and IOS version of Playground App can be downloaded [here](http://alibaba.github.io/weex/download.html).
-
-## Screenshot 
-
-![Weex playground App](https://gw.alicdn.com/mt/TB1AoPdOXXXXXcXapXXXXXXXXXX-720-1280.png)
-
-
-This is main interface of Weex Playground App , you can click the item to see the corresponding demo  . click top right  corner Icon will active QR scaner that  work with Weex [toolkit CLI](../tools/index.html)
-
-please refer to [Weex Tutorial](../guide/index.html)
-
-
diff --git a/_drafts/v-0.10/tools/transformer.md b/_drafts/v-0.10/tools/transformer.md
deleted file mode 100644
index 7df3b60..0000000
--- a/_drafts/v-0.10/tools/transformer.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Transformer
-type: tools
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# gulp-weex
-
-> gulp plugin for weex transformer
-
-## Usage
-
-```javascript
-var gulp = require('gulp')
-var weex = require('gulp-weex')
-
-gulp.task('default', function () {
-  return gulp.src('src/*.html')
-    .pipe(weex({}))
-    .pipe(gulp.dest('./dest'))
-})
-```
-
-## Options
-
-### oldFormat
-
-whether transform to old format.
-
-default: `false`.
-
-### isEntry
-
-whether is an entry module which has `bootstrap(...)`.
-
-default: `true`.
\ No newline at end of file
diff --git a/_drafts/v1.0/advanced/create-a-weex-project.md b/_drafts/v1.0/advanced/create-a-weex-project.md
deleted file mode 100644
index 780341b..0000000
--- a/_drafts/v1.0/advanced/create-a-weex-project.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: 如何创建一个 Weex 项目
-type: advanced
-order: 3
-has_chapter_content: true
-version: 0.10
----
-
-# 如何创建一个 Weex 项目
-
-对于前端开发者来说开发一个 app 是不容易的,既然 Weex 能以 web 的开发体验构建高性能、可扩展的 native 应用,那我们怎么利用 Weex 简单高效的开发一个 native 应用呢?Weex 替你考虑了这件事。在本章中,我们将学习如何使用 Weexpack 工具快速生成一个全新的 Weex 项目。
-
-根据你的操作系统的不同,步骤也略有差异,如果你从未接触过 native 开发,请慢慢来,遇到问题随时查阅 [FAQ](../faq.md)。
-
-首先,不论任何平台,我们都需要 node.js 和 Weexpack。在本节中,默认你已经安装好了 node.js 和 npm,如有疑问,可参考上一章 [如何在本地开发 Weex 页面](../guide/develop-on-your-local-machine.html)。
-
-Weexpack 是 Weex 新一代的工程开发套件,它允许开发者通过简单的命令,创建 weex 工程项目,将项目运行在不同的开发平台上。未来,我们考虑会将其集成在 weex-toolkits 上,但目前仍需要单独安装。好在安装 Weexpack 非常简单,可以直接使用 npm 安装:
-
-```bash
-npm install weexpack -g
-```
-
-或者用 cnpm:
-
-```bash
-cnpm install weexpack -g
-```
-
-接下来的步骤会有一些复杂和区别,根据开发平台的不同,我们提供了快速导航便于阅读:
-
-- [iOS](#ios)
-- [Android](#android)
-
-## iOS
-
-Mac 是唯一可以开发 iOS 应用的平台,因此创建 iOS 项目只支持 mac。对于 iOS,你需要安装 [Xcode](https://developer.apple.com/xcode/) 和 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 。
-
-安装 Xcode 最简单的方法是到 [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12)。Xcode 体积较大,下载请耐心等待。
-
-安装好 Xcode 后,你需要运行 Xcode,使 Xcode 自动安装开发者工具和确认使用协议。
-
-之后你还需要安装 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html) 。CocoaPods 是 Xcode 项目的类库管理工具,可以使用如下命令安装:
-
-```bash
-$ sudo gem install cocoapods
-```
-
-如果执行该命令无反应,很可能是 gem source 问题,你可以切换为淘宝 gem source:
-
-```bash
-$ gem sources --remove https://rubygems.org/
-$ gem sources -a https://ruby.taobao.org/
-$ sudo gem install cocoapods
-```
-
-如有问题,可参考 [CocoaPods 官方文档](https://guides.cocoapods.org/using/getting-started.html)
-
-### 创建项目
-
-然后,就可以使用 weexpack 创建 weex 工程了:
-
-```bash
-$ weexpack init appName
-```
-
-weexpack 会自动新建以 appName 命名的目录,并将项目模板拉取到该目录。
-
-最终形成如下目录结构:
-
-```bash
--> /appName
-.
-|—— .gitignore
-|—— README.md
-|—— package.json
-|-- android.config.json
-|-- ios.config.json
-|—— webpack.config.js
-|—— /src
-|     |—— index.we
-|—— /html5
-|     |—— index.html
-|—— /ios
-|     |—— /playground
-|     |—— /sdk
-|     |—— /WXDevtool
-|—— /android
-|     |—— /playground
-|     |—— /appframework
-```
-
-其中:
-
-- `webpack.config.js` 是 webpack 配置文件,用于生成 `.we` 文件的 JSBunlde
-- `ios.config.json` 是 iOS 项目配置文件
-- `android.config.json` 是 Android 项目配置文件
-- `/src` 目录放置 Weex 页面
-- `/html5` 是 H5 端入口文件
-- `/ios` 放置 iOS 项目
-- `/android` 放置 Android 项目
-
-紧接着,进入目录,并且安装依赖:
-
-```bash
-$ cd appName && npm install
-```
-
-至此,项目模版创建完成,接下来我们可以自定义我们的 APP 信息并打包运行。
-
-### 运行与打包
-
-如果一切正常,你可以使用 weexpack 打包或模拟器运行了:
-
-模拟器运行
-
-```bash
-$ weexpack run ios
-```
-
-构建 ipa 包:
-
-```bash
-$ weexpack build ios
-```
-
-构建包的过程中,将会提示让您输入 CodeSign(证书)、Profile(provisioning profile)、AppId,只有输入真实的这些信息才能成功打包。 其余如AppName,和入口 weex bundle 文件可以编辑项目目录下的 `ios.config.json` 配置。 打完包成功之后,可以在 `/playground/build/ipa_build/` 目录下获取 ipa 文件。
-
-注:证书需要预先安装到 keychain 中,在 keychain 中点击右键获取证书 id(证书名称)、provisioning profile 文件(\*mobileprovision)需要获取 UUID,进入目录可以看到 mobileprovision_UUID.sh 文件,此文件可以获取到 UUID。
-
-mobileprovision_UUID.sh 用法如下:
-
-```bash
-$ ./mobileprovision_UUID.sh *mobileprovision
-```
-
-参数(\*mobileprovision)为 provisioning profile 文件路径
-
-** 注:run 与 build 部分涉及 pod 的依赖安装问题。**
-
-- 首先要安装 cocoapods ,具体安装步骤可查看[这里](https://cocoapods.org/),建议安装 0.39.0 版本。
-- 为了加快 CLI 执行速度,weexpack 创建的工程默认安装了需要的依赖库。但是命令执行依然会更新需要升级的依赖库。
-  - 如果出现这种错误提示 `unable to find a specification for 'WeexSDK'` 这种错误,说明你本地没有更新 cocoapods master 仓库,运行 `pod repo update` ,此时运行 `pod search WeexSDK`:
- 
-  ![](https://img.alicdn.com/tps/TB1jLx4OFXXXXaoXFXXXXXXXXXX-212-33.png)  
- 
-  说明 master repo 更新成功。以上是以 `WeexSDK` 为例,其他库类似。
- 
-  - 如果出现这种错误 `error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.` 进入 playground 目录(podfile 文件所在目录)按提示执行。
-
-  更多 pod 使用细节请移步[cocoapods](https://cocoapods.org/)
-
-- mobileprovision,参数(\*mobileprovision)为 provisioning profile 文件路径。
-
-----
-
-## Android
-
-在 Mac 平台开发 Android 首先需要下载 [Android Studio](https://developer.android.com/studio/install.html)(你可能需要翻墙才能访问)。[Android Studio](https://developer.android.com/studio/install.html) 为我们提供了 Android SDK 及 AVD(模拟器)以便我们快速运行 Android 项目。
-
-下载完成后运行 Android Studio,任意新建一个 Android 项目,在第二步中选择 **Android 5.1**,然后点击 next 完成项目创建,如图所示:
-
-![android](https://gw.alicdn.com/tps/TB1VulhOFXXXXcPXFXXXXXXXXXX-828-686.png) 
-
-待 Android Studio 打开后,在顶部菜单栏选择 Tools -> Android -> AVD Manager,安装 Android 模拟器:
-
-![android](https://img.alicdn.com/tps/TB1CBdgOFXXXXXnXVXXXXXXXXXX-661-392.jpg)
-
-之后,打开模拟器运行 Android。
-
-**注意:**
-
-1. 必须保持模拟器运行。
-2. 保证 Android build-tool 的版本为 23.0。【可以在 Android Studio 的 SDK Manager 里查看是否已安装这个版本,如果没有可选择安装这一版本】。
-
-### 配置环境变量
-
-因为 Android Studio 安装的 SDK 不会自动配置环境变量(你自己安装的 SDK 同样不会)。所以需要您自己手动配置 Android_HOME 环境变量和 PATH 
-
-如果是 Android Studio 安装的 SDK 安装路径可已在 SDK manager 里找到(打开 SDK manager 的方式请参照图2)
-
-Windows 下请参照 [window 下如何设置 ANDROID 环境变量](http://jingyan.baidu.com/article/09ea3ede1b4df6c0aede39ab.html)
-
-Linux/Mac 下只需编辑 `.bash_profile` 增加 PATH 即可:
-
-```bash
-vim ~/.bash_profile
-```
-
-然后添加下列代码进去(路径替换为你的真实路径)
-
-```bash
-export ANDROID_HOME=/xxx/Library/Android/sdk
-export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools
-```
-
-然后保存退出(:wq)。再执行下列命令:
-
-```bash
-source ~/.bash_profile
-```
-
-### 创建项目
-
-然后,就可以使用 weexpack 创建 weex 工程了:
-
-```bash
-$ weexpack init appName
-```
-
-weexpack 会自动新建以 appName 命名的目录,并将项目模板拉取到该目录。
-
-最终形成如下目录结构:
-
-```bash
--> /appName
-.
-|—— .gitignore
-|—— README.md
-|—— package.json
-|-- android.config.json
-|-- ios.config.json
-|—— webpack.config.js
-|—— /src
-|     |—— index.we
-|—— /html5
-|     |—— index.html
-|—— /ios
-|     |—— /playground
-|     |—— /sdk
-|     |—— /WXDevtool
-|—— /android
-|     |—— /playground
-|     |—— /appframework
-```
-
-其中:
-
-- `webpack.config.js` 是 webpack 配置文件,用于生成 `.we` 文件的 JSBunlde
-- `ios.config.json` 是 iOS 项目配置文件
-- `android.config.json` 是 Android 项目配置文件
-- `/src` 目录放置 Weex 页面
-- `/html5` 是 H5 端入口文件
-- `/ios` 放置 iOS 项目
-- `/android` 放置 Android 项目
-
-紧接着,进入目录,并且安装依赖:
-
-```bash
-$ cd appName && npm install
-```
-
-至此,项目模版创建完成,接下来我们可以自定义我们的 APP 信息并打包运行。
-
-### 运行与打包
-
-如果一切正常,你可以使用 weexpack 打包或模拟器运行了:
-
-Android 的打包和构建是一体的 :
-
-```bash
-$ weexpack run android
-```
-
-同样的你可以更改项目目录下的android.config.json
-
-- `AppName`: 应用名
-- `AppId`: application_id 包名
-- `SplashText`: 欢迎页上面的文字
-- `WeexBundle`: 指定的 weex bundle 文件(支持文件名和 url 的形式)
-
-  指定文件名则以本地文件的方式加载 bundle,指定 url 则以远程的方式加载 JSBundle。如果以本地方式指定 bundle `.we` 文件请放到 `src` 目录。
diff --git a/_drafts/v1.0/advanced/customize-a-native-component.md b/_drafts/v1.0/advanced/customize-a-native-component.md
deleted file mode 100644
index 404f25c..0000000
--- a/_drafts/v1.0/advanced/customize-a-native-component.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: 自定义 native 组件
-type: advanced
-order: 7
-has_chapter_content: true
-version: 0.10
----
-
-# 如何自定义 native 组件?
-
-Weex 已经包含了最关键的平台组件,例如 `ScrollView, ListView, Text, Imageview` 等等。当然,这些组件并不能完全满足你的需求。另外,那些在你的工程中常用的大量原生 UI 组件,可能需要被简单地集合到 Weex 中。幸运的是,通过任意已存在的组件来创建你的自定义组件是一件很方便的事。
-
-## Android
-
-### 步骤:
-
-1.自定义组件必须继承自 `WXComponent` 或者 `WXContainer` ;
-2.weex SDK 可以识别 @WXComponentProp (name = value(value 是 attr 或者 dsl style));
-3.方法必须是 `public` 的;
-4.组件类不能是一个内部类;
-5.自定义组件不能被 ProGuard 之类的工具混淆;
-6.组件方法在 UI 线程被调用,因此不要在里面进行耗时的操作;
-7.Weex 的参数类型可以是 int, double, float, String, Map, List 和实现了 WXObject 接口的自定义类;
-
-### 参考以下例子:
-
-``` java
- `package com.taobao.weex.ui.component;
-// ……
-
-public class  MyViewComponent extends WXComponent{
-
-       public MyViewComponent(WXSDKInstance instance, WXDomObject node, 
-                    WXVContainer parent,  String instanceId, boolean lazy) {                
-           super(instance, node, parent, instanceId, lazy);
-        }
-
-       @Override
-       protected void initView() {
-          //TODO:your own code ……
-       }
-
-      @Override
-      public WXFrameLayout getView() {
-         //TODO:your own code ………        
-      }
-      @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
-      public void setMyViewValue(String value) {
-         ((TextView)mHost).setText(value);
-      }
-
-}
-```
-
-必须注册组件:
-
-``` java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-## iOS
-
-虽然 WeexSDK 中有很多的 native 的 Component,但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫 native 的组件,想包装一下,导入到 Weex 中,因此我们提供了让开发者实现自己的 native Component。下面将以 WeexSDK 中已经存在的 Component:`image` 为例子,介绍一下如何构建一个 native Component。假设你已经了解 iOS 开发
-
-### 注册 Component
-
-注册一个 component 比较简单,调用 `WXSDKEngine` 中的 `registerComponent:withClass:` 方法,传入组件的标签名称,还有对应的 class  然后你可以创建一个 `WXImageComponent` 表示 `image` 组件的实现。在 `.we` 文件中,只需要写 `<image></image>`
-
-### 添加属性 
-
-现在我们要做一些让 image component 更加强大的事情。既然作为一个图片的 component,那它应该要有源,给他加上一个  `src` 的属性,同时给它加上一个 `resize` 的属性(可以配置的有 `contain/cover/stretch`)
-
-```object-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
-```
-
-component 中所有的 style,attribute,events 都会被传递到 Component 的初始化方法中,所以,你可以在初始化方法中存储你感兴趣的一些属性值
-
-```object-c
-@implementation WXImageComponent
-
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
-    if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
-        _imageSrc = [WXConvert NSString:attributes[@"src"]];
-        _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-}
-
-    return self;
-}
-
-@end
-```
-
-attribute 中拿到的值的类型都是 `id`,我们可以用转换方法把它转换到任何值。Weex SDK 提供了一些基础的转换方法,可以参考 `WXConvert` 类,或者你可以添加自己的转换函数。
-
-### Hooking 渲染生命周期
-
-native 的 component 是由 Weex 管理的,Weex 创建,布局,渲染,销毁。Weex 的 component 生命周期都是可以 hook 的,你可以在这些生命周期中去做自己的事情。
-
-| 方法 | 描述 |
-| :-: | --- |
-| initWithRef:type:... | 用给定的属性初始化一个component. |
-| layoutDidFinish | 在component完成布局时候会调用. |
-| loadView | 创建component管理的view. |
-| viewWillLoad | 在component的view加载之前会调用. |
-| viewDidLoad | 在component的view加载完之后调用. |
-| viewWillUnload | 在component的view被释放之前调用. |
-| viewDidUnload | 在component的view被释放之后调用. |
-| updateStyles: | 在component的style更新时候调用. |
-| updateAttributes: | 在component的attribute更新时候调用. |
-| addEvent: | 给component添加event的时候调用. |
-| removeEvent: | 在event移除的时候调用. |
-
-在 image component 的例子里面,如果我们需要我们自己的 image view 的话,可以复写 `loadView`这个方法.
-
-```object-c
-- (UIView *)loadView
-{
-return [[WXImageView alloc] init];
-}
-```
-
-现在我们使用 `WXImageView` 渲染 `image` component。  
-作为一个 image component,我们需要拿到服务器图片,而且把它设置进 image view 里. 这个操作可以在 `viewDidLoad` 方法中做,这个方法是在 view 已经被创建而且加载了时候 Weex SDK 会调用到,而且 `viewDidLoad` 这个方法是你做额外初始化工作比如改变 content mode(也就是设置resize) 的最好时间.
-
-```object-c
-- (void)viewDidLoad
-{
-    UIImageView *imageView = (UIImageView *)self.view;
-    imageView.contentMode = _resizeMode;
-    imageView.userInteractionEnabled = YES;
-    imageView.clipsToBounds = YES;
-    imageView.exclusiveTouch = YES;
-
-    // Do your image fetching and updating logic
-}
-```
-
-如果可以改变 image 的 src,也可以 hook `updateAttributes:`  方法来做属性更新操作,当 `updateAttributes:` 或者  `updateStyles:` 被调用的时候, component 的 view 已经加载完成
-
-```object-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
-    if (attributes[@"src"]) {
-        _imageSrc = [WXConvert NSString:attributes[@"src"]];
-        // Do your image updating logic
-    }
-
-    if (attributes[@"resize"]) {
-        _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-        self.view.contentMode = _resizeMode;
-    }
-}
-```
-
-或许你需要考虑更多的生命周期方法去 Hook,当布局完成时候,像 `layoutDidFinish`,如果你想了解更多,可以参考一下`WXComponent.h` 声明的方法。
-
-现在你可以用在任何 `.we` 文件里面使用 `<image>`,而且可以加上 image 的属性。
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
diff --git a/_drafts/v1.0/advanced/cuszomize-native-apis.md b/_drafts/v1.0/advanced/cuszomize-native-apis.md
deleted file mode 100644
index 55e5e4c..0000000
--- a/_drafts/v1.0/advanced/cuszomize-native-apis.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: 自定义 native API
-type: advanced
-order: 8
-has_chapter_content: true
-version: 0.10
----
-
-# 如何自定义 native API?
-
-Weex 的 SDK 只提供了页面渲染的能力,但是一些其它操作,比如网络请求、图片加载、重定向等功能需要你自己去实现,这个例子讲述了如何用原生代码去扩展 Weex 的功能。
-
-## 关于 URLHelper 的例子
-
-### 新建一个 WXModule
-
-```java
-public class URLHelperModule extends WXModule{
-    private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-    @WXModuleAnno
-    public void openURL(String url){
-        if (TextUtils.isEmpty(url)) {
-            return;
-        }
-        StringBuilder builder=new StringBuilder("http:");
-        builder.append(url);
-        Uri uri = Uri.parse(builder.toString());
-        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
-        intent.addCategory(WEEX_CATEGORY);
-        mWXSDKInstance.getContext().startActivity(intent);
-    }
-} 
-```
-
-这里要注意   `@WXModuleAnno` 这个注解,它表示了你把这个方法暴露给 JavaScript。
-
-```java
-public class URLHelperModule extends WXModule{
-
-    @WXModuleAnno
-    public void openURL(String url,String callbackId){
-        //...
-        //callback to javascript 
-        Map<String, Object> result = new HashMap<String, Object>();
-        result.put("ts", System.currentTimeMillis());
-        WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), callbackId, result);
-    }
-}
-```
-
-### 把module注册到WXSDKEngine:
-
-```java
-try {
-     WXSDKEngine.registerModule("myURL", URLHelperModule.class);
-     //'myURL' is the name you'll use in javascript
-    } catch (WXException e) {
-       WXLogUtils.e(e.getMessage());
-    }
-```
-
-### 在 JavaScript 中使用 `eventModule`:
-
-```javascript
-let URLHelper = require('@weex-module/myURL');//same as you registered
-URLHelper.openURL("http://www.taobao.com",function(ts){  
-  console.log("url is open at "+ts);
-});
-```
-
-## 一些注意事项:
-
-1. 定义一个 components 需要继承 `WXModule`
-
-2. 不要忘记添加 `@WXModuleAnno` 注解,不然 Weex 没法识别这个方法
-
-3. 定义的方法必须是 `public 的
-
-4. module 类一定不能是内部类
-
-5. 你定义的 components 不能被混淆,不然会找不到
-
-6. Module 中的方法会在 UI 线程中被调用,所以一定不要做一些耗时操作
-
-7. Moudle 中的方法参数类型可以为 `int`,`double`,`float`,`String`,`Map`,`List`,以及实现 `WXObject` 接口的类。
diff --git a/_drafts/v1.0/advanced/extend-to-android.md b/_drafts/v1.0/advanced/extend-to-android.md
deleted file mode 100644
index f816ebd..0000000
--- a/_drafts/v1.0/advanced/extend-to-android.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: Android 扩展
-type: advanced
-order: 9
-has_chapter_content: true
-version: 0.10
----
-
-# Android 扩展
-
-Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能。  
-主要分为两类扩展:  
-
-- Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
-- Component 扩展 实现特别功能的 Native 控件。例如:RichTextview,RefreshListview 等。
-- Adapter 扩展 Weex 对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片下载等。
-
-## Module 扩展
-
-1. Module 扩展必须继承 WXModule 类。
-2. 扩展方法必须加上 @WXModuleAnno 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
-3. Weex是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是 public 类型。
-4. 同样因为是通过反射调用,Module 不能被混淆。请在混淆文件中添加代码:`-keep public class * extends com.taobao.weex.common.WXModule{*;}`
-5. Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-6. 完成 Module 后一定要在初始化时注册 `WXSDKEngine.registerModule("myModule", MyModule.class);` 否则会报类似错误:`ReportException :undefined:9: TypeError: Object #<Object> has no method 'printLog'`
-
-示例如下:
-
-```java
-public class MyModule extends WXModule {
-
-  @WXModuleAnno(runOnUIThread = true)
-  public void printLog(String msg) {
-    Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
-  }
-}
-```
-
-JS 调用如下:
-
-```html
-<template>
-  <div>
-    <text onclick="click">点击我测试</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      click: function() {
-        require('@weex-module/myModule').printLog("我是一个测试!");
-      }
-    }
-  }
-</script>
-```
-
-## Component 扩展
-
-1. Component 扩展类必须集成 WXComponent.
-2. Component 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value(value is attr or style of dsl))
-3. Weex sdk 通过反射调用对应的方法,所以 Component 对应的属性方法必须是 public,并且不能被混淆。请在混淆文件中添加代码  `-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}`
-4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
-5. 完成 Component 后一定要在初始化时注册 `WXSDKEngine.registerComponent("richtext",RichText.class);`
-
-示例如下:
-
-```java
-public class RichText extends WXComponent {
-
-  public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
-    super(instance, dom, parent, isLazy);
-  }
-
-  @Override
-  protected void initView() {
-    mHost=new TextView(mContext);
-    ((TextView)mHost).setMovementMethod(LinkMovementMethod.getInstance());
-  }
-
-  @WXComponentProp(name = "tel")
-  public void setTelLink(String tel){
-    SpannableString spannable=new SpannableString(tel);
-    spannable.setSpan(new URLSpan("tel:"+tel),0,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
-    ((TextView)mHost).setText(spannable);
-  }
-}
-```
-
-JS 调用如下:
-
-```html
-<template>
-  <div>
-    <richText tel="12305" style="width:200;height:100">12305</text>
-  </div>
-</template>
-```
-## Adapter扩展
-
-图片下载:
-
-需要时集成接口 IWXImgLoaderAdapter,实现 setImage 方法。
-
-示例如下:
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-  public ImageAdapter() {
-  }
-
-  @Override
-  public void setImage(final String url, final ImageView view,
-                       WXImageQuality quality, WXImageStrategy strategy) {
-
-    WXSDKManager.getInstance().postOnUiThread(new Runnable() {
-
-      @Override
-      public void run() {
-        if(view==null||view.getLayoutParams()==null){
-          return;
-        }
-        if (TextUtils.isEmpty(url)) {
-          view.setImageBitmap(null);
-          return;
-        }
-        String temp = url;
-        if (url.startsWith("//")) {
-          temp = "http:" + url;
-        }
-        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
-          return;
-        }
-        Picasso.with(WXEnvironment.getApplication())
-            .load(temp)
-            .into(view);
-      }
-    },0);
-  }
-}
-```
-#### 组件方法支持
-从WeexSDK 0.9.5开始,你可以定义组件方法
-
-- 在组件中如下声明一个组件方法
-
- ```java
- @JSMethod
- public void focus(){
- //method implementation
- }
- ```
-- 注册组之后,你可以在weex 文件中调用
-  
-  ```html
-	<template>
-    <mycomponent id='mycomponent'></mycomponent>
-	</template>
-	<script>
-    module.exports = {
-      created: function() {
-        this.$el('mycomponent').focus();
-      }
-    }
-	</script>
-	```
-	
-注:工程要添加依赖 `compile 'com.squareup.picasso:picasso:2.5.2'`
diff --git a/_drafts/v1.0/advanced/extend-to-html5.md b/_drafts/v1.0/advanced/extend-to-html5.md
deleted file mode 100644
index ff99629..0000000
--- a/_drafts/v1.0/advanced/extend-to-html5.md
+++ /dev/null
@@ -1,253 +0,0 @@
----
-title: weex-html5 扩展
-type: advanced
-order: 11
-has_chapter_content: true
-version: 0.10
----
-
-# 扩展 weex-html5
-
-### 简介
-
-Weex 是一个高可扩展性的跨平台动态化开发方案,你可以在现有组件基础上定制自己需要的三端组件。你可以为 Weex API 模块添加新的方法,或者创建新的 API 模块和新的加载器。按照以下几个步骤扩展你的组件,API 或者加载器。
-
-首先要明确的是,组件和 API 模块是基于 Weex 的扩展,但是独立于 Weex,组件的定义本身是不需要依赖于 Weex 的,这样有助于组件的分散化管理,去除中心化依赖。
-
-其次,当你扩展一个组件,你需要同时扩展三端的组件(android, ios 和 web 端),毕竟 Weex 是一个重视三端一致体验的跨平台移动框架。你可以一个端一个端的扩展,也可以召唤其他端上的开发者来共同完成你在其他端上的组件(你总是可以在社区找到对某个功能有共同需求的开发者)。这里有一些在 [android 端](./extend-to-android.md)和 [ios 端](./extend-to-ios.md)做扩展的文档可以参考。
-
-你应该将你的扩展发布到 Weex 开发者可以方便找到和使用的渠道,比如 `npm`。我们推荐你将你开发的组件发布到 `npm` 供其他 Weex 开发者使用。
-
-最重要的是,你的组件的命名需要遵守 Weex 组件命名规范:以 `weex-` 开头作为组件的前缀,并且以 `-<platform>` 做为结尾后缀,除非你发布的包是三端的实现都包含在内的。这里有个 [`<weex-hello-web`>](https://github.com/MrRaindrop/weex-hello-web) 的例子作为参考,这里注册了一个简单的自定义的组件。
-
-### 创建新组件
-
-步骤:
-1. 在你的组件实现中必须继承 `Weex.Component` 这个类, 并选择性的重写其中的一些方法。
-2. 你的组件的 exports 需要暴露一个 `init` 方法,并在其中使用 `Weex.registerComponent` 注册你的组件。
-
-**这里用一个例子展示如何扩展一个新的组件**
-
-看这个组件扩展的代码( web 端上的组件):
-
-``` javascript
-const attr = {
-  // ...
-}
-const style = {
-  // ...
-}
-const event = {
-  // ...
-}
-// 每个扩展组件都需要实现一个init方法,Weex会通过这方法进行安装和注册.
-function init (Weex) {
-  const Component = Weex.Component
-  const extend = Weex.utils.extend
-
-  // 组件的构造函数
-  function Hello (data) {
-    Component.call(this, data)
-  }
-
-  // prototype继承
-  Hello.prototype = Object.create(Component.prototype)
-  extend(Hello.prototype, proto)
-
-  // 配置属性、样式以及事件
-  extend(Hello.prototype, { attr })
-  extend(Hello.prototype, {
-    style: extend(Object.create(Component.prototype.style), style)
-  })
-  extend(Hello.prototype, { event })
-
-  Weex.registerComponent('weex-hello', Hello)
-}
-
-// 暴露init方法接口.
-export default { init }
-```
-
-上述代码摘引自 [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L46-L65)
-
-这个demo重写了基类 `Component`中的`create`方法。你也可以选择重写`Component`中的一些其他方法来定制组件的行为。典型的方法包括:
-- `create`: 创建组件的节点,在方法体中return这个节点.
-- `createChildren` 创建子节点.
-- `insertBefore` 在某个子节点之前插入一个新的子节点.
-- `appendChild` 在子节点列表的最后加上一个节点.
-- `removeChild` 移除一个子节点.
-
-**进阶**:更多关于组件定制和扩展的细节和代码展示,可以参考 [weex 主仓库的代码](https://github.com/apache/incubator-weex/tree/dev/html5),这里的组件基本上都是通过上述方式进行定义的。
-
-重要的一点,注册组件的关键方法是 `Weex.registerComponent`,如示例里的 `weex-hello` 组件的注册:
-
-``` javascript
-Weex.registerComponent('weex-hello', Hello)
-```
-
-上述代码引自 [weex-hello-web/src/index.js](https://github.com/MrRaindrop/weex-hello-web/blob/master/src/index.js#L62)
-
-在某个需要使用该组件的weex项目中使用 `Weex.install` 方法安装该组件:
-
-``` javascript
-// import the original weex-html5.
-import weex from 'weex-html5'
-import hello from 'weex-hello-web'
-// install the component.
-weex.install(hello)
-```
-
-上述代码引自 [weex_extend_demo/src/main.js](https://github.com/MrRaindrop/weex_extend_demo/blob/master/src/main.js#L1-L5)
-
-在你的 `.we` 文件中直接使用这个组件:
-
-``` html
-<template>
-  <div>
-    <weex-hello class="hello" style="txt-color:#fff;bg-color:green"
-      value="WEEX" onclick="handleClick">
-    </weex-hello>
-  </div>
-</template>
-```
-
-上述代码引自[weex_extend_demo/demo/index.we](https://github.com/MrRaindrop/weex_extend_demo/blob/master/demo/index.we#L10-L15)
-### 扩展API
-
-你可以扩展新的 API 模块,或者为某个已有的模块添加新的 API. 比如,你可以添加一个 API 模块叫做 `user`,在里面添加一些用户登录登出处理的 API,比如 `login`, `logout` 等等。你可以通过 `require('@weex-module/moduleName)[methodName](arg1, arg2, ...)` ([Module APIs](../references/api.md)) 的方式调用你的 API.
-
-步骤:
-1. 实现你的 API module.
-2. 在你的 API 安装模块里暴露一个 `init` 方法,并在这个方法里面使用 `Weex.registerAPIModules` 注册你的 API module.
-
-**这里用一个例子展示如何扩展一个新的 API 模块**
-
-创建一个文件 `user.js`,在其中定义登录登出 `login/logout` 方法.
-
-``` javascript
-const user = {
-  // 定义用户登录方法.
-  login (callbackId) {
-    login.then(res => {
-      this.sender.performCallback(callbackId, res)
-    }).catch(err => {
-      this.sender.performCallback(callbackId, err)
-    })
-  },
-
-  // 定义用户登出方法.
-  logout (callbackId) {
-    logout.then(res => {
-      this.sender.performCallback(callbackId, res)
-    }).catch(err => {
-      this.sender.performCallback(callbackId, err)
-    })
-  }
-}
-
-// 定义user模块的元 (meta) 信息.
-const meta = {
-  user: [{
-    name: 'login',
-    args: ['function']
-  }, {
-    name: 'logout',
-    args: ['function']
-  }]
-}
-
-export default {
-  init (Weex) {
-    // 注册这个模块,最后一个参数是模块的元信息.
-    Weex.registerApiModule('user', user, meta)
-  }
-}
-```
-
-这个简单的 user helper 模块就实现好了,可以发布到 npm 上,我们可以给这个模块取个名字,比如说 `weex-user-helper`。
-
-在你的新的 Weex 项目里安装这个模块:
-
-``` javascript
-import Weex from 'weex-html5'
-import user from 'weex-user-helper'
-
-Weex.install(user)
-```
-
-安装了这个模块,你就可以在 DSL 代码里引用这个模块干点事情了:
-
-``` html
-<template>
-  <div>
-    <div class="btn" onclick="handleClick">
-      <text>LOGIN</text>
-    </div>
-  </div>
-</template>
-
-<script>
-  var userHelper = require('@weex-module/user')
-  module.exports = {
-    methods: {
-      handleClick: function () {
-        userHelper.login(function () {
-          // ... do sth. in callback.
-        })
-      }
-    }
-  }
-</script>
-```
-
-### 定制加载器loader
-
-**Loader仅用于weex-html5 (web端)加载dsl打包出来的bundle代码,native平台有其他的加载机制**
-
-已有的加载器包括 `xhr`, `jsonp` 和 `source`. 你可以使用 `weex.registerLoader` 注册一个新的加载器。例如,你有一个获取 Weex bundle 的服务 `myServe.getWeexBundle` , 通过这个服务可以加载 weex bundle,为此你可以定义一个加载器:
-
-``` javascript
-function loadByMyServe(pageId, callback) {
-  myServe.getWeexBundle(pageId).then(function (bundle) {
-    callback(bundle)
-  }).catch(function(err) {
-    callback(err)
-  })
-}
-
-// 暴露init方法用于Weex安装此加载器.
-export default {
-  init (Weex) {
-    Weex.registerLoader('myserve', loadByMyServe)
-  }
-}
-```
-
-在你的 weex-html5 项目的启动文件里安装并使用这个加载器:
-
-``` javascript
-import Weex from 'weex-html5'
-
-// 或者import from './myserve.js',不管是import一个npm模块还是import一个文件.
-import loader from 'myLoader'
-
-Weex.install(loader)
-
-// 在init方法里使用这个加载器加载bundle文件.
-(function () {
-  function getUrlParam (key) {
-    const reg = new RegExp('[?|&]' + key + '=([^&]+)')
-    const match = location.search.match(reg)
-    return match && match[1]
-  }
-  const page = getUrlParam('page') || 'examples/build/index.js'
-  Weex.init({
-    appId: location.href,
-    loader: 'myserve',  // 使用刚才定义的loader类型
-    source: page,
-    rootId: 'weex'
-  })
-})();
-```
-
-以上是 Weex 带来的扩展性里比较主要的一部分,更多实现细节可以在 [weex 项目代码库](https://github.com/alibaba/weex)以及 weex 的开源社区里找到。
diff --git a/_drafts/v1.0/advanced/extend-to-ios.md b/_drafts/v1.0/advanced/extend-to-ios.md
deleted file mode 100644
index b163d62..0000000
--- a/_drafts/v1.0/advanced/extend-to-ios.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: iOS 扩展
-type: advanced
-order: 10
-has_chapter_content: true
-version: 0.10
----
-
-## iOS 扩展
-
-### Module 扩展
-
-[swift](https://github.com/weexteam/article/issues/55) 扩展 module 
-
-Weex SDK 只提供渲染,而不是其他的能力,如果你需要 像网络,图片,URL跳转这些特性,需要自己动手实现他们
-例如,如果你想实现一个url地址跳转函数,你可以按照如下步骤实现一个 Module
-1. **自定义module的步骤**
-   1. 自定义的module类 必须实现 `WXModuleProtocol`
-   2. 必须添加宏`WX_EXPORT_METHOD`, 它可以被weex识别,它的参数是 JavaScript调用 module指定方法的参数
-   3. 添加`@synthesized weexInstance`,每个moudle对象被绑定到一个指定的实例上
-   4. Module 方法会在UI线程中被调用,所以不要做太多耗时的任务在这里,如果要在其他线程执行整个module 方法,需要实现`WXModuleProtocol`中`- (NSThread *)targetExecuteThread`的方法,这样,分发到这个module的任务会在指定的线程中运行
-   5. Weex 的参数可以是 String 或者Map
-   6. Module 支持返回值给 JavaScript中的回调,回调的类型是`WXModuleCallback`,回调的参数可以是String或者Map
-      
-      ```object-c
-      @implementation WXEventModule
-      @synthesize weexInstance;
-         WX_EXPORT_METHOD(@selector(openURL:callback))
-      - (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
-      {
-          NSString *newURL = url;
-          if ([url hasPrefix:@"//"]) {
-              newURL = [NSString stringWithFormat:@"http:%@", url];
-          } else if (![url hasPrefix:@"http"]) {
-             newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
-          }
-      
-          UIViewController *controller = [[WXDemoViewController alloc] init];
-          ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
-      
-          [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
-          callback(@{@"result":@"success"});
-      }
-      
-      @end
-      ```
-2. **Register the module**
-   通过调用 WXSDKEngine 中的 `registerModule:withClass`方法来注册自己的module
-   
-   ```object-c
-   WXSDKEngine.h
-   /**
-   *  @abstract Registers a module for a given name
-   *  @param name The module name to register
-   *  @param clazz  The module class to register
-   **/
-   + (void)registerModule:(NSString *)name withClass:(Class)clazz;
-   [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-   ```
-3. **使用自己的module**
-    这里的  require 里面的event 就是在 上一步调用`registerModule:` 注册module 时候的name
-   
-   ```javascript
-    var eventModule = require('@weex-module/event'); 
-    eventModule.openURL('url',function(ret) {   
-        nativeLog(ret);
-    });
-   ```
-   
-   Weex SDK没有 图片下载,navigation 操作的能力,请大家自己实现这些 protocol
-
-### handler 扩展
-   **WXImgLoaderProtocol**  
-
-   weexSDK 没有提供图片下载的能力,需要实现 WXImgLoaderProtocol,参考下面的例子
-   
-   ```object-c
-   WXImageLoaderProtocol.h
-   @protocol WXImgLoaderProtocol <WXModuleProtocol>
-   /**
-    * @abstract Creates a image download handler with a given URL
-    * @param imageUrl The URL of the image to download
-    * @param imageFrame  The frame of the image you want to set
-    * @param options : The options to be used for this download
-    * @param completedBlock : A block called once the download is completed.
-      image : the image which has been download to local.
-      error : the error which has happened in download.
-      finished : a Boolean value indicating whether download action has finished.
-   */
-   -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;
-   @end
-   ```
-   
-   实现上述协议  
-   
-   ```object-c
-   @implementation WXImgLoaderDefaultImpl
-   #pragma mark -
-   #pragma mark WXImgLoaderProtocol
-   
-   - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
-   {
-       if ([url hasPrefix:@"//"]) {
-           url = [@"http:" stringByAppendingString:url];
-       }
-       return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {     
-       } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
-       if (completedBlock) {
-           completedBlock(image, error, finished);
-       }
-       }];
-   }
-   @end
-   ```
-
-5. **handler注册** 
- 
-   你可以通过WXSDKEngine 中的 `registerHandler:withProtocol`注册handler
-   
-   ```object-c
-   WXSDKEngine.h
-   /**
-   * @abstract Registers a handler for a given handler instance and specific protocol
-   * @param handler The handler instance to register
-   * @param protocol The protocol to confirm
-   */
-   + (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-   
-   [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]
-   ```
-
-#### Component 扩展
-   虽然WeexSDK中有提供内置的一些Component,但这有可能并不能满足你的需求。在之前你可能已经写了一些很酷炫native的组件,想包装一下,导入到Weex中,因此我们提供了让开发者实现自己的native Component   
-   下面将以WeexSDK 中已经存在的 Component:`image`为例子,介绍一下如何构建一个native Component.
-   假设你已经了解IOS开发  
-   1. 注册 Component  
-      注册一个component比较简单,调用 `WXSDKEngine` 中的 `registerComponent:withClass:`方法,传入组件的标签名称,还有对应的class  
-      然后你可以创建一个 `WXImageComponent` 表示`image`组件的实现     在.we 文件中,只需要写 
-          <image></image>  
-   2. 添加属性   
-      现在我们要做一些让image component更加强大的事情。既然作为一个图片的component,那它应该要有源,给他加上一个 `src`的属性,同时给它加上一个`resize`的属性(可以配置的有`contain/cover/stretch`)
-      
-  ```
-  @interface WXImageComponent ()
-  
-  @property (nonatomic, strong) NSString *imageSrc;
-  @property (nonatomic, assign) UIViewContentMode resizeMode;
-  
-  @end
-  ```
-   component中所有的style,attribute,events都会被传递到 Component的初始化方法中,所以,你可以在初始化方法中存储你感兴趣的一些属性值
-      
-  ```
-  @implementation WXImageComponent
-  
-  - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-  {
-      if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
-          _imageSrc = [WXConvert NSString:attributes[@"src"]];
-          _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-  }
-  
-      return self;
-  }
-  
-  @end
-  ```
-      
-   attribute中拿到的值的类型都是`id`,我们可以用转换方法把它转换到任何值。Weex SDK提供了一些基础的转换方法,可以参考 `WXConvert`类,或者你可以添加自己的转换函数
-   
-   1. Hooking 渲染生命周期  
-         native 的component 是由Weex管理的,weex 创建,布局,渲染,销毁。weex的component生命周期都是可以hook的,你可以在这些生命周期中去做自己的事情
-      
-  | 方法 | 描述 |
-  | :-: | --- |
-  | initWithRef:type:... | 用给定的属性初始化一个component. |
-  | layoutDidFinish | 在component完成布局时候会调用. |
-  | loadView | 创建component管理的view. |
-  | viewWillLoad | 在component的view加载之前会调用. |
-  | viewDidLoad | 在component的view加载完之后调用. |
-  | viewWillUnload | 在component的view被释放之前调用. |
-  | viewDidUnload | 在component的view被释放之后调用. |
-  | updateStyles: | 在component的style更新时候调用. |
-  | updateAttributes: | 在component的attribute更新时候调用. |
-  | addEvent: | 给component添加event的时候调用. |
-  | removeEvent: | 在event移除的时候调用. |
-      
-   在image component的例子里面,如果我们需要我们自己的image view 的话,可以复写 `loadView`这个方法.
-   
-   ```
-   - (UIView *)loadView
-   {
-       return [[WXImageView alloc] init];
-   }
-   ```
-   
-   现在我们使用 `WXImageView` 渲染 `image` component。  
-   1. 作为一个image component,我们需要拿到服务器图片,而且把它设置进image view 里. 这个操作可以在 `viewDidLoad` 方法中做,这个方法是在view已经被创建而且加载了时候weex SDK会调用到,而且`viewDidLoad`这个方法是你做额外初始化工作比如改变content mode(也就是设置resize) 的最好时间.
-   
-   ```
-   - (void)viewDidLoad
-   {
-       UIImageView *imageView = (UIImageView *)self.view;
-       imageView.contentMode = _resizeMode;
-       imageView.userInteractionEnabled = YES;
-       imageView.clipsToBounds = YES;
-       imageView.exclusiveTouch = YES;
-   
-       // Do your image fetching and updating logic
-   }
-   ```
-   
- 1. 如果可以改变image的src,也可以hook `updateAttributes:`方法来做属性更新操作,当`updateAttributes:`或者 `updateStyles:`被调用的时候, component的view 已经加载完成
-   
-   ```
-   - (void)updateAttributes:(NSDictionary *)attributes
-   {
-       if (attributes[@"src"]) {
-           _imageSrc = [WXConvert NSString:attributes[@"src"]];
-           // Do your image updating logic
-       }
-   
-       if (attributes[@"resize"]) {
-           _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
-           self.view.contentMode = _resizeMode;
-       }
-   }
-   ```
-   
-   或许你需要考虑更多的生命周期方法去Hook,当布局完成时候,像`layoutDidFinish`,如果你想了解更多,可以参考一下`WXComponent.h` 声明的方法
-   现在你可以用在任何 .we文件里面使用 `<image>`,而且可以加上 image的属性
-   
-   ```
-   <image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-   ```
-##### component 方法
-WeexSDK 0.9.5 之后支持了在js中直接调用component的方法,这里提供一个例子,
-
-- 自定义一个WXMyCompoenent 的组件
-
-    ```
-    @implementation WXMyComponent
-    WX_EXPORT_METHOD(@selector(focus)) // 暴露该方法给js
-    - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-    {
-        if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
-            // handle your attributes
-            // handle your styles
-        }
-        
-        return self;
-    }
-    
-    - (void)focus
-    {
-        NSLog(@"you got it");
-    }
-    @end
-    ```
-	
-- 注册组件 `[WXSDKEngine registerComponent:@"mycomponent" withClass:[WXMyComponent class]] `
-- 在weex 文件中调用
-
-  ```html
-  <template>
-    <mycomponent id='mycomponent'></mycomponent>
-  </template>
-  <script>
-    module.exports = {
-      created: function() {
-        this.$el('mycomponent').focus();
-      }
-    }
-  </script>
-  ``` 
- 
- 
- 
- 
\ No newline at end of file
diff --git a/_drafts/v1.0/advanced/how-data-binding-works.md b/_drafts/v1.0/advanced/how-data-binding-works.md
deleted file mode 100644
index a905422..0000000
--- a/_drafts/v1.0/advanced/how-data-binding-works.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 数据绑定原理
-type: advanced
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# 数据绑定实现原理
-
-Weex 的 JS Framework 是一个 MVVM,即 Model-View-ViewModel 框架。他会自动监听数据的变化,并通过 `{% raw %}{{字段名}}{% endraw %}` 的语法把数据和视图中所展示的内容自动绑定起来。当数据被改写的时候,视图会自动根据数据的变化而发生相应的变化。
-
-比如下面这个例子,`<text>` 的内容被绑定在了 `notes` 数据字段上:
-
-```html
-<template>
-  <div>
-    <text>{{notes}}</text>
-  </div>
-<template>
-
-<script>
-  module.exports = {
-    data: {
-      notes: 'Hello'
-    }
-  }
-</script>
-```
-
-Weex 的 JS Framework 会首先对 `data` 里的数据进行监听,这样未来的数据变化都能够被监听到。然后我们会编译整个 `<template>` 标签里的内容。当我们找到 `<text>` 标签里的 `{% raw %}{{notes}}{% endraw %}` 时,JS Framework 会跟踪 `data.notes` 的变化并在其发生变化时触发一个句柄,将 `<text>` 的内容设置为 `data.notes` 最新的值。这样的话开发者就不必手动关心数据和视图之间的数据同步问题了。
-
-在这个基础上我们还设计了一些特殊的语法:
-
-- `<foo if="...">` 代表一个条件监听,当其值为 `true` 时,`<foo>` 元素将会被创建和载入,反之则不会被创建或被移除掉。
-- `<foo repeat="...">` 代表一个列表监听,第一次加载的时候 `<foo>` 元素会被按照数组里的数据逐条 clone 并赋值。而当有列表项增加、移动或移除时,视图层也会自动触发相应的改变,并且智能优化至最小变更策略
-- `<foo if="..." repeat="...">` 两个特殊语法共用时,将会优先展开 `repeat` 然后逐条判断 `if`。
-
-相比于一些 virtual-DOM 的 diff 计算机制,我们会直接对数据进行 diff,而且只会 diff 由于用户操作或数据操作发生改变的那部分数据和视图,这是一种更小范围的计算方式。尤其在追求轻量快速的移动端界面上,这种更新机制更加显得具有优势。
diff --git a/_drafts/v1.0/advanced/images/how-arch.png b/_drafts/v1.0/advanced/images/how-arch.png
deleted file mode 100644
index a13df7a..0000000
--- a/_drafts/v1.0/advanced/images/how-arch.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/advanced/images/how-render.png b/_drafts/v1.0/advanced/images/how-render.png
deleted file mode 100644
index db9b0f4..0000000
--- a/_drafts/v1.0/advanced/images/how-render.png
+++ /dev/null
Binary files differ
diff --git a/_drafts/v1.0/advanced/index.md b/_drafts/v1.0/advanced/index.md
deleted file mode 100644
index 8fea01e..0000000
--- a/_drafts/v1.0/advanced/index.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Weex 工作原理
-type: advanced
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# Weex 工作原理概述
-
-## 总览
-
-Weex是跨平台,可扩展的动态化技术. 你能通过在Weex源码中写`<template>`, `<style>` 和  `<script>`标签,然后把这些标签转换为JS Bundle用于部署, 在服务端以这些JS Bundle响应请求. 当客户端接收到JS Bundle时,它能用被客户端中的JS引擎用于管理Native渲染;API调用和用户交互.
-
-### 工作流
-
-```
-Weex we 文件 --------------前端(we源码)
-↓ (转换) ------------------前端(构建过程)
-JS Bundle -----------------前端(JS Bundle代码)
-↓ (部署) ------------------服务器
-在服务器上的JS bundle  ----服务器
-↓ (编译) ------------------ 客户端(JS引擎)
-虚拟 DOM 树 --------------- 客户端(Weex JS Framework)
-↓ (渲染) ------------------ 客户端(渲染引擎)
-Native视图 ---------------  客户端(渲染引擎)
-```
-
-在上面的工作流中,我们提到:
-
-- Transformer(转换器):  一个Node JS工具, 转换Weex源码为JS Bundle  
-- Weex JS Framework(JS框架): 运行于客户端的的JS框架,管理着Weex实例的运行。Weex实例由JS Bundle创建并构建起虚拟DOM树. 另外,它发送/接受 Native 渲染层产生的系统调用,从而间接的响应用户交互。
-- Native引擎:  在不同的端上,有着不同的实现: iOS/Android/HTML5. 他们有着共同的组件设计, 模块API 和渲染效果. 所以他们能配合同样的 JS Framework 和  JS Bundle工作。
-
-## 转换器
-
-转换器转换Weex源码为JS Bundle. 整体工作可以分为三个部分:
-
-- 转换 `<template>` 为类JSON的树状数据结构, 转换数据绑定为返回数据的函数原型.例如. For example: `<foo a="{% raw %}{{x}}{% endraw %}" b="1" />` 将转换为 `{type: "foo", attr: {a: function () {return this.x}, b: 1}}`.
-- 转换 `<style>` 为类JSON的树状数据结构. 例如: `.classname {name: value;}` 将转换为 `{classname: {name: value}}`.
-- 把上面两部分的内容和 `<script>` 中的内容结合. 上面的三个部分将结合成一个JavaScript AMD 模块.
-
-一个完整的例子:
-
-```html
-<template>
-  <foo a="{{x}}" b="1" class="bar"></foo>
-</template>
-<style>
-  .bar {width: 200; height: 200}
-</style>
-<script>
-  module.exports = {
-    data: function () {
-      return {x: 100}
-    }
-  }
-</script>
-```
-
-将转换为:
-
-```javascript
-define('@weex-component/main', function () {
-  module.exports = {
-    data: function () {
-      return {x: 100}
-    }
-  }
-  module.template = {
-    type: "foo",
-    attr: {
-      a: function () {return this.x},
-      b: 1,
-      classname: ['bar']
-    }
-  }
-  module.style = {
-    bar: {width: 200, height: 200}
-  }
-})
-bootstrap('@weex-component/main')
-```
-
-除此之外,转换器还会做一些额外的事情: 合并Bundle ,添加引导函数,配置外部数据等等,更详细的,请参阅[Synatax](../references/specs/js-bundle-format.html)章节.
-
-## 注意
-
-当前大部分Weex工具最终输出的JS Bundle格式都经过了[Webpack](https://webpack.github.io/)的二次处理,所以你实际使用工具输出的JS Bundle会和上面的有所区别.
-## JS Framework
-
-JS Framework 在初始化阶段被原生 JavaScript 引擎运行. 它提供被每个JS Bundle调用的 `define()` 和 `bootstrap()` 函数.  一旦JS Bundle从服务器下载后,这些函数就会执行. `define()` 函数以注册模块;`bootstrap()`会编译主要的模块为虚拟DOM,并发送渲染指令给Native .
-
-JS 和 Native 的沟通主要通过两个关键方法进行:
-
-- `callNative` 是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如 `rendering`, `networking`, `authorizing`和其他客户端侧的 `toast` 等API.
-- `callJS` 是一个由JS实现的函数,  它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.
-## Native 渲染引擎
-
-Native 渲染引擎提供客户端组件和模块.
-
-**Component(组件)** 在屏幕内可见,有特定行为. 能被配置不同的属性和样式,能响应用户交互. 常见的组件有:  `<div>`, `<text>`, `<image>`.
-
-**Module(模块)** 是一组能被JS Framework调用的API. 其中的一些能以异步的方式调用JS Framework, 例如: 发送HTTP请求.
-
-在Weex实例运行期间,Native渲染引擎将接收各种各样不同模块的API调用。这些调用创建或更新组件外观,运行如`toast`的Native API.当用户交互或模块回调时,`callJS()`会由JS Framework调用.  这样的循环往复将从Weex实例初始化到销毁一直持续. 如下面的架构图所示, HTML5渲染引擎提供和Native渲染引擎几乎一致的功能。 
-
-![arch](http://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png)
-
-Weex架构图
-
-### 从Javascript中调用Native
-
-```
-[JS Framework]
-↓ callNative
-模块 APIs
-  渲染 -> 模块显示
-  其他功能
-[Native 渲染引擎]
-```
-### 从Native中调用Javascript
-
-```
-[Native 渲染引擎]
-模块 APIs 回调
-用户交互
-↓ callJS
-[JS Framework]
-```
-### 渲染流程
-
-![render flow](http://gtms03.alicdn.com/tps/i3/TB1_SA4MXXXXXXGaXXXpZ8UVXXX-519-337.png)  
-
-Weex 渲染流程
-
-1. 虚拟DOM.
-2. **构造树结构**. 分析虚拟DOM JSON数据以构造渲染树(RT).
-3. **添加样式**. 为渲染树的各个节点添加样式.
-4. **创建视图**. 为渲染树各个节点创建Native视图.
-5. **绑定事件**. 为Native视图绑定事件.
-6. **CSS布局**.  使用 [css-layout](https://github.com/facebook/css-layout) 来计算各个视图的布局.
-7. **更新视窗(Frame)**. 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
-8. 最终页面呈现.
-
-在Weex HTML5环境下 `CSS 布局` and `更新视窗` 由浏览器引擎(例如webkit)实现.
diff --git a/_drafts/v1.0/advanced/integrate-devtools-to-android.md b/_drafts/v1.0/advanced/integrate-devtools-to-android.md
deleted file mode 100644
index 5bffd05..0000000
--- a/_drafts/v1.0/advanced/integrate-devtools-to-android.md
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: 集成 Devtools 到 Android
-type: advanced
-order: 12
-has_chapter_content: true
-version: 0.10
----
-
-# 集成 Devtools 到 Android
-
-Weex Devtools 能够方便调试 Weex 页面,但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools,在本章将会详细说明 Android 端如何接入 Weex Devtools。
-
-## Android 应用接入
-
-### 添加依赖
-
-可以通过 Gradle 或者 Maven 添加对 devtools aar 的依赖,也可以直接对源码依赖。强烈建议使用最新版本,因为 Weex SDK 和 devtools 都在快速的迭代开发中,新版本会有更多惊喜,同时也修复老版本中一些问题。最新的 release 版本可在[这里](https://github.com/weexteam/weex_devtools_android/releases)查看。所有的 release 版本都会发布到 [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector)。
-
-- *Gradle 依赖*
-
-  ```gradle
-  dependencies {
-    compile 'com.taobao.android:weex_inspector:0.8.0.0'
-  }
-  ```
-
-- *Maven依赖*
-
-  ```xml
-  <dependency>
-    <groupId>com.taobao.android</groupId>
-    <artifactId>weex_inspector</artifactId>
-    <version>0.8.0.0</version>
-    <type>pom</type>
-  </dependency>
-  ```
-
-- *源码依赖*
-  
-  需要复制 [inspector](https://github.com/weexteam/weex_devtools_android/tree/master/inspector) 目录到你的 App 的同级目录,然后在工程的 `settings.gradle` 文件下添加 `include ":inspector"`,此过程可以参考 playground 源码的工程配置及其配置,然后在 App 的 `build.gralde` 中添加依赖。
-
-  ```gradle
-  dependencies {
-    compile project(':inspector')
-  }
-  ```
-
-  另外 weex_inspector 中有一部分包是以 provided 的方式引入,接入方需要自行解决依赖和版本冲突。
- 
-  - **provided方式引用的包**
-
-    ```gradle
-      dependencies {
-        provided 'com.google.code.findbugs:jsr305:2.0.1'
-        provided 'com.android.support:appcompat-v7:23.1.1'
-        provided 'com.taobao.android:weex_sdk:0.8.0'
-        provided 'com.alibaba:fastjson:1.1.45+'
-        ...
-      }
-    ```
- 
-  - **反射引用的包(0.8.0.0以上版本)**
-
-    ```gradle
-      dependencies {
-        compile 'com.squareup.okhttp:okhttp:2.3.0'
-        compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
-        ...
-      }
-    ```
- 
-    或者
- 
-    ```gradle
-    dependencies {
-      compile 'com.squareup.okhttp:okhttp:3.4.1'
-      compile 'com.squareup.okhttp:okhttp-ws:3.4.1'
-        ...
-    }
-    ```
-
-#### 版本兼容
-
-| weex sdk | weex inspector | Debugger Server |
-|----------|----------------|-----------------|
-| 0.8.0.1+ | 0.0.8.1+       | 0.2.39+         |
-| 0.7.0+   | 0.0.7.13       | 0.2.38          |
-| 0.6.0+   | 0.0.2.2        | -               |
-
-
-### 添加 Debug 模式开关
-
-控制调试模式的打开和关闭的关键点可以概括为三条规则。
-
-**规则一:通过 `sRemoteDebugMode` 和 `sRemoteDebugProxyUrl` 和来设置开关和 Debugger Server 地址。**
-
-Weex SDK 的 `WXEnvironment` 类里有一对静态变量标记了 Weex 当前的调试模式是否开启分别是:
-
-```java
-public static boolean sRemoteDebugMode; // 是否开启 debug 模式,默认关闭
-public static String sRemoteDebugProxyUrl; // DebugServer的websocket地址
-```
-
-无论在 App 中无论以何种方式设置 Debug 模式,都必须在恰当的时机调用类似如下的方法来设置 `WXEnvironment.sRemoteDebugMode` 和 `WXEnvironment.sRemoteDebugProxyUrl`。
-
-```java
-private void initDebugEnvironment(boolean enable, String host) {
-  WXEnvironment.sRemoteDebugMode = enable;
-  WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-}
-```
-
-**规则二:修改 `sRemoteDebugMode` 后一定要调用``WXSDKEngine.reload()`。**
-
-一般來說,在修改了 `WXEnvironment.sRemoteDebugMode` 以后调用了 `WXSDKEngine.reload()` 方法才能够使 Debug模式生效。`WXSDKEngine.reload()` 用来重置 Weex 的运行环境上下文,在切换调试模式时需要调用此方法来创建新的 Weex 运行时和 DebugBridge 并将所有的 JS 调用桥接到调试服务器执行。在 reload 过程中会调用 launchInspector,这就是 SDK 控制 Debug 模式最核心一个方法,其传入参数即为 `sRemoteDebugMode`,若为 `true` 则该方法中尝试以反射的方式获取 DebugBridge 用来在远端执行 JS,否则在本地运行。
-
-```java
-private void launchInspector(boolean remoteDebug) {
-  if (WXEnvironment.isApkDebugable()) {
-    try {
-      if (mWxDebugProxy != null) {
-        mWxDebugProxy.stop();
-      }
-      HackedClass<Object> debugProxyClass = WXHack.into("com.taobao.weex.devtools.debug.DebugServerProxy");
-      mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)
-              .getInstance(WXEnvironment.getApplication(), WXBridgeManager.this);
-      if (mWxDebugProxy != null) {
-        mWxDebugProxy.start();
-        if (remoteDebug) {
-          mWXBridge = mWxDebugProxy.getWXBridge();
-        } else {
-          if (mWXBridge != null && !(mWXBridge instanceof WXBridge)) {
-            mWXBridge = null;
-          }
-        }
-      }
-    } catch (HackAssertionException e) {
-      WXLogUtils.e("launchInspector HackAssertionException ", e);
-    }
-  }
-}
-```
-
-只要遵循上面的原理,开启 Debug 模式的方式和时机可由接入方灵活实现。从 launchInspector 可以看到,SDK 对 devtools 的 aar 包并无强依赖,我们的 App 只需要在 Debug 包中打包该 aar 即可,这样多少可以缓解包大小问题和安全问题。
- 
-**例外:** _若修改 `WXEnvironment.sRemoteDebugMode` 的时机在 `WXBridgeManager` 初始化和 restart 和之前则 `WXSDKEngine.reload()` 可忽略._
-
-**规则三:通过响应 `ACTION_DEBUG_INSTANCE_REFRESH` 广播及时刷新。**
-
-广播 `ACTION_DEBUG_INSTANCE_REFRESH` 在调试模式切换和 Chrome 调试页面刷新时发出,主要用来通知当前的 Weex容器以 Debug 模式重新加载当前页。在 playground 中的处理过程如下:
-
-```java
-public class RefreshBroadcastReceiver extends BroadcastReceiver {
-  @Override
-  public void onReceive(Context context, Intent intent) {
-    if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {
-      if (mUri != null) {
-        if (TextUtils.equals(mUri.getScheme(), "http") || TextUtils.equals(mUri.getScheme(), "https")) {
-          loadWXfromService(mUri.toString());
-        } else {
-          loadWXfromLocal(true);
-        }
-      }
-    }
-  }
-}
-```
-
-如果接入方的容器未对该广播做处理,那么将不支持刷新和调试过程中编辑代码时的 watch 功能。
-
-## 接入示例
-
-最简单方式就是复用 Playground 的相关代码,比如扫码和刷新等模块,但是扫码不是必须的,它只是与 App 通信的一种形式,二维码里的包含DebugServer IP 及 bundle 地址等信息,用于建立 App 和 Debugger Server 之间的连接及动态加载 bundle。在 Playground 中给出了两种开启 debug 模式的范例。
-
-* 范例1:通过在 `XXXApplication` 中设置开关打开调试模式
-
-```java
-public class MyApplication extends Application {
-  public void onCreate() {
-  super.onCreate();
-  initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
-  }
-}
-```
-
-这种方式最直接,在代码中直接 hardcode 了开启调试模式,如果在 SDK 初始化之前调用甚至连 `WXSDKEngine.reload()` 都不需要调用,接入方如果需要更灵活的策略可以将 `initDebugEnvironment(boolean enable, String host)` 和 `WXSDKEngine.reload()` 组合在一起在合适的位置和时机调用即可。
-
-* 范例2:通过扫码打开调试模式
-
-Playground 中较多的使用扫码的方式传递信息,不仅用这种方式控制 Debug 模式的开关,而且还通过它来传入 bundle 的 url 直接调试。应当说在开发中这种方式是比较高效的,省去了修改 SDK 代码重复编译和安装 App 的麻烦,缺点就是调试工具这种方式接入需要 App 具有扫码和处理特定规则二维码的能力。除了 Playground 中的方式,接入方亦可根据业务场景对 Debugger 和接入方式进行二次开发。
-
-Playground 集成的具体代码可参考如下两个文件:
-
-* 开关控制,主要参考对二维码的处理部分,详见 [`WXApplication.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java)
-
-* 刷新控制 ,主要参考是对容器 `ACTION_DEBUG_INSTANCE_REFRESH`的处理,详见 [`WXPageActivity.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java)
-
-## 牛刀小试
-
-### 前置工作 
-
-如果未安装 Debugger Server,在命令行执行 `npm install -g weex-toolkit` 既可以安装调试服务器,运行命令 `weex debug` 就会启动 DebugServer 并打开一个调试页面(详情请查看 [本地开发](/develop-on-your-local-machine.md))。页面下方会展示一个二维码,这个二维码用于向 App 传递 Server 端的地址建立连接。
-
-![_](https://img.alicdn.com/tps/TB1aKy4NXXXXXacXVXXXXXXXXXX-1019-756.png)
-
-### 开始调试
-
-如果你的 App 客户端完成了以上步骤那么恭喜你已经接入完毕,可以愉快的调试 Weex bundle 了,调试体验和网页调试一致!建议新手首先用官方的 Playground 体验一下调试流程。只需要启动 App 扫描 Chrome 调试页面下方的第一个二维码即可建立与 Debugger Server 的通信,Chorome 的调试页面将会列出连接成功的设备信息。
-
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png)
-
-#### 主要步骤如下
-
-1. 如果你要加载服务器上 bundle,第一步就是要让你的 bundle sever 跑起来. 在 Playground 中特别简单,只需要你到 Weex 源码目录下,运行 `./start` 即可。
-2. 命令行运行 `weex debug` 启动 Debugger Server,Chrome 将会打开一个网页,在网页下方有一个二维码和简单的介绍。
-3. 启动 App 并确认打开调试模式。你将在上一步中打开的网页中看到一个设备列表,每个设备项都有两个按钮,分别是 `Debugger` 和 `Inspector`。
-4. 点击 `Inspector` Chrome 将创建 Inspector 网页;点击 `Debugger` Chrome 将创建 Debugger 网页;二者是相互独立的功能,不相互依赖。
-
----
-
-## 背景知识
-
-### Devtools 组件介绍
-Devtools 扩展了 [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol),在客户端和调试服务器之间的采用 [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC) 作为通信机制,本质上调试过程是两个进程间协同,相互交换控制权及运行结果的过程。更多细节还请阅读 [Weex Devtools Debugger 的技术选型实录](http://www.atatech.org/articles/59284)这篇文章。
-
-* **客户端**
-
-  Devtools 客户端作为 aar 被集成 App 中,它通过 webscoket 连接到调试服务器,此处并未做安全检查。出于安全机制及包大小考虑,强烈建议接入方只在 debug 版本中打包此 aar。
-
-* **服务器**
-
-  Devtools 服务器端是信息交换的中枢,既连接客户端,又连接 Chrome,大多数情况下扮演一个消息转发服务器和 Runtime Manager 的角色。
-
-* **Web端**
-
-  Chrome 的 V8 引擎扮演着 Bundle javascript runtime 的角色。开启 debug 模式后,所有的 bundle js 代码都在该引擎上运行。另一方面我们也复用了 Chrome 前端的调试界面,例如设置断点,查看调用栈等,调试页关闭则 runtime 将会被清理。
-
-调试的大致过程请参考如下时序图。
-
-![debug sequence diagram](https://img.alicdn.com/tps/TB1igLoMVXXXXawapXXXXXXXXXX-786-1610.jpg "debug sequence diagram")
-
-## FAQ
-
-在各业务接入过程中,陆续发现一些问题,对高频次的问题解答如下,开发中以 weex debug -V 的方式启动 Debugger Server 可以看到 server 端的 log 信息,对照上文中的时序图对于定位问题还是非常有帮助,建议调试中默认开启 server 端 log。
-
-1. **扫码 App 在 DebugServerProxy 中抛出 class not found**
-
-  已知的原因如下:
-
-  * weex_inspector 以 provided 方式引用的包是否引入成功,如 fastjson 等。
-  * weex_inspector 以 compile 方式引用的包是否引入成功,某些 app 重新引入 `com.squareup.okhttp:okhttp:2.3.0` 和 `com.squareup.okhttp:okhttp-ws:2.3.0` 则不再报错。
-  * 混淆规则影响反射。
-
-2. **playground 扫码调试 crash**
-
-  已知的原因如下:
-
-  * 系统为 android 6+,崩溃信息提示进程需要 `android.permission.READ_PHONE_STATE` 权限,代码中未做权限检查,在 0.0.2.7 版本以后已修复,不再需要此权限。
-
-3. **扫码后设备列表页并没有出现我的设备信息**
-
-  已知的原因如下:
-
-  * Debugger Server 和手机在不同网段,被防火墙隔离。
-  * 手机连接了 PC 端的代理,当前尚不支持。
-  * 多进程连接服务器端的同一端口,比如在 Application 的 `onCreate` 中初始化 sdk,若多个进程连接服务器端的同一端口则报错,在 0.0.2.3 版本以后已支持多进程无此问题。
-
-4. **调试过程中频繁刷新连接失败,Server 端提示重新启动 App,非必现**
-
-  已知的原因如下:
-
-  * 多线程操作网络连接引起,在频繁的即断即连时容易触发。在 0.0.7.1 版本已修复。
diff --git a/_drafts/v1.0/advanced/integrate-devtools-to-ios.md b/_drafts/v1.0/advanced/integrate-devtools-to-ios.md
deleted file mode 100644
index 18e0050..0000000
--- a/_drafts/v1.0/advanced/integrate-devtools-to-ios.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: 集成 Devtools 到 iOS
-type: advanced
-order: 13
-has_chapter_content: true
-version: 0.10
----
-
-# 集成 Devtools 到 iOS
-
-Weex Devtools 能够方便调试 Weex 页面,但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools,在本章将会详细说明 iOS 端如何接入 Weex Devtools。
-
-## iOS 应用接入
-
-### 添加依赖
-
-#### 方法一:cocoapods 依赖
-
-在工程目录的 podfile 添加如下代码
- 
-```
-source https://github.com/CocoaPods/Specs.git,
-pod  'WXDevtool',   '0.7.0', :configurations => ['Debug'],
-```
-
-目前有如下几个版本:
-
-0.7.0, 0.6.1, 0.1.1, 0.1.0 [master repo]
-
----
-
-可以通过更新本地 podspec repo,pod search 来查询最新版本,在 podfile 文件添加依赖。
-
-
-*** 推荐在DEBUG模式下依赖。 ***
-
-#### 方法二:github 源码依赖
-
-
-1. [拉取](https://github.com/weexteam/weex-devtool-iOS)最新的WXDevtool代码。
-  
-2. 按照如下图示:直接拖动source目录源文件到目标工程中
-
-  ![drag](https://img.alicdn.com/tps/TB1MXjjNXXXXXXlXpXXXXXXXXXX-795-326.png)
-
-3. 按照红框中配置勾选
-
-  ![_](https://img.alicdn.com/tps/TB1A518NXXXXXbZXFXXXXXXXXXX-642-154.png)
-
-
-  在相对较大的互联网App研发中, framework 静态库被广泛应用,所以推荐使用方法一接入。
-
-### 集成功能
-
-如果按照方法一接入:podfile 的方式,添加头文件包含:
-
-``` 
-#import <TBWXDevtool/WXDevtool.h>
-```
-
-如果按照方法二接入:源码依赖的方式,添加头文件包含:
-
-```
-#import "WXDevtool.h"
-```     
-
-查看 WXDevtool 头文件如下:
-     
-```object-c
-#import <Foundation/Foundation.h>
-
-@interface WXDevTool : NSObject
-/**
-*  set debug status
-*  @param isDebug  : YES:open debug model and inspect model;
-*                    default is NO,if isDebug is NO, open inspect only;
-* */
-+ (void)setDebug:(BOOL)isDebug;
-
-
-/**
-*  get debug status
-* */  
-+ (BOOL)isDebug;
-
-
-/**
-*  launch weex debug
-*  @param url  : ws://ip:port/debugProxy/native, ip and port is your devtool server address
-* eg:@"ws://30.30.29.242:8088/debugProxy/native"
-* */
-+ (void)launchDevToolDebugWithUrl:(NSString *)url;
-
-@end
-``` 
-
-`setDebug`:参数为 `YES` 时,直接开启 debug 模式,反之关闭,使用场景如下所述
-
-在你自己的程序中添加如下代码:
-
-```object-c    
-[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];
-```
-
-其中的 ws 地址正是 Weex debug 控制台中出现的地址,直接 copy 到 `launchDevToolDebugWithUrl` 接口中。
-
-如果程序一启动就开启 Weex 调试,**需要在 WeexSDK 引擎初始化之前**添加代码:
-
-```object-c  
-[WXDevTool setDebug:YES];
-[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];
-```
-    
-#### 附加页面刷新功能  
-
-- 为什么需要页面刷新功能?
-
-  如下图所示,当点击 debug 按钮时,js 的运行环境会从手机端(JavaScriptCore)切换到 Chrome(V8),这时需要重新初始化 Weex 环境,重新渲染页面。页面渲染是需要接入方在自己的页面添加。
-         
-  ![_debug](https://img.alicdn.com/tps/TB1xRHhNXXXXXakXpXXXXXXXXXX-1498-668.png)
-
-- 什么场景下需要添加页面刷新功能? 
-
-  - 点击 debug 按钮调试
-  - 切换 RemoteDebug 开关
-  - 刷新 Chrome 页面(command+R)
-       
-- 如何添加刷新  
-
-  在 Weex 页面初始化或 `viewDidLoad` 方法时添加注册通知,举例如下:
-    
-  ```object-c
-  [[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];
-  ```
-    
-  最后**千万记得**在 `dealloc` 方法中取消通知,如下所示
-    
-  ```
-  - (void)dealloc
-  {
-      [[NSNotificationCenter defaultCenter] removeObserver:self];
-  }
-  ```
-
-  页面刷新实现,先销毁当前 instance,然后重新创建 instance,举例如下:
-
-  ```
-   - (void)render
-    {
-      CGFloat width = self.view.frame.size.width;
-      [_instance destroyInstance];
-      _instance = [[WXSDKInstance alloc] init];
-      _instance.viewController = self;
-      _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
-      
-      __weak typeof(self) weakSelf = self;
-      _instance.onCreate = ^(UIView *view) {
-          [weakSelf.weexView removeFromSuperview];
-          weakSelf.weexView = view;
-          [weakSelf.view addSubview:weakSelf.weexView];
-          UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,  weakSelf.weexView);
-      };
-      _instance.onFailed = ^(NSError *error) {
-          
-      };
-      
-      _instance.renderFinish = ^(UIView *view) {
-          [weakSelf updateInstanceState:WeexInstanceAppear];
-      };
-      
-      _instance.updateFinish = ^(UIView *view) {
-      };
-      if (!self.url) {
-          return;
-      }
-      NSURL *URL = [self testURL: [self.url absoluteString]];
-      NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
-      [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
-  }
-  ```
-
-具体实现可参考 [playground](https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m)  `WXDemoViewController.m` 文件
-
-*说明:目前版本需要注册的通知名称为固定的 “RefreshInstance”,下个版本会添加用户自定义 name 。*
-
-## 使用
-
-如果未安装 Debugger Server,在命令行执行 `npm install -g weex-toolkit` 既可以安装调试服务器,运行命令 `weex debug` 就会启动 DebugServer 并打开一个调试页面(详情请查看 [本地开发](../guide/develop-on-your-local-machine.html))。页面下方会展示一个二维码,这个二维码用于向 App 传递 Server 端的地址建立连接。
-
-
-1. 日志级别控制
-
-  ![_](https://img.alicdn.com/tps/TB1F8WONXXXXXa_apXXXXXXXXXX-1706-674.png)
-  日志级别可以控制native端关于weex的日志。
-
-  日记级别描述如下:
-    
-  ```
-  Off       = 0, 
-  Error     = Error
-  Warning   = Error | Warning,
-  Info      = Warning | Info,
-  Log       = Log | Info,
-  Debug     = Log | Debug,    
-  All       = NSUIntegerMax
-  ```
-
-  解释:off 关闭日志,Warning 包含 Error、Warning,Info 包含 Warning、Info,Log 包含 Info、Log,Debug 包含 Log、Debug,All 包含所有。
-
-2. Vdom/Native tree选择
-
-  ![](https://img.alicdn.com/tps/TB19Yq5NXXXXXXVXVXXXXXXXXXX-343-344.png)
-
-  *图一*
-
-  ![图二](https://img.alicdn.com/tps/TB1vomVNXXXXXcXaXXXXXXXXXXX-2072-1202.png "图二")  
-
-  *图二*
-    
-  点击图一所示native选项会打开图二,方便查看native tree以及view property
-
-  ![vdom](https://img.alicdn.com/tps/TB116y0NXXXXXXNaXXXXXXXXXXX-1448-668.png)
-  
-  *图三*
-
-  ![vdom_tree](https://img.alicdn.com/tps/TB16frmNXXXXXa7XXXXXXXXXXXX-2106-1254.png)  
-  
-  *图四*
-
-  点击图三所示 vdom 选项会打开图四,方便查看 vdom tree 以及 component property。 
diff --git a/_drafts/v1.0/advanced/integrate-to-android.md b/_drafts/v1.0/advanced/integrate-to-android.md
deleted file mode 100644
index b5bbf8c..0000000
--- a/_drafts/v1.0/advanced/integrate-to-android.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: 集成到 Android
-type: advanced
-order: 4
-has_chapter_content: true
-version: 0.10
----
-
-# WEEX SDK 集成到 Android 工程
-
-注:以下文档都是假设您已经具备一定的Android开发经验。
-### Android 集成有两种方式
-
-1. 源码依赖:能够快速使用WEEX最新功能,可以根据自己项目的特性进行相关改进。
-2. SDK依赖:WEEX 会在jcenter 定期发布稳定版本。[jcenter](https://bintray.com/alibabaweex/maven/weex_sdk/view)  
-   注:国内可能需要翻墙
-
-## 前期准备
-
-- 已经安装了[JDK](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) version>=1.7 并配置了环境变量
-- 已经安装[Android SDK](https://developer.android.com/studio/index.html) 并配置环境变量。
-- Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/apache/incubator-weex/blob/master/android/sdk/build.gradle))
-- Android Support Repository >= 17 (for Android Support Library)
-
-## 快速接入
-
-如果你是尝鲜或者对稳定性要求比较高可以使用依赖SDK的方式。  
-步骤如下:  
-1. 创建Android工程,没有什么要特别说明的,按照你的习惯来。
-2. 修改build.gradle 加入如下基础依赖  
-   
-   ```gradle
-   compile 'com.android.support:recyclerview-v7:23.1.1'
-   compile 'com.android.support:support-v4:23.1.1'
-   compile 'com.android.support:appcompat-v7:23.1.1'
-   compile 'com.alibaba:fastjson:1.1.46.android'
-   compile 'com.taobao.android:weex_sdk:0.5.1@aar'
-   ```
-   
-   注:版本可以高不可以低。  
-### 代码实现
-
-注:附录中有完整代码地址
-- 实现图片下载接口,初始化时设置。
-
-```java
-package com.weex.sample;
-
-import android.widget.ImageView;
-
-import com.taobao.weex.adapter.IWXImgLoaderAdapter;
-import com.taobao.weex.common.WXImageStrategy;
-import com.taobao.weex.dom.WXImageQuality;
-
-/**
- * Created by lixinke on 16/6/1.
- */
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
-
-  @Override
-  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
-    //实现你自己的图片下载,否则图片无法显示。
-  }
-}
-```
-- 初始化
-
-```java
-package com.weex.sample;
-
-import android.app.Application;
-
-import com.taobao.weex.InitConfig;
-import com.taobao.weex.WXSDKEngine;
-
-/**
- * 注意要在Manifest中设置android:name=".WXApplication"
- * 要实现ImageAdapter 否则图片不能下载
- * gradle 中一定要添加一些依赖,否则初始化会失败。
- * compile 'com.android.support:recyclerview-v7:23.1.1'
- * compile 'com.android.support:support-v4:23.1.1'
- * compile 'com.android.support:appcompat-v7:23.1.1'
- * compile 'com.alibaba:fastjson:1.1.45'
- */
-public class WXApplication extends Application {
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
-    WXSDKEngine.initialize(this,config);
-  }
-}
-
-```
-- 开始渲染
-
-```java
-package com.weex.sample;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-import android.view.View;
-
-import com.taobao.weex.IWXRenderListener;
-import com.taobao.weex.WXSDKInstance;
-import com.taobao.weex.common.WXRenderStrategy;
-import com.taobao.weex.utils.WXFileUtils;
-
-public class MainActivity extends AppCompatActivity implements IWXRenderListener {
-
-  WXSDKInstance mWXSDKInstance;
-
-  @Override
-  protected void onCreate(Bundle savedInstanceState) {
-    super.onCreate(savedInstanceState);
-    setContentView(R.layout.activity_main);
-
-    mWXSDKInstance = new WXSDKInstance(this);
-    mWXSDKInstance.registerRenderListener(this);
-    /**
-     * WXSample 可以替换成自定义的字符串,针对埋点有效。
-     * template 是.we transform 后的 js文件。
-     * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
-     * jsonInitData 可以为空。
-     * width 为-1 默认全屏,可以自己定制。
-     * height =-1 默认全屏,可以自己定制。
-     */
-    mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
-  }
-
-  @Override
-  public void onViewCreated(WXSDKInstance instance, View view) {
-    setContentView(view);
-  }
-
-  @Override
-  public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
-
-  }
-
-  @Override
-  public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
-
-  }
-
-  @Override
-  public void onException(WXSDKInstance instance, String errCode, String msg) {
-
-  }
-
-
-  @Override
-  protected void onResume() {
-    super.onResume();
-    if(mWXSDKInstance!=null){
-      mWXSDKInstance.onActivityResume();
-    }
-  }
-
-  @Override
-  protected void onPause() {
-    super.onPause();
-    if(mWXSDKInstance!=null){
-      mWXSDKInstance.onActivityPause();
-    }
-  }
-
-  @Override
-  protected void onStop() {
-    super.onStop();
-    if(mWXSDKInstance!=null){
-      mWXSDKInstance.onActivityStop();
-    }
-  }
-
-  @Override
-  protected void onDestroy() {
-    super.onDestroy();
-    if(mWXSDKInstance!=null){
-      mWXSDKInstance.onActivityDestroy();
-    }
-  }
-}
-```
-
-## 源码依赖(IDE Android Studio)
-
-1. 下载源码 `git clone https://github.com/alibaba/weex`
-2. 创建 Android 工程。
-3. 通过以下路径引入 SDK Module  
-   File->New-Import Module-> 选择 WEEX SDK Module(weex/android/sdk) -> Finish  
-4. app 的 build.gradle 中添加如下依赖:`compile project(':weex_sdk')`
-5. 其他设置请参考上面快速接入
-
-### 附录
-
-WXSample地址
-`https://github.com/xkli/WXSample.git`
diff --git a/_drafts/v1.0/advanced/integrate-to-html5.md b/_drafts/v1.0/advanced/integrate-to-html5.md
deleted file mode 100644
index 30ee3fd..0000000
--- a/_drafts/v1.0/advanced/integrate-to-html5.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: 集成到 web
-type: advanced
-order: 6
-has_chapter_content: true
-version: 0.10
----
-
-## 项目中引入 html5 版 Weex
-
-### 简介
-
-Weex 是一个跨平台可扩展的动态化移动框架,能够真正帮助开发者实现'一次开发,到处运行'。由 Weex 提供的相关工具进行打包好的 bundle 文件可以运行在 android, ios 以及 web(这里我们也称之为html5)平台的渲染器上。Weex HTML5 是一个专用于在移动端 webview 以及各种现代浏览器上渲染 weex 文件的渲染器。
-### 获取 Weex HTML5
-
-使用 npm 安装最新版本的 Weex HTML5,并在你的项目中 require 进来。
-#### 从 npm 安装
-
-请确保通过 `npm install` 或者 `npm update` 获取 Weex HTML5 的最新版本 npm 包。更多关于 npm 的信息情查阅 [npm 官方网站](https://docs.npmjs.com/)。
-
-```bash
-npm install weex-html5
-```
-
-通过 require 引入 weex-html5:
-
-```bash
-var weex = require('weex-html5')
-```
-
-**注意:** 介于 Weex 目前仍处于开源内测阶段,还没有完全开放源代码,因此 `weex-jsframework` 可能还没有在 npm 上发布。当前版本的 `weex-html5` 包含了 `weex-jsframework`,你只需要 require `weex-html5` 即可暂时在 web 平台上运行 weex 代码。建议关注 Weex 的后续版本发布并做必要的引用方式调整。
-### 初始化 Weex
-
-你可以通过 Weex 暴露的 API `init` 来初始化一个 Weex 实例。这个方法需要传递一些配置信息已确定一些环境变量等信息,这些配置信息介绍如下:
-- `appId`: Weex 实例的 id,可以是任意字符串或者数字,并注意不要重复.
-- `source`: 请求的 Weex bundle 文件地址,或者 Weex bundle 文件代码本身,取决于下面的 loader 配置.
-- `loader`: 加载器类型,用于加载 weex bundle,值可以是 'xhr', 'jsonp' 或者 'source'.
-  - `xhr`: 通过 XMLHttpRequest 加载 source(即 weex bundle 的 url 地址).
-  - `jsonp`: 通过 JSONP 加载 weex bundle.
-  - `source`: 直接接受 weex bundle 的代码作为参数.
-- `rootId`: root 容器的 id,默认容器 id 是 'weex'.
-
-以下是一个 Weex 初始化的示例:
-
-``` javascript
-function weexInit() {
-  function getUrlParam (key) {
-    var reg = new RegExp('[?|&]' + key + '=([^&]+)')
-    var match = location.search.match(reg)
-    return match && match[1]
-  }
-
-  var loader = getUrlParam('loader') || 'xhr'
-  var page = getUrlParam('page')
-
-  // 需要指定一个jsonp回调函数名称,如果没有则用默认值'weexJsonpCallback'
-  var JSONP_CALLBACK_NAME = 'weexJsonpCallback'
-
-  window.weex.init({
-    jsonpCallback: JSONP_CALLBACK_NAME,
-    appId: location.href,
-    source: page,
-    loader: loader,
-    rootId: 'weex'
-  })
-}
-
-weexInit()
-```
diff --git a/_drafts/v1.0/advanced/integrate-to-ios.md b/_drafts/v1.0/advanced/integrate-to-ios.md
deleted file mode 100644
index 54a5ca7..0000000
--- a/_drafts/v1.0/advanced/integrate-to-ios.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: 集成到 iOS
-type: advanced
-order: 5
-has_chapter_content: true
-version: 0.10
----
-
-# Weex SDK 集成到 iOS
-
-### cocoaPods 引入 Weex iOS SDK到工程
-
-可以通过源码编译出 Weex SDK,可以在新的 feature 或者 bugfix 分支,尝试最新的 feature
-#### cocoaPods集成
-
-  假设你已经完成了安装[iOS 开发环境](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html) 和 [CocoaPods](https://guides.cocoapods.org/using/getting-started.html)
-
-1. 从 github 上 clone 一份代码    
-   
-   ```
-   git clone https://github.com/alibaba/weex.git
-   ```
-
-2. 把 WeexSDK 导入到你已有的项目,如果没有,可以[参考](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html)新建项目  
-   拷贝 `ios/sdk` 下面目录到你的项目目录,在添加依赖之前,确保项目目录有 `Podfile`,如果没有,创建一个,用文本编辑器打开,添加如下依赖
-
-    如果使用正式版本如 0.6.1 的,就不需要做  拷贝 `ios/sdk` 这个操作,直接引用 cocoaPods 的 master repo 上就可以,这个需要在 Podfile 最前面添加
-
-    ```
-    source 'https://github.com/CocoaPods/Specs.git'
-    ```
-
-    ```object-c
-    target 'YourTarget' do
-        platform :ios, '7.0' 
-        pod 'WeexSDK', :path=>'./sdk/'   # pod 'WeexSDK', '0.6.1'
-    end
-    ```
-
-    在命令行(terminal)中,切换到当前目录,运行 `pod install`, 过一会,项目的 .workspace 结尾的文件就被创建出来,到这步,依赖已经添加完了
-
-3. 初始化 Weex 环境  
-   在 AppDelegate.m 文件中做初始化操作,一般会在 `didFinishLaunchingWithOptions` 方法中如下添加
-   
-   ```object-c
-   //business configuration
-   [WXAppConfiguration setAppGroup:@"AliApp"];
-   [WXAppConfiguration setAppName:@"WeexDemo"];
-   [WXAppConfiguration setAppVersion:@"1.0.0"];
-   
-   //init sdk enviroment   
-   [WXSDKEngine initSDKEnviroment];
-   
-   //register custom module and component,optional
-   [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
-   [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-   
-   //register the implementation of protocol, optional
-   [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
-   
-   //set the log level    
-   [WXLog setLogLevel: WXLogLevelAll];
-   ```
-
-4. 渲染 weex Instance
-   Weex 支持整体页面渲染和部分渲染两种模式,你需要做的事情是用指定的 URL 渲染 weex 的 view,然后添加到它的父容器上,父容器一般都是 viewController
-   
-   ```object-c
-   #import <WeexSDK/WXSDKInstance.h>
-   - (void)viewDidLoad 
-   {
-       [super viewDidLoad];
-   
-       _instance = [[WXSDKInstance alloc] init];
-       _instance.viewController = self;
-       _instance.frame = self.view.frame; 
-   
-       __weak typeof(self) weakSelf = self;
-       _instance.onCreate = ^(UIView *view) {
-           [weakSelf.weexView removeFromSuperview];
-           [weakSelf.view addSubview:weakSelf.weexView];
-       };
-   
-       _instance.onFailed = ^(NSError *error) {
-           //process failure
-       };
-   
-       _instance.renderFinish = ^ (UIView *view) {
-           //process renderFinish
-       };
-       [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
-   }
-   ```
-   
-   WXSDKInstance 是很重要的一个类,提供了基础的方法和一些回调,如`renderWithURL`,`onCreate`,`onFailed`等,可以参见 `WXSDKInstance.h`的  声明
-
-5. 销毁 Weex Instance
-
-   在 viewController 的 dealloc 阶段 销毁掉 weex instance, 释放内存,避免造成内存泄露
-   
-   ```object-c
-   - (void)dealloc
-   {
-       [_instance destroyInstance];
-   }
-   ```
-   
-### 导入 Weex SDK framework到工程
-
-  参考[此处](https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829)直接导入weexSDK
diff --git a/_drafts/v1.0/blog/index.md b/_drafts/v1.0/blog/index.md
deleted file mode 100644
index ef7b31d..0000000
--- a/_drafts/v1.0/blog/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-type: blog
-index: true
-layout: blog
----
\ No newline at end of file
diff --git a/_drafts/v1.0/guide/develop-on-your-local-machine.md b/_drafts/v1.0/guide/develop-on-your-local-machine.md
deleted file mode 100644
index 276a9f9..0000000
--- a/_drafts/v1.0/guide/develop-on-your-local-machine.md
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: 如何在本地开发 Weex 页面
-type: guide
-order: 2
-has_chapter_content: true
-version: 0.10
----
-
-# 如何在本地开发 Weex 页面
-
-使用 [dotWe](http://dotwe.org) 对 Weex 尝鲜是一个不错的选择,但如果你想更专业的开发 Weex, [dotWe](http://dotwe.org) 就不怎么够用了。本章会教你如何搭建本地开发环境进行 Weex 开发。
-
-## 第一步:安装依赖
-
-首先,你需要 Node.js 和 weex-toolkit。
-
-安装 Node.js 方式多种多样,最简单的方式是在 [Node.js 官网](https://nodejs.org/en/) 下载可执行程序直接安装即可。
-
-对于 Mac,可以使用 [Homebrew](http://brew.sh/) 进行安装:
-
-```bash
-brew install node
-```
-
-> 更多安装方式可参考 [Node.js 官方信息](https://nodejs.org/en/download/)
-
-安装完成后,可以使用以下命令检测是否安装成功:
-
-```bash
-$ node -v
-v6.3.1
-$ npm -v
-3.10.3
-```
-
-通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。
-
-> npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。
-
-```bash
-$ npm install -g weex-toolkit    
-```	  
-
-国内开发者可以考虑使用淘宝的 npm 镜像 —— [cnpm](https://npm.taobao.org/) 安装 weex-toolkit
-
-```bash
-$ npm install -g cnpm
-$ cnpm install -g weex-toolkit
-```
-
-*提示:*
-
-如果提示权限错误(*permission error*),使用 `sudo` 关键字进行安装
-
-```bash
-$ sudo cnpm install -g weex-toolkit
-```
-
-安装结束后你可以直接使用 `weex` 命令验证是否安装成功,它会显示 `weex` 命令行工具各参数:
-
-![](https://img.alicdn.com/tps/TB1kHFrOFXXXXaYXXXXXXXXXXXX-615-308.jpg)
-
-## 第2步:创建文件
-
-现在可以开始编写代码了。首先,我们创建一个 `.we` 文件(Weex 程序的文件后缀(扩展名)是 `.we`)。
-
-打开空白的 `hello.we` 文件,输入三个标签,内容为:
- 
-```html
-<template>
-</template>
-
-<style>
-</style>
-
-<script>
-</script>      
-```	
-
-我们在 [Get started](./index.md) 里已经介绍过 Weex 基本的代码结构:`<template>`、`<style>`、`<script>` 分别对应于 Web 中的 HTML,CSS(`<style>` 标签),JavaScript(`<script>` 标签)。
-
-其实,上面的代码就是最简单的 Weex 程序。但是 `.we` 文件是不能直接运行的,这时候需要使用刚才安装好的 weex-toolkit。weex-toolkit 会编译 `.we` 文件,并且创建静态服务器。
-
-这里,使用 `weex hello.we` 命令编译该程序。
-
-```bash
-$ weex hello.we       
-```
-
-这时,命令行会做几件事: 
-
-- 编译 `.we` 文件;
-- 启动热加载服务;
-- 启动静态服务器;
-- 拉起浏览器,访问 `http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr`
-
-这时候,已经可以在浏览器预览 Weex 页面了。不过此时页面是空白的,因为 `.we` 文件中没有任何实质的内容。
-
-## 第3步:添加内容
-
-修改 `weex.we` 文件,向 `<template>` 标签中添加内容。具体代码如下:      
-
-```html
-<template>
-  <div>
-    <text>Hello world</text>
-  </div>
-</template>
-
-<style></style>
-
-<script></script>       
-```
-
-保存代码后,浏览器会自动刷新页面,这时会看到浏览器显示了 “Hello world”。
-
-## 第4步:添加样式
-
-现在,对已有的文本内容进行样式修饰。这里将文本颜色设置为红色,字体大小为 50 像素。具体代码如下:              
-
-```html 
-<template>
-  <div>
-    <text class="text" style="color: #FF0000;">Hello world</text>
-  </div>
-</template>
-
-<style>
-  .text{
-    font-size: 50;
-  }
-</style>
-
-<script></script>
-```
-
-这时候,浏览器已经重新载入了页面。其实,是weex-toolkit开启了热加载。可以看到红色的 “Hello world”。
-
-**注意:**
-Weex 支持通过 `style` 标签来设定样式,也支持内联样式风格。 对于数值,无需添加任何单位(包括 px、em、rem 等),这是建议的写法。如需了解有哪些通用的样式,可以参考 [通用样式](../references/common-style.md)。
-
-## 第5步:预览
-
-已经在浏览器中看到了刚才的代码效果,为了验证三端是否一致,我们还需 [Playground App](https://alibaba.github.io/weex/download.html) 验证。
-
-这里,我们需要为 `weex hello.we` 增加 `--qr` 参数,表示生成二维码。
-
-```bash
-$ weex hello.we --qr
-```
-
-然后,使用 [Playground](https://alibaba.github.io/weex/download.html) 扫码即可。
-
-![mobile_preview](https://img.alicdn.com/tps/TB1fZBpOFXXXXaFXXXXXXXXXXXX-506-1024.jpg)
-
-## 第6步:调试
-
-weex-toolkit 已经集成了 Debugger,只需要使用如下命令即可开启 Debugger 开关调试 `hello.we`:
-
-```bash
-$ weex debug hello.we
-```
-
-我们输入以上命令开启,会自动打开浏览器,页面上有两个二维码,第一个是 Debugger Server,第二个是 `.we` 文件的地址。我们在 Playground 中先扫第一个,此时浏览器会进入一个新的页面,请你选择你需要的调试模式:
-
-- Debugger:将会打开 js debugger 页面,您可以通过 debugger 页面调试 js(诸如打断点 查看js log 和查看调用堆栈等信息);
-- Inspector:将会打开 inspector 页面,您可以通过这个页面查看 Weex 页面的 element 属性结构,包含高亮元素,展示样式表,以及显示 native 的 log。同时可以打开一个远程的手机镜像,便于查看界面。另外调试方块中的 ElementMode 可以用来选择 element 树显示原始的 native 组件树还是显示面向前端同学的 DSL (HTML)组件树。
-
-选择一种模式后会新开窗口进入调试页面,这时我们再扫第二个二维码即可进入我们想要调试的页面进行调试了。
-
-## 接下来做什么?
-
-到目前为止,你已经可以在 [dotWe](http://dotwe.org) 或者本地开发 Weex 页面。接下来你可以去学习 Weex [语法](./syntax/main.md) 和 [开发手册](../references/main.md) 了解 Weex 更多特性。这些语法和特性,你完全可以用 [Playground](https://alibaba.github.io/weex/download.html) 运行起来。
-
-如果你已经熟悉 Weex 开发,你应该考虑如何让你的 App 也支持 Weex 页面,或者,怎样用 Weex 开发一个全新的 App 呢?带着这些问题,你可以阅读 [开发进阶](./how-to/main.md)。
diff --git a/_drafts/v1.0/guide/how-to/debug-with-html5.md b/_drafts/v1.0/guide/how-to/debug-with-html5.md
deleted file mode 100644
index c4ba245..0000000
--- a/_drafts/v1.0/guide/how-to/debug-with-html5.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 在浏览器中调试
-type: guide
-order: 4.2
-version: 0.10
----
-
-# 如何在浏览器中调试?
-
-由于 weex-html5 可以在现代移动浏览器上运行,因此自然支持在浏览器的开发工具中调试 weex-html5 代码。下面将介绍如何使用浏览器的 devTools 调试和分析 weex-html5 程序。以chrome的调试工具为例:
-
-![chrome's debug tool](https://gw.alicdn.com/mt/TB1V1hIMpXXXXaHXVXXXXXXXXXX-983-730.png)
-
-## Elements
-
-使用 Elements 面板来检查 weex-html5 页面的布局和设计,并操纵 DOM 和 CSS 来自由地做一些开发实验。
-
-## Console
-
-您可以使用 `console.log` 在控制台上记录信息。
-
-## 断点
-
-您可以设置断点来调试代码,断点是调试代码的最有效的方法之一。断点使您能够暂停脚本执行,然后查看该时刻的调用堆栈变量值。
-
-手动断点是您在特定代码行上设置的各个断点。您可以通过 Chrome DevTools GUI 或在代码中插入 debugger 关键字来设置这些断点。
-
-## 找出 bug 的精确位置
-
-一般来说,有三个可能发生错误的地方:渲染器(weex-html5),js 框架(weex-js框架)和变压器(gulp-weex)。
-
-这里有一些方便以找出错误建议,以便你可以快速识别哪个是哪个地方的错误:
-
-* 请检查控制台是否有错误。在调试模式如果有一个错误出现,将会在 console 中打印有关于它的信息。
-* 在 bridge/receiver.js,查看是否调用了 `callNative` 函数。
-* 是否被认为是 API 的方法被执行。
-* 是否调用用于事件触发或执行回调的 `callJS` 方法。
-
-## 其他
-
-更多关于如何调试 H5 页面的信息请查看 [chrome's devTools docs](https://developers.google.com/web/tools/chrome-devtools/?hl=en)
-
-
-
-
-
-
diff --git a/_drafts/v1.0/guide/how-to/index.md b/_drafts/v1.0/guide/how-to/index.md
deleted file mode 100644
index c20ecb0..0000000
--- a/_drafts/v1.0/guide/how-to/index.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: 使用 Devtools 调试 Weex 页面
-type: guide
-order: 4
-has_chapter_content: false
-chapter_title: 最佳实践
-version: 0.10
----
-
-# 如何使用 Devtools 调试 Weex 页面
-
-Weex Devtools 是为 Weex 开发者服务的一款调试工具,能够审查 Weex app 运行时属性,可对 `.we` 代码及 JavaScript 代码断点调试,支持 iOS 和 Android 两个平台。
-
-Weex Devtools 基于 Chrome devtools 实现了 [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol),能够使用 Chrome devtools 调试 Weex 项目,其主要功能分为两大部分—— Debugger 和 Inspector。
-
-## Devtools 主要功能一览
-
-### 连接设备
-devtools 可以动态检测客户端的连接绑定请求,同时连接/调试多个 device(或者模拟器)是很容易的事情,连接到 Devtools 的客户端显示在 “Device List” 界面。如下图所示。
-
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png)
-
-点击对应设备的 Debugger 按钮即开始调试流程,并弹出JS断点调试的页面;随后点击 Inspector 按钮可弹出调试 DOM 的页面。
-
-### Debugger
-
-这个是用来调试 Weex 的 JSBundle 代码的页面,“Sources” tab 能够显示所有 JS 源码,包括 Weex JSFramework 和 JSBundle 代码。可以设置断点、查看调用栈,与 Chrome 浏览器调试类似。“Console” 控制台显示前端的 Log 信息,并能根据级别(info/warn/error等)和关键字过滤。
-
-![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png)
-
-### 断点调试
-
-![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png)
-
-### Inspector
-
-Inspector 功能丰富,能够用来查看 `Element` \ `Network` \ `Console log` \ `Screencast` \ `BoxModel` \ `Native View` 等。
-
-![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png)
-
-### Device Screencast & View Inspect
-
-如下图所示,通过 Inspector 页面的两个开关,点击右侧 Icon 可以打开设备投屏,然后点击左侧 Icon 再在投屏上点选元素则可以自动在 DOM tree 中定位并审查该元素。
-
-![screencast-inspect](https://img.alicdn.com/tps/TB1_.20OpXXXXX4XVXXXXXXXXXX-1314-787.png)
-
-### Elements
-
-这里展示的是在 Android/iOS 上的 native DOM 树,及其 style 属性和 layout 图。鼠标在 DOM 树移动时,在 device(或模拟器)上对应节点会高亮显示,有助于 native 开发者定位和发现节点。
-
-**注意:**
-screencast 只是对屏幕图像拷贝,在远程调试时能看到远程设备界面,数据网络下 screencast 也将有较大流量花销,如果设备就在手头儿则建议关掉。
-
-Elements 审查有两种模式分别是:native 和 vdom。其中,native 模式下展示的是 Weex 所映射的 native view 的结构,它更接近实现本质;vdom 模式则对应 `.we` 文件中定义的 dom 结构,主要用来审查 `.we` 文件编译为 JSBundle 之后对应的 dom tree 的逻辑构成。
-
-#### native view element
-
-![native-element](https://img.alicdn.com/tps/TB16L3ENXXXXXcsXVXXXXXXXXXX-2878-1798.png)
-
-#### weex dom element
-
-![dom-element](https://img.alicdn.com/tps/TB1TsMuNXXXXXcsaXXXXXXXXXXX-2450-1460.png)
-
-### Network
-
-这里展示的是 JSBundle 资源加载网络访问的性能。所以如果 JSBundle 资源在设备本地,Network 是没有数据的。
-
-#### 查看网络请求的总耗时和延时
-
-![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png)
-
-#### 查看网络请求的header和response
-
-![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png)
-
-### 控制台
-
-这里显示的是 Android/iOS 上的 native log,并不是 JS log(JS log 显示在 Debugger 页面)。同样 native log 也有对应级别--warn/error 等和关键字过滤,native 开发查询很方便。
-
-![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png)
-
-### 资源(Android Only)
-
-远端访问的资源文件会显示在这里,这里不是查看源码的最佳方式。在 Debugger 页面,“Sources” 里已经有源码并可以断点调试。如果你的应用里有 SQLITE 数据库文件,在这里无需 root 便可以查看和更新,对于 mock 数据来说比较便利。
-
-![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png)
-
-### 远程控制 (Android Only)
- 
-Android 版本支持在 screencast 上进行远程控制,能够通过鼠标模拟在手机的输入事件,方便手机不在本地的用户进行远程调试。
-
-## 如何安装和启动devtools
-
-无论是跑在 iOS 或者 Android 端,[weex-devtool](https://github.com/weexteam/weex-devtool) 都是必需的,用来启动服务器和 Chrome 页面。
-
-### 安装
-
-如果你已经在前面的教程中安装过 weex-toolkit,就无需再次安装了。
-
-```bash
-$ npm install  -g  weex-toolkit
-```
-
-#### 用法
-
- weex debug [options] [we_file|bundles_dir]
-            
-  选项:
-
-    -h, --help           显示帮助
-    -V, --verbose        显示debug服务器运行时的各种log
-    -v, --version        显示版本
-    -p, --port [port]    设置debug服务器端口号 默认为8088
-    -e, --entry [entry]  debug一个目录时,这个参数指定整个目录的入口bundle文件,这个bundle文件的地址会显示在debug主页上(作为二维码)
-    -m, --mode [mode]    设置构建we文件的方式,transformer 最基础的风格适合单文件,loader:wepack风格 适合模块化的多文件.默认为transformer
-
-
-## 如何在设备或者模拟器上调试
-
-### weex调试初体验之playground
-
-如果你是一名 Weex 调试的新手,那么推荐你先下载 [Playground](http://alibaba.github.io/weex/download.html) 体验一下 Devtools 调试 JSBundle 的基础流程.
-
-- 前提: 
-  - 安装 `weex-toolkit`,内含调试命令 `weex debug`
-  - android/iOS 设备与 PC 在同一局域网,若位于不同网段请确保防火墙可访问性
-    
-- Inspector 功能演示
-
-<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803002.swf" quality="high" width="100%" height="500px" align="middle" allowScriptAccess="never" allowFullScreen="true" type="application/x-shockwave-flash"></embed>
-
-- Debugger功能演示
-
-<embed src="//cloud.video.taobao.com/play/u/1955166971/p/2/e/1/t/1/45803641.swf" quality="high" width="100%" height="500px" align="middle" allowScriptAccess="never" allowFullScreen="true" type="application/x-shockwave-flash"></embed>
-
-- 调试步骤:
-  -  **启动 debug server**
-
-  执行命令 `weex debug` 将启动 debug server。如果启动成功将会在 Chrome 打开一个 welcome 页面,在网页下方有一个二维码。
-
-  - **启动 Playground 并扫码**
-
-  点击启首页左上角的扫码按钮扫码上一步中网页下方的二维码。此时 welcome 页面将会出现你的设备信息。Playground 进入 loading 页面,等待你的下一步操作。
-
-  - **点击网页上的 Debugger 按钮**
-
-  app 结束 loading 进入 debugging 状态。同时 Chrome 将会打开 Debugger 页面。按照页面提示打开该页的 JavaScript 控制台并进入 source tab。
-
-  - **设置断点刷新当前页**
-
-  点击 Playground 首页 list 中的任意项将打开一个 Weex 页面,此时在 Sources 里会出现相应的 JSBundle 文件,设置断点并刷新  Playground  即可调试。
-
-  - **点击网页上的 Inspector 按钮**
-
-  Chrome 会打开 inspector页面,可以查看Element, Console, Network状态。
-
-### Weex调试初体验之应用
-
-如果是接入 Weex 的应用想调试自己的 Weex 代码,有以下几个方式:
-
-1. 借助 Playground 扫码调试
-  - 先确定 Playground 已经是可调试状态
-  - 使用命令行工具打开调试功能 `weex debug`,用 Playground 扫浏览器打开的页面中的二维码 
-  - 用 Playground 扫描 JSBundle 二维码
-  - 手机上即显示 Weex 页面的结果。相应在 “Debugger” 和 “Inspector” 页面调试。
-
-2. 为应用接入 Devtools 接口
-
-  - [Android sdk接入指南](https://github.com/weexteam/weex_devtools_android/blob/master/README-zh.html)
-  - [iOS sdk接入指南](https://github.com/weexteam/weex-devtool-iOS/blob/master/README-zh.html)
-
-有任何问题或者建议,请提交[这里](https://github.com/weexteam/weex-devtool/issues),会很快得到解答。
-
-## 更详细的视频讲解
-
-- 第一集 devtools简介
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45796387.swf
-- 第二集 inspector功能演示 
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803002.swf
-- 第三集 debugger功能演示 
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803641.swf
-- 第四集 native 与 weex 联调
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45804472.swf
-- 第五集 第三方App接入指南
-http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45805276.swf
\ No newline at end of file
diff --git a/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md b/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md
deleted file mode 100644
index 7d3748e..0000000
--- a/_drafts/v1.0/guide/how-to/require-3rd-party-libs.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 如何引入第三方库 
-type: guide
-order: 4.3
-version: 0.10
----
-
-# 如何引入第三方库 
-<span class="weex-version">0.4</span>
-
-在 [Get started](../index.html) 中,我们学习了知道可以在 `<script>` 标签中编写 JavaScript 代码。但是在项目中常用的功能或模块,例如解析url参数,将属性从一些对象扩展到另一个对象等等,在每个组件中复制和粘贴这些代码是一个糟糕的做法,因此迫切需要通过 `require` 的方式对可复用的代码进行管理。Weex 为开发人员提供了 CommonJS 风格的 require 语法。
-
-我们以 `extend` 作为例子。
-
-## 引入本地 JS Modules
-
-下面是 `extend` 最简单的实现,并将其放在 `./common/utils.js` 路径中。
-
-```javascript
-function extend(dest, src) {
-  for (var key in src) {
-    dest[key] = src[key]
-  }
-}
-exports.extend = extend
-```
-
-在 `.we` 文件中,`extend` 可以与`require`一起使用:
-
-```html
-<script>
-  var utils = require('./common/utils')
-  var obj1 = {a: 1}
-  var obj2 = {b: 2}
-  utils.extend(obj1, obj2) // obj1 => {a: 1, b: 2}
-</script>
-```
-
-## 引入已经安装的 Node.js Modules
-
-[underscore](http://underscorejs.org) 是一个 JavaScript 库,它提供了一整套函数式编程的实用功能,而不扩展任何 JavaScript 内置对象。它提供了一个更具稳健性的 [`extend`](http://underscorejs.org/#extend)。
-
-我们可以使用 underscore 的 `extend`,而不是我们自己实现的版本。首先,在项目中安装 underscore,然后我们便可以将 underscore  `reuqire` 进来并使用它。
-
-```bash
-npm install underscore
-```
-
-```html
-<script>
-  var _ = require('underscore')
-  var obj1 = {a: 1}
-  var obj2 = {b: 2}
-  var obj3 = {c: 3}
-  var ret = _.extend(obj1, obj2, obj3) // ret => {a: 1, b: 2, c: 3}
-</script>
-```
diff --git a/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md b/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
deleted file mode 100644
index 69667ae..0000000
--- a/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: 将 `.we` 源代码转换成 JS Bundle 
-type: guide
-order: 4.4
-version: 0.10
----
-
-# 将 `.we` 源代码转换成 JS Bundle
-<span class="weex-version">0.4</span>
-
-在前面的章节中你已经了解到如何编写及组织 Weex 代码,如果你还有疑问,可参考 [语法](../syntax/main.html) 及 [手册](../../references/main.html)。 但是,Weex 语法的代码必须转换为 JSBundle,以便 Weex JSFramework 可以在 iOS,Android 和浏览器端解析和执行。了解更多信息,可参考 [Weex 工作原理](../../advanced/how-it-works.html) 和 [JS Bundle 格式](../../references/specs/js-bundle-format.html)
-
-现在,回到将 `.we` 源代码转换成 JS Bundle 的主题。有几种方法来实现这一目标。
-
-## 使用 weex-toolkit
-
-如果你已经有了 node.js 开发环境,可以直接使用以下命令。关于 node.js 及其他依赖安装可参考[安装依赖](../develop-on-your-local-machine.html#第一步:安装依赖)
-```bash
-$npm install -g weex-toolkit
-```
-
-### 将 `.we` 文件转换为 JS Bundle
-
-```bash
-$ weex your_best_weex.we  -o .
-```
-
-`your_best_weex.we` 将会被转换为 `your_best_weex.js` 并保存在当前目录。
-
-### 将 `.we` 文件转换为 JS Bundle 并开启 watch 功能,实时自动转换
-
-```bash
-
-$ weex your_best_weex.we  -o . --watch
-```
-
-### 将所有 `.we` 文件转换到一个目录中 
-
-```bash
-$ weex we/file/storage/path  -o outputpath
-```
-
- `we/file/storage/path` 目录下的每个 `.we` 文件都会被转换为 JS Bundle 并保存到 `outputpath` 目录。
-
-请访问 [npmjs.com](https://www.npmjs.com/package/weex-toolkit) 了解更多关于 `weex-toolkit`。
-
-## transformer
-
-```bash
-npm install weex-transformer
-```
-
-### CLI Tool
-
-```
-  Usage: transformer [options] <file...>
-
-  Options:
-
-    -h, --help               output usage information
-    -V, --version            output the version number
-    -l, --oldFormat [value]  whether to transform to old format (default: false)
-    -e, --isEntry [value]    whether is an entry module which has `bootstrap` (default: true)
-    -o, --output [path]      the output file dirname
-```
-
-### API
-
-** transform(name, code, path, elements, config) **
-
-```javascript
-var transformer = require('weex-transformer')
-var output = transformer.transform('foo', '/* code here */', '.', {})
-```
-
-参数:
-
-- `name {string}`:当前 bundle 文件名
-- `code {string}`:源码
-- `path {string}`: *可选*,当在某个路径中查找自定义组件时很有用
-- `elements {Object}`:*可选*,存在的自定义组件映射
-- `config {Object}`:*可选*
-
-    * `oldFormat {boolean}`:是否转换为旧格式 (默认:`false`)
-    * `isEntry {boolean}`:是否是具有 `bootstrap` 的入口模块 (默认:`true`)
-
-返回值:
-- 一个对象:
-    - `result {string}`:所有自定义组件的 `define()` 方法和最终的 `bootstrap()`
-    - `logs {Array}`:相应的警告和错误日志
-
-## gulp weex
-
-```bash
-npm install gulp-weex
-```
-
-```javascript
-var gulp = require('gulp')
-var weex = require('gulp-weex')
-
-gulp.task('default', function () {
-  return gulp.src('src/*.html')
-    .pipe(weex({}))
-    .pipe(gulp.dest('./dest'))
-})
-```
-
-参数:
-
-- `oldFormat {boolean}`:是否转换为旧格式 (默认:`false`)
-- `isEntry {boolean}`:是否是具有 `bootstrap` 的入口模块 (默认:`true`)
diff --git a/_drafts/v1.0/guide/index.md b/_drafts/v1.0/guide/index.md
deleted file mode 100644
index 73d1a98..0000000
--- a/_drafts/v1.0/guide/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 上手教程
-type: guide
-order: 1
-has_chapter_content: true
-version: 0.10
----
-
-# 起步教程
-
-Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与  Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
-
-尝试 Weex 最简单的方法是使用 [Playground App](https://alibaba.github.io/weex/download.html) 和在 [dotWe](http://dotwe.org) 编写一个 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子。你不需要考虑安装开发环境或编写 native 代码,只需要做下面两件事:
-
-- 为你的手机安装 [Playground App](https://alibaba.github.io/weex/download.html),当然,Weex 是跨平台的框架,你依然可以使用浏览器进行预览,只是这样你就无法感受到 native 优秀的体验了。
-- 在新标签页中打开 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子,点击预览,然后用  Playground 扫码即可。
-
-在这个例子中,我们看到了熟悉的 HTML 语义化标签、CSS 样式和 Javascript 代码。这是一个最简单的 Weex 示例,它在页面中渲染了一个 "Hello World"。
-
-![mobile_preview](https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg)
-
-## 发生了什么?
-
-就如示例代码所示:
-
-```html
-<template>
-  <div>
-    <text class="text">{{text}}</text>
-  </div>
-</template>
-
-<style>
-  .text {
-    font-size: 50;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-        text: 'Hello World.'
-    }
-  }
-</script>
-```
-
-我们暂时不去关心 Weex 的技术细节,仅看大致的代码结构。Weex 代码由三部分构成:`template`、`style`、`script`,这三个概念之于 Weex 就如 HTML,CSS,JavaScript 之于 Web。
-
-模板部分赋予 Weex 以骨架,由标签以及标签包围的内容构成,标签中能添加 `attribute(特性)`,不同的 `attribute` 有不同的含义,例如 class 特性让同样的样式可以作用于多组 Weex 标签, onclick 特性让标签能对用户点击事件作出回应。
-
-样式部分描述 Weex 标签如何显示。和你一样,我们喜欢 CSS,所以 Weex 中的样式尽量和 CSS 标准一致。Weex 支持很多 CSS 中的特性: margin, padding, fixed...... 更好的是, flexbox 布局模型在 Weex 中获得了很好的支持。
-
-脚本部分为 Weex 标签添加数据与逻辑,在这里你能方便的访问本地或远程的数据并动态更新。你还能定义方法并让这些方法响应不同的事件。Weex 脚本的组织方式基本遵循于 CommonJS module 规范。
-
-是不是觉得这些语法有些眼熟?没错,Weex 语法参考了 [Vue](https://github.com/vuejs/vue),如果你熟悉 Vue,你会很快适应 Weex 语法(最新的 Weex framework 将会基于 [Vue 2.0](https://github.com/vuejs/vue) 开发,完全兼容 Vue,可参见我们的 [Roadmap](https://github.com/weexteam/weex-vue-framework/issues/9)),更好的是,我们拥抱规范,尽可能的按照 W3C 标准进行实现,因此,你大可不必担心 Weex 三端差异。
-
-你可以试着修改 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 的代码,再次点击预览即可生成新的二维码进行扫描。
-
-Weex 不止是个 Demo,在接下来的章节中,你还会看到更多 Weex 开发 native 应用并将其集成到你的 App 中的精彩教程。不要忘了随时在 [dotWe](http://dotwe.org) 中编写代码验证并通过 [Playground App](https://alibaba.github.io/weex/download.html) 预览。
diff --git a/_drafts/v1.0/guide/syntax/comm.md b/_drafts/v1.0/guide/syntax/comm.md
deleted file mode 100644
index 7923ef7..0000000
--- a/_drafts/v1.0/guide/syntax/comm.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: 组件通信
-type: guide
-order: 3.8
-version: 0.10
----
-
-# 组件间通信
-
-## 自定义事件
-
-Weex 支持自定义事件,这里有两个相关的设计:1,监听自定义事件;2,创建自定义事件。
-
-## 监听自定义事件
-
-每个 Weex 的 ViewModel 都支持 `this.$on(type, handler)` 和 `this.$off(type[, handler])` 的 API。`type` 是监听的自定义事件类型,`handler` 是事件处理函数。
-
-当 `handler` 被触发时,会有一个事件对象 `event` 作为第一个参数被传入,事件对象的数据格式基于[事件机制](./events.html)中提到的事件描述对象。
-
-## 创建自定义事件
-
-每个 Weex 的 ViewModel 都支持 `this.$emit(type, detail)` 的 API,可以在当前 ViewModel 中产生一个自定义事件。`type` 是自定义事件的类型,`detail` 则是一个对该事件细节补充描述的 JSON 对象,会以 `event.detail` 的形式出现在处理此事件的函数中。
-
-## 从子组件向父组件通信
-
-首先父组件要监听特定类型的自定义事件,而子组件可以使用 `this._parent` 找到父组件,然后再调用 `this._parent.$emit(type, detail)` 方法,即可实现自下而上的通信。例如:
-
-```html
-<element name="foo">
-  <template>
-    <div>
-      <image src="{{imageUrl}}" class="thumb" onclick="test"></image>
-      <text>{{title}}</text>
-    </div>
-  </template>
-  <style>
-    .thumb { width: 200; height: 200; }
-  </style>
-  <script>
-    module.exports = {
-      data: {
-        title: '',
-        imageUrl: ''
-      },
-      methods: {
-        test: function () {
-          // Emit notify to parent
-          this._parent.$emit('notify', {a: 1})
-        }
-      }
-    }
-  </script>
-</element>
-
-<template>
-  <div>
-    <foo title="Hello" image-url="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></foo>
-    <text if="eventType">event: {{eventType}} - {{eventDetail}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      eventType: '',
-      eventDetail: {}
-    },
-    created: function () {
-      this.$on('notify', function(event) {
-        // When a notify comes, this handler will be run.
-        // `event.detail` will be `{a: 1}`
-        this.eventType = event.type
-        this.eventDetail = JSON.stringify(event.detail)
-      })
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/51e553ef43e5c744d05da1bb811903bf)
-
-## 从父组件向子组件通信
-
-同理,首先子组件要监听特定类型的自定义事件,而父组件可以使用 `this.$vm(id)` 找到父组件,然后再调用 `this.$vm(id).$emit(type, detail)` 方法,即可实现自上而下的通信。例如:
-
-```html
-<element name="foo">
-  <template>
-    <div>
-      <image if="imageUrl" src="{{imageUrl}}" class="thumb"></image>
-      <text>Foo</text>
-    </div>
-  </template>
-  <style>
-    .thumb { width: 200; height: 200; }
-  </style>
-  <script>
-    module.exports = {
-      data: {
-        imageUrl: ''
-      },
-      created: function() {
-        this.$on('changeImage', function (e) {
-          this.imageUrl = e.detail
-        }.bind(this))
-      }
-    }
-  </script>
-</element>
-
-<template>
-  <div>
-    <foo id="sub"></foo>
-    <text onclick="test">click to update foo</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    methods: {
-      test: function (e) {
-        this.$vm('sub').$emit(
-          'changeImage',
-          'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
-        )
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/ea616d180620648e66554d42f57db82b)
-
-下一节:[页面整体配置](./config-n-data.html) 
diff --git a/_drafts/v1.0/guide/syntax/composed-component.md b/_drafts/v1.0/guide/syntax/composed-component.md
deleted file mode 100644
index 061eaf4..0000000
--- a/_drafts/v1.0/guide/syntax/composed-component.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: 组件封装
-type: guide
-order: 3.6
-version: 0.10
----
-
-# 组件封装
-
-经常我们会发现 Weex 的 `<template>` 中有很多可复用的部分,这时候我们可以将其封装成上层的自定义组件并重用。例如我们可以直接创建一个名为 `foo.we` 的文件,`<foo>` 就是自定义组件的组件名称:
-
-```html
-<!-- foo.we -->
-<template>
-  <div style="flex-direction: row;">
-    <image src="{{image}}"></image>
-    <text>{{title}}</text>
-  </div>
-</template>
-<script>
-  var env = 'foo'
-  module.exports = {
-    data: {
-      title: null,
-      image: null
-    }
-  }
-</script>
-```
-
-`foo.we` 的也包含 `<template>`,`<style>` 和 `<script>`,定义好了后,直接用 `<foo>` 标签即可将其引入到其它组件的 `<template>` 中,并且在 `<foo>` 标签上设置其 `data` 同名的特性会将这个值赋给 `<foo>` 的上下文:
-
-_注意事项:由于 HTML 语法中特性名是不区分大小写的,所以您无法直接用驼峰命名,我们提供了 hyphenated 语法,在解析之后这些名称会自动转换为驼峰命名 (比如在 `<template>` 的组件特性里用 `aaa-bbb-ccc` 表示其 `data` 或上下文里的 `aaaBbbCcc`)。_
-
-```html
-<!-- bar.we -->
-<template>
-  <foo title="..." image="..."></foo>
-</template>
-<script>
-  var env = 'bar'
-</script>
-```
-
-_注意事项:这里 `bar.we` 和 `foo.we` 必须在同目录下才能自动建立依赖关系。_
-
-_注意事项:`foo.we` 文件的 `<script>` 具有相对独立的作用域,不会和 `bar.we` 中的 `<script>` 产生干扰。同时 `<foo>` 对象具有相对独立的子组件上下文,即 `this`,也包括其定义的完全不同的数据和方法。_
-
-## 组件嵌套
-
-自定义组件也支持嵌套,如下:
-
-```html
-<!-- somepath/foo.we -->
-<template>
-  <div style="flex-direction: row;">
-    <image src="{{image}}"></image>
-    <text>{{title}}</text>
-  </div>
-</template>
-<script>
-  module.exports = {
-    data: {
-      // These keys must be declared explicitly here
-      // or data-binding will not work from its parent.
-      title: null,
-      image: null
-    }
-  }
-</script>
-```
-
-```html
-<!-- samepath/foo.list.we -->
-<template>
-  <div>
-    <text>{{description}}</text>
-    <foo repeat="item in list" title="{{item.text}}" image="{{item.img}}"></foo>
-  </div>
-</template>
-<script>
-  module.exports = {
-    data: {
-      description: '',
-      // This key must be declared explicitly here
-      // or data-binding will not work from its parent.
-      list: []
-    }
-  }
-</script>
-```
-
-```html
-<!-- samepath/main.we -->
-<template>
-  <foo-list list="{{list}}"></foo-list>
-</template>
-<script>
-  module.exports = {
-    data: {
-      list: [
-        {text: '...', img: '...'},
-        {text: '...', img: '...'},
-        {text: '...', img: '...'},
-        ...
-      ]
-    }
-  }
-</script>
-```
-
-这里的 `main.we` 嵌套了 `<foo-list>`,`<foo-list>` 嵌套了 `<foo>`,同时组件可以正常的配合数据绑定、`repeat` 特性等使用。
-
-## 更多子组件的定义和书写方式
-
-除了在主文件同目录下创建和被封装组件同名的 `we` 文件之外,Weex 还支持另外几种子组件的书写方式:
-
-* 在 `<script>` 中通过 `require` 其它目录的 `we` 文件定义同名组件
-* 在主文件下新增 `<element name="xxx">` 标签,`name` 特性的值为新创建的组件名,其 `<element>` 内部的内容是定义该组件的代码
-
-比如:
-
-```html
-<!-- path-a/main.we -->
-<element name="foo">
-  <text>Foo</text>
-</element>
-
-<template>
-  <div>
-    <foo></foo>
-    <bar></bar>
-  </div>
-</template>
-
-<script>
-  require('path-b/bar.we')
-</script>
-```
-
-```html
-<!-- path-b/bar.we -->
-<template>
-  <text>Bar</text>
-</template>
-```
-
-这样的话,`path-a/main.we` 最终展示的结果是“Foo”和“Bar”两段文本。
-
-## 注意事项
-
-- 组件各自的 `<style>` 是相互独立的,不会担心不同组件中相同的 class name 相互干扰。
-- 如果自定义组件在父组件中有 `id` 特性,则可以在父组件上下文中通过 `this.$vm(id)` 接口来访问该自定义组件的上下文,也可以通过 `this.$el(id)` 来找到其背后真实的原生组件。更多详见[获取子组件信息](./id.html)
-- 自定义组件之间通信的问题可以参考[组件间通信](./comm.html)
-- 不论通过父组件把数据传递进来还是在当前组件内部对数据发起修改,只有在组件的 `data` 选项中明确写明的字段才会被正常的监听。
-- 任何组件目前均不支持自闭合标签的写法,请勿使用。
-
-下一节:[获取子组件信息](./id.html)
diff --git a/_drafts/v1.0/guide/syntax/config-n-data.md b/_drafts/v1.0/guide/syntax/config-n-data.md
deleted file mode 100644
index cad39ab..0000000
--- a/_drafts/v1.0/guide/syntax/config-n-data.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: 页面配置和页面数据
-type: guide
-order: 3.9
-version: 0.10
----
-
-# 页面配置和页面数据
-
-在 Weex 中,你可以通过一些特殊的 `<script>` 进行页面整体配置。
-
-_注意事项:这些配置会代表页面整体,所以写在自定义子组件中是无效的,只有写在顶级 ViewModel 的 `<sctipt>` 中才会生效。_
-
-先举个例子:
-
-```html
-<!-- definition of sub components -->
-<element name="sub-component-a">...</element>
-<element name="sub-component-b">...</element>
-<element name="sub-component-c">...</element>
-
-<!-- definition of top-level component -->
-<template>...</template>
-<style></style>
-<script>
-  module.exports = {
-    data: { x: 1, y: 2 }
-  }
-</script>
-
-<!-- config and data -->
-<script type="config">
-  downgrade: {
-    ios: {
-      os: '9', // all of 9.x.x
-      app: '~5.3.2',
-      framework: '^1.3', // all of 1.3.x
-      deviceModel: ['AAAA', 'BBBB']
-    },
-    android: {
-      os: '*', // all of version
-      app: '^5',
-      framework: '',
-      deviceModel: ''
-    }
-  }
-</script>
-<script type="data">
-  { y: 200 }
-</script>
-```
-
-## `<script type="config">`
-
-开发者可以在顶级 ViewModel 中加入这样一段 `<script>`,以 JSON 格式描述页面整体的配置信息。
-
-目前支持的配置信息只有 `downgrade`:用来从平台、应用等维度描述页面的降级规则。这样设计对于产品迭代最大的帮助是可以在高版本中使用 Weex,而在低版本中使用之前已有的渲染方式,这部分控制降级的细节需要 native 接入的时候进行相应的识别和具体操作。
-
-未来这里会有更多的配置项出现在这里。
-
-## `<script type="data">`
-
-开发者可以在顶级 ViewModel 中加入这样一段 `<script>`,以 JSON 格式额外配置顶级 ViewModel 的数据,它会覆盖顶级 ViewModel 数据中相应的字段。比如上述例子中,最终的顶级 ViewModel 中的数据为 `{ x: 1, y: 200 }`。
-
-## 总结
-
-至此,Weex 基本的语法已经全部介绍过了。相信您对 Weex 的使用方式和开发方式有了更多的了解。
-
-接下来我们推荐您阅读:
-
-* [最佳实践](../how-to/index.html)
-* [Weex 手册](../../references/index.html)
diff --git a/_drafts/v1.0/guide/syntax/data-binding.md b/_drafts/v1.0/guide/syntax/data-binding.md
deleted file mode 100644
index bbefdd1..0000000
--- a/_drafts/v1.0/guide/syntax/data-binding.md
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: 数据绑定
-type: guide
-order: 3.1
-version: 0.10
----
-
-# 数据绑定
-
-Weex使用 _mustache_ 的语法 (`{% raw %}{{...}}{% endraw %}`) 来对 `<template>` 中的模板和 `<script>` 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。
-
-## 数据绑定路径
-
-```html
-<template>
-  <div>
-    <text style="font-size: {{size}}">{{title}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      size: 48,
-      title: 'Alibaba Weex Team'
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/6d18c0e696d33705083e34ef387ac529)
-
-上面的代码会把 `title` 和 `size` 的数值绑定到模板内容上。
-
-我们也可以通过 `.` 符号来绑定数据结构中的字段。看一下下面的代码片段:
-
-```html
-<template>
-  <div>
-    <text style="font-size: {{title.size}}">{{title.value}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      title: {
-        size: 48,
-        value: 'Alibaba Weex Team'
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/e291bbe2d5c34fe04db92bc827697a4b)
-
-## 数据绑定表达式
-
-进行数据绑定时,Weex 支持一些简单的 JavaScript 表达式,例如:
-
-```html
-<template>
-  <div style="flex-direction: row;">
-    <text>{{firstName + ' ' + lastName}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      firstName: 'John',
-      lastName: 'Smith'
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/aeef6c2ca9bd9b7c5d039ed84572e1ee)
-
-这些表达式会在当前的上下文中进行运算。
-
-## 计算属性 <sup>v0.5+</sup>
-
-数据绑定表达式已经非常方便了,但如果希望在模板里实现更复杂的逻辑判断,你也可以使用计算属性。例如:
-
-```html
-<template>
-  <div style="flex-direction: row;">
-    <text>{{fullName}}</text>
-    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      firstName: 'John',
-      lastName: 'Smith'
-    },
-    computed: {
-      fullName: function() {
-        return this.firstName + ' ' + this.lastName
-      }
-    },
-    methods: {
-      changeName: function() {
-        this.firstName = 'Terry'
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/276e7c42a2d480d669868476e62b326e)
-
-同样能够达到相同的效果。这里我们引入了一个叫做 `fullName` 的计算属性,由 `firstName` 和 `lastName` 计算而成,在数据绑定的时候,如果 `firstName` 或 `lastName` 发生改变,`fullName` 都会自动重新计算并触发改变。
-
-另外计算属性还支持另外一种写法,就是同时定义一个计算属性的 getter 和 setter,这样的话当下面例子中的 `fullName` 被赋值时,`data` 里的 `firstName` 和 `lastName` 会被自动改变:
-
-```html
-<template>
-  <div style="flex-direction: row;">
-    <text>{{fullName}}</text>
-    <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      firstName: 'John',
-      lastName: 'Smith'
-    },
-    computed: {
-      fullName: {
-        get: function() {
-          return this.firstName + ' ' + this.lastName
-        },
-
-        set: function(v) {
-          var s = v.split(' ')
-          this.firstName = s[0]
-          this.lastName = s[1]
-        }
-      }
-    },
-    methods: {
-      changeName: function() {
-        this.fullName = 'Terry King'
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/9f33809592391c566c886029c509c167)
-
-**注意事项:`data`、`methods`、`computed` 中的字段是不能相互重复的,因为它们都会通过组件实例的 `this` 访问到。**
-
-## 数据绑定在 `<template>` 中的特殊用法
-
-### 样式: `style` 或 `class`
-
-组件的样式能够通过 `style` 特性进行绑定:
-
-```html
-<template>
-  <div>
-    <text style="font-size: {{size}}; color: {{color}};">Hello World</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      size: 32,
-      color: '#ff0000'
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/f53674fa7910d266e0a2d8a5c285d2b1)
-
-样式也能够通过 `class` 特性实现样式绑定,多个 class 名通过空格分隔:
-
-```html
-<template>
-  <div>
-    <text class="{{size}}">Hello</text>
-    <text class="title {{status}}">World</text>
-  </div>
-</template>
-
-<style>
-  .large { font-size: 64; }
-  .small { font-size: 32; }
-  .title { font-weight: bold; }
-  .success { color: #00ff00; }
-  .error { color: #ff0000; }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      size: 'large',
-      status: 'success'
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/4260897c1526a685672dca95af271493)
-
-在上面的代码中如果 `{% raw %}{{size}}{% endraw %}` 和 `{% raw %}{{status}}{% endraw %}` 是空值, 就只有 `class="title"` 会被解析。
-
-延伸阅读:[style 和 class](./style-n-class.html)
-
-### 事件绑定:`on...`
-
-以 `on...` 开头的就是用于绑定事件的特性,特性名中 `on` 之后的部分就是事件的类型,特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如:
-
-```html
-<template>
-  <div>
-    <text onclick="toggle">Toggle: {{result}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      result: true
-    },
-    methods: {
-      toggle: function () {
-        this.result = !this.result
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
-
-除此之外 Weex 还支持更多的事件处理方式。
-
-延伸阅读:[事件处理](./events.html)
-
-### 展示逻辑控制 `if` & `repeat`
-
-`if` 特性能够通过特性值的真假来控制组建是否显示,_且 mustache 大括号可以省略_。例如:
-
-```html
-<template>
-  <div style="flex-direction: column;">
-    <text onclick="toggle">Toggle</text>
-    <image if="{{shown}}" src="{{imageUrl}}" class="logo"></image>
-  </div>
-</template>
-
-<style>
-  .logo { width: 512; height: 512; }
-</style>
-
-<script>
-  module.exports = {
-    data: {
-      shown: true,
-      imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
-    },
-    methods: {
-      toggle: function () {
-        this.shown = !this.shown
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/3ec9347e4810f503b641849d214d8c15)
-
-`repeat` 特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。例如:
-
-```html
-<template>
-  <div>
-    <text repeat="(k,v) in list">{{k}} - {{v}}</text>
-  </div>
-</template>
-<script>
-  module.exports = {
-    data: {
-      list: ['a', 'b', 'c']
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/db40d2341fdbf16d3d806f502189843d)
-
-延伸阅读:[展示逻辑控制](./display-logic.html)
-
-### 静态模板优化 `static` <sup>v0.9.2+</sup>
-
-`static` 特性可以一次性把数据设置到模板相应的位置上,但是今后不会随着数据的变化而更新。这样可以减少无谓的数据绑定,有效控制和优化长列表、纯静态页面在运行时的开销。不过你也要小心使用不要导致原本需要更新的视图没有触发更新。
-
-```html
-<template>
-  <div static>
-    <text>{{ word }}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    ready: function() {
-      this.word = 'Data changes' // UI won't be updated
-    },
-    data: {
-      word: 'Hello static'
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/dbadfd66463a2c03e3e06d391b0ad8ec)
-
-如上所示,添加 `static` 关键字,渲染结果会是“Hello static”字样,相当于渲染一个静态的节点,`ready` 函数中对数据 `word` 的改变不会更新到视图。
-
-下一篇:[style 和 class](./style-n-class.html)
diff --git a/_drafts/v1.0/guide/syntax/display-logic.md b/_drafts/v1.0/guide/syntax/display-logic.md
deleted file mode 100644
index 9498de2..0000000
--- a/_drafts/v1.0/guide/syntax/display-logic.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-title: 展示逻辑控制
-type: guide
-order: 3.4
-version: 0.10
----
-
-# 展示逻辑控制
-
-Weex 支持通过两种特殊的特性 `if` 和 `repeat` 确定组件的显示逻辑,这会使得整个界面的展示逻辑控制更加简单灵活。
-
-## `if`
-
-通过设置 `if` 特性值,你可以控制当前组件是否显示。如果值为真,则当前组件会被渲染出来,如果值为假则会被移除。例如:
-
-```html
-<template>
-  <div>
-    <text onclick="toggle">Toggle Image</text>
-    <image if="shown" src="{{imageUrl}}" style="width: 512; height: 512;"></image>
-  </div>
-</template>
-
-<script>
-module.exports = {
-  data: {
-    imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
-    shown: true
-  },
-  methods: {
-    toggle: function () {
-      this.shown = !this.shown
-    }
-  }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/e0999a51fa404f48bbae177f1569cd0e)
-
-_注意事项:`if="condition"` 和 `if="{% raw %}{{condition}}{% endraw %}"` 都是可以的,两者等价使用。_
-
-_注意事项:`if` 不能用在 `<template>` 的根组件上,否则将无法被 Weex 正常的识别和处理。_
-
-###  `if` 不会阻断子元素的数据更新
-
-下面这个例子在数据更新后 `item` 或 `item.image` 不存在的情况下会报错:
-
-```html
-<template>
-  <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
-    <image style="width: 100; height: 100;" src="{{item.image.url}}"></image>
-  </div>
-</template>
-```
-
-原因在于 Weex 本身的机制是数据更新在 DOM 更新之前,因此 `if` 数据更新之后,不支持阻断其子元素的数据更新,即 `if` 数据更新为 `false` 之后,内部的子元素仍然会触发自身的数据更新,找不到对应字段,导致报错,可参考这个 [issue](https://github.com/alibaba/weex/issues/1758)。
-
-因此,有两种解决方案:
-
-- 为 `img` 组件的 `src` 也增加容错方案:
-
-  ```html
-  <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
-    <image style="width: 100; height: 100;" src="{{item && item.image && item.image.url}}"></image>
-  </div>
-  ```
-
-- 如果是在 `repeat` 的列表中,还可以使用 `track-by`强制不复用子元素解决。
-
-## `repeat`
-
-`repeat` 特性用于重复渲染一组相同的组件。它绑定的数据类型必须为数组,数组里的每一项数据可以体现在不同的组件特性、样式、事件绑定等。例如:
-
-``` html
-<template>
-  <div>
-    <div repeat="person in list" class="{{person.gender}}">
-      <text>{{person.nickname}}</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .male { background-color: #9999ff; }
-  .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
-  data: {
-    list: [
-      { gender: 'male', nickname: 'Li Lei' },
-      { gender: 'female', nickname: 'Han Meimei' },
-      { gender: 'male', nickname: 'Jim Green' }
-    ]
-  }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/8c87aac2820531090181c32fca41e913)
-
-此外,`repeat` 特性还支持绑定数组中数据项目的索引值。例如:
-
-``` html
-<template>
-  <div>
-    <div repeat="(index, person) in list" class="{{person.gender}}">
-      <text>{{index}} - {{person.nickname}}</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .male { background-color: #9999ff; }
-  .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
-  data: {
-    list: [
-      { gender: 'male', nickname: 'Li Lei' },
-      { gender: 'female', nickname: 'Han Meimei' },
-      { gender: 'male', nickname: 'Jim Green' }
-    ]
-  }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
-
-每一个昵称之前都有对应数组项目的索引值。
-
-_注意事项:同样的 `repeat="..."` 和 `repeat="{% raw %}{{...}}{% endraw %}"` 都是可以的,两者等价使用。_
-
-_注意事项:`if` 不能用在 `<template>` 的根组件上,否则将无法被 Weex 正常的识别和处理。_
-
-**注意事项: 当你修改 `repeat` 中的数组时,在写法上会受到一定的限制,具体如下:**
-
-**直接通过“角标”修改数组的某个项目 (如 `this.items[0] = ...`) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法:`this.items.$set(index, item)` 来完成相同的事情。**
-
-```javascript
-// 和 `this.items[0] = ...` 作用相同,但会自动触发视图更新
-this.items.$set(0, { childMsg: 'Changed!'})
-```
-
-**直接通过修改 `length` 来改变数组长度 (如 `this.items.length = 0`) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。**
-
-```javascript
-// 和 `this.items.length = 0` 作用相同,但会自动触发视图更新
-this.items = []
-```
-
-### `repeat` 特性中的 `$index` 形参
-
-在 `repeat` 特性值中,如果没有指定索引值的形参,则可以通过绑定形参 `$index` 来展示数组项目的索引值。例如:
-
-``` html
-<template>
-  <div>
-    <div repeat="person in list" class="{{person.gender}}">
-      <text>{{$index}} - {{person.nickname}}</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .male { background-color: #9999ff; }
-  .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
-  data: {
-    list: [
-      { gender: 'male', nickname: 'Li Lei' },
-      { gender: 'female', nickname: 'Han Meimei' },
-      { gender: 'male', nickname: 'Jim Green' }
-    ]
-  }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
-
-渲染效果和上一个例子应该是相同的。
-
-### 在 `repeat` 中使用 `track-by` 特性追踪变化
-
-通常情况下,当更新 `repeat` 中绑定的数组时,所有数组项目关联的组件都会被重新渲染。如果其中部分索引值对应的数据未发生变更,那么最好是让这些组件在渲染层保持原样,仅更新数据有变化的节点。Weex 提供了 `track-by` 特性来辅助判断哪些数组项目发生了改变。
-
-首先 `track-by` 特性的值必须是在每一条数组项目中都有且值没有重复的一个字段名,用来区分和追踪每一条数据项增删与否或次序变化与否的关键依据。每当数组发生变化之后,新老数组数据会根据 `track-by` 特性值所代表的字段重新匹配,然后再决定渲染层应该新建或删除一个组件?还是移动一个组件?还是讲组件保持原来的位置。默认的 `track-by` 的值就是数组的索引值。例如:
-
-``` html
-<template>
-  <div>
-    <div repeat="person in list" class="{{person.gender}}">
-      <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
-    </div>
-    <text>----</text>
-    <div repeat="person in list" class="{{person.gender}}" track-by="id">
-      <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
-    </div>
-    <text>----</text>
-    <!-- something wrong here: duplicated track-by value -->
-    <div repeat="person in list" class="{{person.gender}}" track-by="nickname">
-      <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
-    </div>
-  </div>
-</template>
-
-<style>
-  .male { background-color: #9999ff; }
-  .female { background-color: #ff9999; }
-</style>
-
-<script>
-module.exports = {
-  data: {
-    list: [
-      { id: 11, gender: 'male', nickname: 'Li Lei' },
-      { id: 22, gender: 'female', nickname: 'Han Meimei' },
-      { id: 33, gender: 'male', nickname: 'Jim Green' }
-    ]
-  },
-  ready: function () {
-    this.list.unshift({ id: 44, gender: 'female', nickname: 'Han Meimei' })
-  }
-}
-</script>
-```
-
-[体验一下](http://dotwe.org/c124bfc21e6d92271356acbea232089b)
-
-这种情况下,第一个列表的更新策略是:
-
-1. 把第一个 `<text>` 赋值为 `Han Meimei`
-2. 第二个赋值为 `Li Lei`
-3. 第三个赋值为 `Han Meimei`
-4. 最后新建一个 `<text>` 并赋值为 `Jin Green`
-
-第二个列表的更新策略是:
-
-1. 在最前面新建一个 `<text>` 并赋值为 `Han Meimei`
-
-第三个列表的更新会遇到问题,因为有两个数组项目的 `nickname` 值都是 `Han Meimei` 所以造成意料之外的渲染结果 (只渲染了三个数组项目)。
-
-下一节:[渲染过程控制](./render-logic.html)
diff --git a/_drafts/v1.0/guide/syntax/events.md b/_drafts/v1.0/guide/syntax/events.md
deleted file mode 100644
index 4898219..0000000
--- a/_drafts/v1.0/guide/syntax/events.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: 事件处理
-type: guide
-order: 3.3
-version: 0.10
----
-
-# 事件处理
-
-Weex 允许对 `<template>` 中的元素绑定事件处理函数。
-
-## 基本语法
-
-以 `on...` 开头的就是用于绑定事件的特性,特性名中 `on` 之后的部分就是事件的类型,特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如:
-
-```html
-<template>
-  <div>
-    <text onclick="toggle">Toggle: {{result}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      result: true
-    },
-    methods: {
-      toggle: function () {
-        this.result = !this.result
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
-
-## 内联事件处理参数
-
-同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如:
-
-```html
-<template>
-  <div>
-    <text onclick="update(1, 2)">Result: {{result}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      result: '<empty>'
-    },
-    methods: {
-      update: function (x, y) {
-        this.result = x + y
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/777056d8985e73567464e2d66cbe73fc)
-
-## 特殊的内联事件处理参数
-
-额外的,在这种内联的事件绑定写法中,你可以使用一个特殊的参数 `$event`,代表事件描述对象,即默认事件处理函数的第一个参数。所以 `<template>` 中的 `onclick="foo"` 和 `onclick="foo($event)"` 是等价的,`$event` 的用法可以更多参考下面的例子
-
-```html
-<template>
-  <div>
-    <text onclick="update($event, 1, 2)">Result: {{result}}</text>
-  </div>
-</template>
-
-<script>
-  module.exports = {
-    data: {
-      result: '<empty>'
-    },
-    methods: {
-      update: function (e, x, y) {
-        this.result = e.type + (x + y)
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/5e1e7c22f036725e44c3ff492f173400)
-
-## 事件描述对象
-
-每当一次事件被触发的时候,都会产生一个事件描述对象,该对象会默认作为第一个参数传递给事件处理函数,或以 `$event` 形参的方式出现在内联事件处理函数中。
-
-每个事件描述对象至少包含以下几个特性:
-
-- `type` (`string`): 事件名称, 如: `click`
-- `target` (`Element`): 目标元素
-- `timestamp` (`number`): 事件触发时的时间戳数字
-
-下一节:[展示逻辑控制](./display-logic.html)
diff --git a/_drafts/v1.0/guide/syntax/id.md b/_drafts/v1.0/guide/syntax/id.md
deleted file mode 100644
index 0a204ad..0000000
--- a/_drafts/v1.0/guide/syntax/id.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: 找节点
-type: guide
-order: 3.7
-version: 0.10
----
-
-# 找节点
-
-在 Weex 中,您可以通过在特定的子组件上设置 `id` 特性,以此在该 `<template>` 内唯一标识这个组件。
-
-## 获取子组件
-
-您可以在父组件上下文中使用 `this.$el(id)` 来找到该组件,以运用 `scrollToElement()` 为例:
-
-```html
-<template>
-  <div>
-    <text id="goto-top">Top</text>
-    <div style="height: 10000; background-color: #999999;"></div>
-    <text onclick="back2Top">Back to Top</text>
-  </div>
-</template>
-<script>
-  var dom = require('@weex-module/dom')
-  module.exports = {
-    methods: {
-      back2Top: function () {
-        var el = this.$el('goto-top')
-        dom.scrollToElement(el, { offset: 10 })
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/ed07068ef6f038d6c39af6c971ad08a0)
-
-### `id` 和 `repeat` 特性配合使用
-
-`id` 也可以和 `repeat` 语法配合使用,关于 `repeat` 更多详见 [展示逻辑控制](./display-logic.html),但是要确保循环的节点需要用不同的 `id`,比如:
-
-```html
-<template>
-  <div>
-    <image
-      repeat="image in images"
-      id="img-{{image.id}}"
-      src="{{image.url}}"
-      onclick="getImageId"></image>
-  </div>
-</template>
-<script>
-module.exports = {
-  data: {
-    images: [
-      {id: 1, url: '...'},
-      {id: 2, url: '...'},
-      {id: 3, url: '...'},
-      ...
-    ]
-  },
-  methods: {
-    getImageId: function(e) {
-      // get e.target.id
-    }
-  }
-}
-</script>
-```
-
-### 获取自定义子组件的上下文
-
-另外,我们还可以通过 `this.$vm(id)` 方法可以访问自定义子组件的上下文:
-
-```html
-<element name="foo">
-  <template>
-    <div style="flex-direction: row;">
-      <text>{{title}}</text>
-    </div>
-  </template>
-  <script>
-    module.exports = {
-      data: {
-        title: null
-      },
-      methods: {
-        setTitle: function (text) {
-          this.title = text
-        }
-      }
-    }
-  </script>
-</element>
-
-<template>
-  <div>
-    <foo id="sub" title="Hello"></foo>
-    <text onclick="update">Click Me to Update</text>
-  </div>
-</template>
-<script>
-  module.exports = {
-    methods: {
-      update: function (e) {
-        this.$vm('sub').setTitle('Updated')
-      }
-    }
-  }
-</script>
-```
-
-[体验一下](http://dotwe.org/1d332e6c238462e841743035c6bc697e)
-
-实际上,如上述的例子,我们找到子组件上下文之后,直接在这个上下文中调用子组件方法或修改子组件的数据并不是我们认为最好的方式,我们更倾向于通过一套确定的组件间通信机制来完成这一工作。
-
-### 获取父级组件或其上下文
-
-除了可以自上而下寻找组件或其上下文,Weex 也支持自下而上做相同的事情。当前上下文中的 `this._parent` 可以获取其父级上下文。除了父级上下文,对于父级组件本身,相关处理也可以基于先获取父级上下文,然后在父级组件内部完成更多更细致的处理。更多内容可以深入了解组件间通信的部分。
-
-_注意事项:在未来的版本中 `this._parent` 将改为 `this.$parent`。_
-
-下一篇: [组件间通信](./comm.html)