MVVM架构~Knockoutjs系列之对象与对象组合

返回目录

在面向对象的程序设计里，对象是核心，一切皆为对象，对象与对象之间的关系可以表现为继承和组合，而在Knockoutjs或者JS里，也存在着对象的概念，今天主要说一下JS里的对象及对象的组合。

JS里对象可以使用{}生成，也可以使用function(){}方式生成，而使用function(){}方式我认为更灵活，使用{}方式更正规，我这里总结了一下，也是我的习惯，如果对象只是getter,setter的属性块，

可以使用{}的方式，如果对象比较复杂，由属性，方法 组成，这时最好使用function(){}的方式，下面举例说明。

下面定义一个user对象，使用{}方式

var User={
   Name:"zzl",
   Gander:"male"
}

下面是一个User对象的function(){}的形式

var User=function(){
this.Name="zzl";
this.Gander="male";
}
//为了调用上的方便，层次的清晰，我们在调用根元素时，最好把this重新定义，看下面代码：
var User=function(){
　　var self=this;//这里的self表示User对像
　　self.Name="zzl";
　　self.Gander="male";
　　self.Remove=function(){
　　console.log(this.Name);//这里的this表示当前你触发的记录（user可以有多个）
　}
}

好了，有了对象的概念之后，我们来看一下Knockoutjs里如何使用对象，事实上，在Knockoutjs里的viewmodel，即我们的页面数据绑定源，就是一个对象，它也完全支持{}和function(){}两种方式，而我习惯上使用第二次，呵呵，下面我们为view返回一个userList的viewmodel，用来输出一个user对象的集合，将它绑定到<table>元素上。

JS部分代码：

  var User = function (id, name) {
        self = this;
        self.id = ko.observable(id);
        self.name = ko.observable(name);
        self.editing = ko.observable(false);
        self.edit = function () {//这里的this是当前调用的对象，而不是UserList，而self才是UserList对象，这也是为什么要使用var self = this语句的原因
            this.editing(true);
        }
    };
    //集合属性和方法
    var UserList = function () {
        var self = this;
        self.users = ko.observableArray();
        for (var i = 0; i < 10; i++) {
            self.users.push(new User(i, "zzl"));
        }

        // Behavior Remove
        self.removePerson = function () {//data-bind="click:$parent.removePerson"//这句为调用当前对象的父对象上的方法
            self.users.remove(this);
        }
    }

    ko.applyBindings(new UserList());//像view返回一个User集合

看一下HTML代码：

<div class="liveExample">
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="template:{name:'list',foreach: users}">
        </tbody>
    </table>
</div>
<script type="text/html" id="list">
    <tr>
        <td data-bind="text:id"></td>
        <td>
            <input type="text" data-bind="value:name, click:edit" /></td>
        <td>
            <a href="#" data-bind="click:$parent.removePerson">移除</a>
            <span data-bind="visible:editing"><a data-bind='click:save'>保存</a></span>

        </td>
    </tr>
</script>

上面的实例中，实现了对象集合的移除操作，即从users里移除一个User对象，而保存按钮的显示是通过你是否单击文本框决定的，而代码中的$parent.removePerson意思是说，调用users对象的上一级对象的removePerson方法，如果在C#里，这个结构

会是这样实现，看代码：

classUser
{
　　public int Id{get;set;}
　　public string Name{get;set;}
}

class UserList
{
　　public User[] Users{get;set;}
　　public void RemovePerson(User entity)
   {
　　 this.Users.Remove(entity);
　　}
}

怎么样，看了我的C#代码分析，学起JS来也不那么费力了吧，呵呵。

 

 返回目录