使用MVVM模式开发前端 part1

https://github.com/majorye/observer 

Observer.js 【当前版本0.1】

使用MVVM模式来开发前端，它的核心是Observer, Observer change,change包括Mode(view/edit) 和Data的改变。使用了网格化编程的思想，当然，具体网格多大，看具体需求。

例如：

mock up:
<div id="content">
<p><text>First Name: </text><input type="text" data-binding="value:firstName"><p>

<p><span data-binding="text:firstName"></span><p>

<p><text>Last Name: </text><input type="text" data-binding="value:lastName"><p>
<p><span data-binding="text:lastName"></span><p>

</div>

定义一个相对应的viewModel:
var myViewModel={

  firstName: 'shan',

  lastName: 'zhang'

}
然后调用ob.applyBindings(myViewModel, document.getElementById('content') );


这样，input, span连个元素里面的值都是'shan'和'zhang'.

同步：
当如果修改input里面的值，span里面的值是不会同步改变的。Observer.js 帮你实现了。

如何修改？
var myViewModel={

  fristName: ob.observerable( 'shan' ),

  lastName:'zhang'

}

对,只修改告诉Observer.js，这个属性是需要Observerable的，它会帮你搞定。这样，firstName的input框和对应的span里面的值就是同步的了。

接下来会有更多的功能，比如：
 Observer 数组，对象等

Observer Dependence 等

期待吧！