（四 ）Knockout - ViewModel 的使用3 - 对象属性变化的实时更新

ko.observableArray()就可以自动检测属性,其实他只是监控对象，而不是对象中的属性

使用ko.observable()进行处理

DEMO1

实时更新属性

//定义user数据对象var UserViewModel = function(id,name,score) {    var me = this;    me.id = id;    me.name =ko.observable(name);  // 监控属性    me.score =ko.observable(score);}

//定义ViewModelvar ViewModel = function() {    var me = this;    me.users = ko.observableArray();//添加动态监视数组对象        me.removeUser = function (user) {        me.users.remove(user);    }    me.totalscore = ko.computed(function () {        var total = 0;        $.each(me.users(), function (i, u) {            total += u.score();        })        return total;    });};

$(function () {    var vm = new ViewModel();    //预先添加一些数据    vm.users.push(new UserViewModel("d1", "rohelm", 121));    vm.users.push(new UserViewModel("d2", "walker", 125));    $("#btnAddUser").click(function () {     vm.users.push(new UserViewModel(        $("#u_id").val(),        $("#u_name").val(),        parseInt($("#u_score").val())));    });    $("#btnUpdateScore").click(function () {        vm.users()[vm.users().length-1].score(125).name("HelloWorld!");    });    ko.applyBindings(vm);});

<section style="margin:250px">    <section>      ID<input type="text" id="u_id" style="width:30px">      Name<input type="text" id="u_name" style="width:30px">      Score<input type="text" id="u_score" style="width:30px"><br/>      <input  value="Add" id="btnAddUser" type="button" style="width:200px; background-color:#ff6a00;"/><br/>       共 <span data-bind="text: users().length"></span> 条--------------合计       <span data-bind="text: totalscore"></span> 分    </section>    <section>    <table>         <thead>             <tr><th>ID</th><th>Name</th><th>Score </th><th>Option</th></tr>         </thead>        <tbody  data-bind="foreach: users">             <tr>                <td><span data-bind="text: id"></span></td>                <td><span data-bind="text: name"></span></td>                <td><span data-bind="text: score"></span></td>                 <td><a href='#' data-bind="click: $root.removeUser">Remove</a></td>             </tr>        </tbody>     </table>         <input  value="Update测试" id="btnUpdateScore" type="button" style="width:200px; background-color:#ff6a00;"/><br/>    </section></section>

DEMO2

通过属性控制html元素的显示、隐藏

var ViewModel = function() {    var me = this;    me.isVip = ko.observable(false);  // 监控属性    me.username = ko.observable("walker_@@");}

$(function () {    ko.applyBindings(new ViewModel());});

<p>    <input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是会员</label></p><p>    你的用户名是:    <input type='text' data-bind="value: username, enable: isVip,CSS: {account: username().indexOf('G')>-1}"/>    <span data-bind="visible: isVip">尊贵的会员欢迎你访问!</span></p>

解析：

view属性绑定，data-bind="checked:true/false"，data-bind="visible:true/false"