Update data from native

[sospartan]

Weex has an one-way data flow, from js to native. But components with 'state' will be problems, such as switch/video etc, as described in #28 .
These components' state will be update by native event, a mechanism is necessary to make changes directly to the js side. And avoiding send update event rendundantly.

For example :

<template>
  <scroller>
    <switch checked="{{switchOn}}" style="margin-bottom:20">
    </switch>
    <ui-button value="toggle switch" click="{{toggle}}"></ui-button>
  </scroller>
</template>

<script>
  module.exports = {
    data: {
      switchOn: 'true'
    },
    methods: {
      toggle: function() {
          console.log("current switch checked:"+this.switchOn);
          this.switchOn = (this.switchOn=='true'?'false':'true');
      }
    }
  };
</script>

In this case, once click the switch , the ui-button have to click twice to really toggle the switch. It's not acceptable.
I will use another fireEvent method ( https://github.com/alibaba/weex/blob/dev/src/js-framework/lib/app/ctrl.js#L112) to solve this. I'll test it in android first.

@zshshr @Jinjiang @boboning @luics @terrykingcha

[terrykingcha]

Yes！One-way binding is not perfect. We will improve the way via some syntax sugars.

[sospartan]

The fireEvent syntax sugar don't fix this problem. It's just set the style and attrs of the component. JS side code is required to make these components really working.
Is there any doc about writing JS code to correspond with native module? @terrykingcha

[sospartan]

I finally figure out how to make this 'one-way' thing work:

<template>
  <scroller>
    <switch checked="{{switchOn}}" style="margin-bottom:20" onchange="{{clickswitch}}">
    </switch>
    <ui-button value="toggle switch" click="{{toggle}}"></ui-button>
  </scroller>
</template>

<script>
  module.exports = {
    data: {
      switchOn: true
    },
    methods: {
    clickswitch:function(event){
      this.switchOn = event.value;
    },
      toggle: function() {
          console.log("current switch checked:"+this.switchOn);
          this.switchOn = (this.switchOn?false:true);
      }
    }
  };
</script>

There should be a more better & neat way to replace this whole onchange="{{clickswitch}}" and define method code.