knockoutJS快速上手

许多时候,学会一种技术的有效方式就是使用它解决实际中的问题。在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用。

应用概览

在创建我们的应用之前,我们需要一个公司,来理解应用解决的问题。我们的应用将能够完成下列任务:

浏览公司销售的每种产品,跟踪 SKU 数量和说明。

对每种产品的价格,费用和数量进行赋值。

当公司决定销售某种新产品的时候,可以创建新的产品。

当公司停售某种产品的时候,可以删除这种产品。

第一步 定义命名空间

在我们实际开始开发应用之前,很重要的一个问题就是规划我们如何组织我们的程序,将我们应用的代码与浏览器界面和本地函数进行分离。你可能奇怪对于这么小的应用我们为什么要这么做。对于 JavaScript 应用的最佳实践来说,这么做无论如何都是非常重要的。通过命名空间,即使对于一个很小的应用来说,在以后随着应用的不断扩展,也可以确保容易进行维护,并且与第三方的组件进行分隔。( 例如许多的脚本插件 )

我们将在前面创建的 app.js 中定义我们的命名空间。下面代码就是定义定名空间的代码。

// Define the namespace  

window.myApp = {};

第二步 创建模型

我们创建的第一个模型将用来表示我们的产品对象。我们通过创建一个名为 Product.js 的文件来完成这个任务。文件的内容如下所示。

(function (myApp) {  

    // Product Constructor Function  

    function Product() {  

        var self = this;  

        // "SKU" property  

        self.sku = ko.observable("");  

        // "Description" property  

        self.description = ko.observable("");  

        // "Price" property  

        self.price = ko.observable(0.00);  

        // "Cost" property  

        self.cost = ko.observable(0.00);  

        // "Quantity" property  

        self.quantity = ko.observable(0);  

    }  

    // add to our namespace  

    myApp.Product = Product;  

}(window.myApp));

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索sku
, 应用
, 产品
, property
, knockoutjs
, knockoutjs前端技术knockout
, knockoutjs+ajax+mvc4
, 一个
, Self
, observable
, knockoutjs绑定
, knockoutjs分页
knockoutjs教程
knockoutjs、knockoutjs 中文手册、knockoutjs 教程、knockoutjs视频教程、angularjs knockoutjs,以便于您获取更多的相关知识。

时间: 2025-01-08 22:07:45

knockoutJS快速上手的相关文章

Win8强大兼容性无需适应快速上手

  如果说使用Win7是在一个我们熟悉的环境中操作,那么Win8就是给我们带来了两个激动人心的环境,一个是新颖的"开始"屏幕及它的应用生态,还有一个就是我们熟悉的跟Win7一样的桌面系统.这也就意味着Win8具有很强的兼容性,可以毫不费力地运行Win7的程序,轻松上手无压力. 其实一个操作系统做到Windows这样,基本也不用太多的在意兼容性问题了.作为一个使用最广泛的操作系统,任何软件厂商都会千方百计地向其靠拢,以便能在新系统上运行它们的程序,这是一个向上兼容的过程. Win8不仅仅

Eclipse快速上手Hibernate--4. 继承映射(3)

继承     前两篇文章<Eclipse快速上手Hibernate--4. 继承映射(1) >和<继承映射(2)>中已经谈了每个类层次结构一个表(table per class hierarchy)与每个子类一个表(table per subclass)的策略,这篇文章主要说的是每个具体类一个表(table per concrete class).一些重复的部分这里就不说了,请参考前两篇文章.    这个策略很简单,抽象的基类不参与映射,具体子类参与映射.  1. 创建项目 · 

Eclipse快速上手Hibernate--4. 继承映射(1)

继承    前面的<Eclipse快速上手Hibernate--1. 入门实例 >等三篇文章已经谈了Hibernate的入门以及利用工具创建的方法.这篇文章主要说说在Hibernate中的继承映射.相关配置请参考前三篇文章.    如果程序中的对象含有继承的关系,在Hibernate中有以下三种策略将这种关系映射到数据表上:· 每个类层次结构一个表(table per class hierarchy)· 每个子类一个表(table per subclass) · 每个具体类一个表(table

Eclipse快速上手Hibernate--5. 组件映射

    这篇文章主要说的是在Hibernate中的组件(Component)映射,可以参考Hibernate官方文档的第7章.至于环境设置,可以参考这个系列的前面几篇文章.  1. 创建项目 ·  新建一个Java项目:ComponentMapping,注意选中"创建单独的源文件夹和输出文件夹",同时添加"用户库":hibernate.   2. 编写类文件 ·  新建一个类,包名:javamxj.hibernate.component,类名:Person.Pers

Eclipse快速上手Hibernate--4. 继承映射(2)

继承     上篇文章<Eclipse快速上手Hibernate--4. 继承映射(1) >中已经谈了每个类层次结构一个表(table per class hierarchy)的策略,这篇文章主要说的是每个子类一个表(table per subclass)的策略.一些重复的部分这里就不说了,请参考上篇文章. 1. 创建项目 ·  继续沿用上篇文章中所建的Java项目:InheritanceMapping.   2. 编写类文件 ·  新建一个类,包名:javamxj.inheritance.t

Eclipse快速上手Hibernate--2. 利用Hbm映射文件开发

   这篇文章是上篇文章<Eclipse快速上手Hibernate--1. 入门实例>的延续,主要说的是如何利用Hbm映射文件产生普通的Java对象及数据表.可以参考Hibernate自带的文档<HIBERNATE - 符合Java习惯的关系数据库持久化>的第15章--<工具箱指南>一节.同样,这篇文章没有过多谈理论,只是给出了一个完整的实例加以说明.相关配置请参考上篇文章.  1. 创建项目 ·  新建一个Java项目:HibernateBegin_2,注意选中&qu

Eclipse快速上手Hibernate--3. 利用XDoclet开发

    这篇文章是上两篇文章<Eclipse快速上手Hibernate--1. 入门实例>和<Eclipse快速上手Hibernate--2. 利用Hbm映射文件开发>的延续,主要说的是如何利用XDocletHbm映射文件产生Hbm映射文件及数据表.可以参考XDoclet文档中关于Hibernate的部分和夏昕编写的<Hibernate开发指南>.同样,这篇文章没有过多谈理论,只是给出了一个完整的实例加以说明.相关配置请参考上两篇文章.  1. 创建项目 ·  新建一个

DirectX9 3D 快速上手 5

DirectX9 3D 快速上手  5By sssa2000     这一章的内容相对很简单,控制Mesh的移动,旋转等等,其实这一切都是在对矩阵进行操作.在 DX中,用到的变换有3种,一种是基于Word坐标系的,一种是基于View坐标系的,还有一种是基于投影的变换.而这些变换都是通过矩阵的运算来实现的,在.Net的托管环境下,实现这些操作相对于非托管来说简单一写,不用对矩阵的每个值运算. 关于矩阵的运算和变换的关系,很多文章都有分析,GameRes也有很多这样的好文章,例如:http://de

DirectX9 3D快速上手 3

DirectX9 3D快速上手 3 By sssa2000 4/15/2005 我们这里暂时先跳过,乏味的索引缓冲和深度缓冲的内容,先看看怎么在3D空间中实现一个东西,给自己来点成就感. 正好SDK的向导也是这么安排的,呵呵,那我们就继续从向导出发吧,以Tutorial 3为例子. 这个例子主要讲解运用变换矩阵来实现物体的变换,学过图形学或者线性代数的肯定就很容易理解,没学过的,找点这方面的资料看看就可以了. 先看看这个例子实现了什么,编译运行,噢,相比前面两个例子,有耳目一新的感觉,一个三角形