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:
<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.