Knockout教程第 1部分

分享于 

10分钟阅读

Web开发

  繁體

介绍

近年来,客户端开发和新技术的流行和框架取消。

许多框架如 Angular。Backbone。ember。挖空都出现了。

在本系列中,我们将学习 knockout.js 及其与其他客户端技术的集成。 在第 1部分中,我们将介绍以下内容:

  • 什么是 knockout ( KO )
  • MVVM Pattern
  • 方案

挖空

Knockout是一个JavaScript库,它帮助创建丰富的。响应式的显示和编辑器用户界面,使用干净的底层数据模型。
Model-View-ViewModelJavaScript实现。

让我们尝试了解 MVVM Pattern 用于绑定HTML元素与视图模型的knockout。

MVVM

什么是 MVVM

这是一个软件架构 Pattern。

它最初由微软定义用来与WPF和Silverlight一起使用。 它是 Fowlers presentation presentation presentation presentation的扩展。





什么类型的Pattern

它是表示模式之一。 这些模式的基本目的是消除UI开发的复杂性,从而便于开发。清理和管理代码。 MVP,MVC是其他的表现模式。 视图和视图模型之间的数据绑定使它与其他表示模式不同。

概念图

Conceptual Diagram

M 在

M的模型。模型负责:
  • 状态管理
  • 业务逻辑
  • 数据访问:它可能来自不同的数据源,如 Web服务。数据库等。

模型的示例可以是具有以下属性的帐户对象:

  • 银行名称
  • 帐目编号
  • 状态

五的V

视图使用不同的元素和控件来定义UI的外观,如教科书。按钮。组合框。图像。等等,视图负责渲染UI元素。

虚拟机中的虚拟机( VM )

虚拟机代表视图模型
  • 它是( M ) 和 View(V) 之间的代理,它们把它们粘合在一起。
  • 它的"视图模型"并公开它的属性。命令和抽象来查看。
  • VM从模型( M ) 检索数据,并将它的作为视图的属性公开给视图,视图可以轻松地使用这些属性。
到目前为止,我们讨论什么是 MVVM。 让我们看看如何在不同的技术中实现它。

WPF中的实现

Realization uing WPF

html/javascript中的实现( 使用 Knockout.js )

Realization using Knockout.js

所有理论到目前为止,我们使用Knockout进行一些编码。

编码

我们将在这里介绍的内容:
  • 问题陈述
  • 实现不被击倒
  • Knockout实现

问题陈述

让我们用一个简单的例子来展示用户信息,比如 BankAccountNumberStatus,页面上的。

实现不被击倒

我们需要实现的内容:

  • 用于 BankName,帐号和状态的HTML元素
  • 定义 Account 类和对象的JavaScript
  • javascript/jquery搜索HTML元素并向它们推数据
  • 用户界面
<body><h2>My Account </h2><span>Bank Name:</span><spanid="accontBankName"></span><br/><span>Account Number:</span><spanid="accountNum"></span><br/><span>Account Type:</span><spanid="accountType"></span><br/><span>Status:</span><spanid="accountStatus"></span></body>
JavaScript代码
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function () {
 function Account(bank, accNo, type, status) {
 var self = this;
 self.bank = bank;
 self.accNo = accNo;
 self.type = type;
 self.status = status;
 };
 var myAcc = new Account("Bank1", "12345678", "Saving", "Active");
 // To add this $("#accontBankName").text(myAcc.bank);
 $("#accountNum").text(myAcc.accNo);
 $("#accountType").text(myAcc.type);
 $("#accountStatus").text(myAcc.status);
 });
</script>

让我们看看 上面 方法可能存在的问题:

  • 在源值和目标元素之间的每个映射中都需要一行代码。 只要考虑到我们有很多元素的情况。
  • 如果源值改变,我们将不得不编写更多的代码来再次推值。
  • 如果HTML元素中的值更改,则更改不会反映在基础源中。

点 2和点 3可以通过大量编码来解决。 但是如果我们有一些框架,这样做并将HTML元素绑定到源对象,那就更好了。 这就是像 knockout 这样的框架进入图片的地方。

使用Knockout实现

<body><h2>My Account </h2><span>Bank Name:</span><data-bind="text: account.bank"spanid="accontBankName"></span><br/><span>Account Number:</span><data-bind="text: account.accNo"spanid="accountNum"></span><br/><span>Account Type:</span><data-bind="text: account.type"spanid="accountType"></span><br/><span>Status:</span><data-bind="text: account.status"spanid="accountStatus"></span></body>

用蓝色 background 突出显示更改。 数据绑定属性来自 knockout 库,用于将元素绑定到对象属性。

绑定由两个项组成,绑定 NAME 和值,用冒号分隔

JavaScript代码
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="ko/knockout-2.3.0.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 function Account(bank, accNo, type, status) {
 var self = this;
 self.bank = bank;
 self.accNo = accNo;
 self.type = type;
 self.status = status;
 };
 function AccountViewModel() {
 var self = this;
 self.account = new Account("sbi", "12345678", "Saving", "Active");
 };
 ko.applyBindings(new AccountViewModel());
 });
</script>

更改用蓝色背景突出显示

  • 包含 knockout.js的脚本。 你可以从这里下载到这里。
  • 创建 AccountViewModel 类:与用户界面元素绑定的类。
  • Ko.applybinding: - 它激活高度,并将页面的数据上下文设置为AccountViewModel对象。
如你所见,它减少了代码行的数量。 随着属性和元素数量的增加,只有可能需要更改applyBindings函数的JavaScript代码。 它修复了我们在方法中突出显示的issue# 1.

让我们看看如何修复源对象和html元素之间的#2 换句话说,同步数据。 来自KO的观察者会帮助。 可见性是特殊的JavaScript对象,它可以通知订阅者更改,并且可以自动检测依赖关系。
如何使对象属性可见?

Using ko. Observable ()

让我们看看代码现在是怎样的。

JavaScript代码
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="ko/knockout-2.3.0.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 function Account(bank, accNo, type, status) {
 var self = this;
 self.bank = bank;
 self.accNo = accNo;
 self.type = type;
 self.status = ko.observable(status);
 };
 function AccountViewModel() {
 var self = this;
 self.account = new Account("sbi",
 "12345678", "Saving", "Active");
 };
 ko.applyBindings(new AccountViewModel());
 });
</script>

要查看如何同步数据,让我们添加一个输入元素并将它的绑定到 Status 属性。 现在我们有两个绑定到 Status 属性的元素。

  • id=accountStatusspan 元素
  • 输入元素

这里的UI代码看起来像:

<body><h2>My Account </h2><span>Bank Name:</span><spandata-bind="text: account.bank"spanid="accontBankName"></span><br/><span>Account Number:</span><spandata-bind="text: account.accNo"spanid="accountNum"></span><br/><span>Account Type:</span><spandata-bind="text: account.type"spanid="accountType"></span><br/><span>Status:</span><spandata-bind="text: account.status"spanid="accountStatus"></span><p>Change Account status
 <inputdata-bind="value:account.status"/></p></body>

使用最新的更改浏览页面。 你将看到以下屏幕:

在输入框中键入封闭:

在输入框外单击。 你将看到:

更改输入框中的值时,它会将 Status 属性更新为它的绑定到。 当同一个属性绑定到 span 显示状态时,它将 span 中显示的值更改为" Closed"。

摘要

在本文中,我们介绍了 knockout 和MVVM的基本。 有许多东西要覆盖,如可以观察的array,计算的属性,命令绑定和条件绑定。 我们将在下一篇文章中继续讨论。


PAR  教程  
相关文章