（四 ）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);
}

//定义ViewModel
var 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"

转载于:https://www.cnblogs.com/huair_12/p/4233754.html