在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
2024-08-23 01:51:05
本篇体验使用ko.computed(fn)计算、组合View Model成员、Select元素的绑定、使用构造器创建View Model、通过View Model的原型(Prototype)为View Model添加扩展方法。
□ 使用ko.computed(fn)计算成员
有时候,我们希望把View Model中的几个成员组合起来成为一个新成员,使用ko.computed(fn)可实现。
接着上一篇,为productViewModel这个json对象增加一个计算成员。
<div data-bind="text:formatted"></div> <hr/><input type="text" data-bind="value:name"/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {productViewModel.name(data.Name);productViewModel.category(data.Category);});});var productViewModel = {id: ko.observable(""),name: ko.observable("初始值"),price: ko.observable(""),category: ko.observable("")};//为productViewModel增加一个计算成员productViewModel.formatted = ko.computed(function() {return productViewModel.name() + "--" + productViewModel.category();});//绑定ko.applyBindings(productViewModel);</script>
以上,对于在View Model中的成员,如果已经被赋予observable后,必须通过类似name()的方式获取成员值。
□ Select元素的绑定
对于Select元素,它的options属性应该绑定一个数组,它的value属性绑定一个选中值。
<select data-bind="options: categories, value: category" ></select><hr/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {productViewModel.name(data.Name);productViewModel.category(data.Category);});});var productViewModel = {id: ko.observable(""),name: ko.observable("初始值"),price: ko.observable(""),category: ko.observable(""),categories: ["小说","散文","传记"]};//为productViewModel增加一个计算成员productViewModel.formatted = ko.computed(function() {return productViewModel.name() + "--" + productViewModel.category();});//绑定ko.applyBindings(productViewModel);</script>}
□ 使用构造器创建View Model
<select data-bind="options: categories, value: category" ></select><hr/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {product.name(data.Name);product.category (data.Category);});});var Product = function(name, category, categories) {this.name = ko.observable(name);this.category = ko.observable(category);this.categories = categories;this.formatted = ko.computed(function() {return this.name() + "--" + this.category();}, this);};var product = new Product("默认值", "默认值", ["小说", "散文", "传记"]);//绑定ko.applyBindings(product);</script>}
□ 为View Model原型(Prototype)扩展方法
以上,ko.computed中使用了一个匿名函数,如果把这个匿名函数作为Product的扩展方法,该如何做到呢?<select data-bind="options: categories, value: category" ></select><hr/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {product.name(data.Name);product.category (data.Category);});});var Product = function(name, category, categories) {this.name = ko.observable(name);this.category = ko.observable(category);this.categories = categories;this.formatted = ko.computed(this.getFormatted, this);};ko.utils.extend(Product.prototype, {getFormatted: function() {return this.name() + "--" + this.category();}});var product = new Product("默认值", "默认值", ["小说", "散文", "传记"]);//绑定ko.applyBindings(product);</script>}
以上,通过ko.utils.extend方法,为Product的原型添加了扩展方法getFormatted。
最新文章
- 在Sublime Text 3上安装代码格式化插件CodeFormatter
- jQuery可拖拽3D万花筒旋转特效
- java中设置代理的两种方式
- java容器collection的一些简单特点
- 对《神奇的C语言》文中例子 5 代码的分析讨论
- atitit 点播系统 概览 v2 qb1.docx
- C#Winform VScrollBar+Pannel自定义列表控件(原)
- Cobub Razor
- oracle的表名、字段名、constraint名的长度限制分别是多少?
- iOS 本地企业发布流程
- How to Determine the Version of Oracle XML Publisher for Oracle E-Business Suite 11i and Release 12 (Doc ID 362496.1)
- E - Phone List(字典序,string类型使用)
- 简单时钟——css3
- Archlinux中卸载 Slim
- AngularJS $compile动态生成html
- poj-1012-约瑟夫问题
- mysql数据库单表只有一个主键自增id字段,ibatis实现id自增
- UCloud 机房的网络搭建(计蒜客初赛第五场)
- Eclispe最常用的几个快捷键
- SpringBoot-整合lombok
热门文章
- poj1273
- testng运行失败,继续执行
- unit测试出现异常:Exception in thread ";main"; java.lang.NoSuchMethodError: org.junit.platform.commons.util
- 16.网络《果壳中的c#》
- appium入门级教程(2)—— 安装Appium-Server
- springcloud hystrix 部分参数整理
- 【AtCoder】AGC025题解
- Codeforces Round #189 (Div. 1) C - Kalila and Dimna in the Logging Industry 斜率优化dp
- Java死锁排查和Java CPU 100% 排查的步骤整理
- 使用ApiPost测试接口时需要先登录怎么办?利用Cookie模拟登陆!