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来也不那么费力了吧,呵呵。

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~Knockoutjs系列之对象与对象组合,如需转载请自行联系原博主。

目录
相关文章
|
23天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
25天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
49 6
|
5天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
29天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
154 3
|
2月前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
31 1
|
2月前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
27 1
|
26天前
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
39 0
|
17天前
|
缓存 负载均衡 JavaScript
探索微服务架构下的API网关模式
【10月更文挑战第37天】在微服务架构的海洋中,API网关犹如一座灯塔,指引着服务的航向。它不仅是客户端请求的集散地,更是后端微服务的守门人。本文将深入探讨API网关的设计哲学、核心功能以及它在微服务生态中扮演的角色,同时通过实际代码示例,揭示如何实现一个高效、可靠的API网关。
|
16天前
|
Cloud Native 安全 数据安全/隐私保护
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
|
16天前
|
Dubbo Java 应用服务中间件
服务架构的演进:从单体到微服务的探索之旅
随着企业业务的不断拓展和复杂度的提升,对软件系统架构的要求也日益严苛。传统的架构模式在应对现代业务场景时逐渐暴露出诸多局限性,于是服务架构开启了持续演变之路。从单体架构的简易便捷,到分布式架构的模块化解耦,再到微服务架构的精细化管理,企业对技术的选择变得至关重要,尤其是 Spring Cloud 和 Dubbo 等微服务技术的对比和应用,直接影响着项目的成败。 本篇文章会从服务架构的演进开始分析,探索从单体项目到微服务项目的演变过程。然后也会对目前常见的微服务技术进行对比,找到目前市面上所常用的技术给大家进行讲解。
35 1
服务架构的演进:从单体到微服务的探索之旅