什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一个"监控数组" ,observable array,(和wpf里面的ObservableCollection<T>差不多).当你添加或移除,或者重新排序数组里面的元素的时候,会动态的更新UI界面.并且此时并不会影响原先的DOM元素.这样比我们直接…

foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一个"监控数组" ,observable array,(和wpf里面的ObservableCollection<T>差不多).当你添加或移除,或者重新排序数组里面的元素的时候,会动态的更新UI界面.并且此时并不会影响原先的DOM元素.这样比我们直接重新生成一个数组并且绑定元素高效…

2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进行添加,移除还是重新排序,对应的UI结构也会发生相应变化 -- 插入或移除标记结构,或者重排已存在的DOM元素.这不会影响其他的DOM元素,这远比数组发生改变后重新渲染生成foreach输出结构快多了. 当然,你可以嵌套任意数量的foreach绑定,或者其他的控制流绑定,比如if绑定和with绑定.…

控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: <ul data-bind="foreach:people" > <li data-bind="text:Name"></li> </ul> <script type="text/javascript"> var appViewMode…

本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.observable(data.name); this.category = ko.observable(data.category); }; 由于是从服务端返回json数据,待会服务端返回Products集合的时候,可以构建一个key为name和category的json格式. 而foreach需要绑…

Binding context binding context是一个保存数据的对象,你可以在你的绑定中引用它.当应用绑定的时候,knockout自动创建和管理binding context的继承关系.这种层次结构的根引用你指定的viewModel参数(ko.applyBindings(viewModel)). 然后每次使用一个控制流如with或者foreach 来创建一个子节点binding context引用嵌套的viewModel data. $parent <h1 data-bind=&quo…

目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Native templating它由foreach, if, with,或其它控制流绑定(control flow bindings)组成 . 这些控制流绑定捕捉包含你指定的所有HTML标记,把它作为模板来呈现任意数据项目,此特性由Knockout内置,无需任何扩展库. String-based te…

example(click绑定) Click绑定对DOM元素添加一个函数,当DOM元素被点击的时候调用.在button,input 或者a标签中常用,但其实他适用于任何可见的DOM元素. 每当你点击button按钮的时候,viewModel 里面的incrementClickCounter() 函数被调用,然后更新 numberOfClicks 的值,然后更新界面 我们可以调用任何javaScript函数,可以不在view model里面,也可以以someObject.someFunction的…

event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简单示例 <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bin…

前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h2>ClickBind</h2> <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="…

selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在multi-select列表选择或反选一个项的时候,会将view model的数组进行相应的添加或者删除.同样,如果view model上的这个数组是observable数组的话,你添加或者删除任何item(通过push或者splice)的时候,相应的UI界面里的option项也会被选择上或者反选.这种方式是2…

enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled.在form表单元素input,select,和textarea上非常有用. enable简单示例 <h2>enableBind</h2> <p> <input type='checkbox' data-bind="checked: hasCellphone"/> I have a cellphone</p> <p> You…

本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮,每点击一次,显示的次数加1,并且,当次数达到3次,button禁用3.最下面的div只有在次数达到3的时候才显示,并提供"重置"按钮 <div>You've clicked <span data-bind='text: numberOfClicks()'> <…

本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bindings.暂且不管业务逻辑,先把关注点放在界面UI上,即"MVVM"模式中的第二个"V", 也就是View视图.根据Knockout的语法,创建如下界面: <div> <p>First name:<input data-bind="…

foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素. 当然,也可以配合其他控制流一起适用,例如if和with. 示例1:遍历监控属性数组 本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容 <table> <thead> <tr&g…

  KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: pe…

架构设计(ASP.NET MVC+Knockout+Web API+SignalR) 架构设计(ASP.NET MVC+Knockout+Web API+SignalR) 2014-01-16 18:12 by 圣殿骑士, 2437 阅读, 29 评论, 收藏, 编辑 最近忙于重构项目的架构设计,没有时间发博客,也没有时间回复邮件及博文评论,忘各位见谅: 今天先发布架构设计图,同样没有时间写相关的介绍也没有时间回复评论,所以就不发在首页,希望给看到的朋友一些参考,同时也希望大家给点意见! 作者:…

目的 foreach可以将一个数组中的实体循环的进行绑定.这在将一个list显示成table时非常有用. 假设数组是observable的,当在绑定后做了add, remove,或者重新排序后,绑定会找到相应的元素做新增.删除或者排序,而不会影响其他不相关的DOM元素.这比重新生成整个foreach的输出要高效的多. 当然,你也可以任意的使用其他控制语句如if和with来嵌套foreach绑定. 例1:遍历数组 示例使用foreach循环一个数组实体展示成一个只读的table <table>…

if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似.可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素. 示例1 该例展示IF绑定的动态删除添加DOM: Display message Here is a message. Astonishing. ko.applyBindings({ displayMessa…

目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var viewModel = { detailsEnabled: ko.observable(false), enableDetails: function() { this.detailsEnabled(true); }, disableDetails: function() { this.detailsE…

今天跟大家分享下在Asp.NET Web API中Controller是如何解析从客户端传递过来的数据,然后赋值给Controller的参数的,也就是参数绑定和模型绑定. Web API参数绑定就是简单类型的绑定,比如:string,char,bool,int,uint,byte,sbyte,short,ushort,long, float这些基元类型.模型绑定就是除此之外的复杂类型的绑定.大家都知道在MVC中模型绑定都是通过默认的DefaultModelBinder来绑定的,没有Get请求和P…

 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就从this绑定的五种场景(默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定)出发,静下心来好好聊聊这个 this,本文开始.  贰 ❀ this默认绑定 this默认绑定我们可以理解为函数调用时无任何调用…

目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this 捌 ❀ 总 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就…

[源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作者:webabcd 介绍背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Binding 绑定对象Bind/BindingModel.xaml <Page x:C…

[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.xaml <Page x:Class="Windows10.Bind.BindDemo" xmlns=&…

[源码下载] 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定 作者:webabcd 介绍背水一战 Windows 10 之 绑定 TemplateBinding 绑定 与 RelativeSource 绑定 与 StaticResource 绑定 示例1.演示 TemplateBinding 的用法Bind/TemplateBindingDemo.xaml <Page…

[源码下载] 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue 作者:webabcd 介绍背水一战 Windows 10 之 绑定 与 Element 绑定 与 Indexer 绑定 TargetNullValue - 当绑定数据为 null 时显示的值 FallbackValue - 当绑定失败时显示的值 示例1.演示如何与 Element 绑定Bind/BindingEl…

早期绑定和后期绑定 Visual Studio 2005   其他版本   将对象分配给对象变量时,Visual Basic 编译器会执行一个名为 binding 的进程.如果将对象分配给声明为特定对象类型的变量,则该对象为“早期绑定”.早期绑定对象允许编译器在应用程序执行前分配内存以及执行其他优化.例如,下面的代码片段将一个变量声明为 FileStream 类型: VB   ' Create a variable to hold a new object. Dim FS As System.I…

目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于,value绑定中当用户编辑表单控件相关值的时候,值会自动更新视图模型的相关属性值,当视图模型的相关属性值被更新后,表单中相关的value绑定也会随之变化. value绑定就像DOM和ViewModel的一个双向通道.而text绑定只是ViewModel到DOM的单向通道. 例如: <p>Logi…

Swift中的可选绑定和守护绑定 1.可选绑定 格式 // 通过url来创建request对象 if let tempUrl = url { // url为可选类型,当可选类型有值,才执行大括号里面的代码 let request = NSURLRequest(URL: tempUrl) } 缺点:当可选类型太多的时候,需要进行多次判断,然后代码就成狗了,如下 if () { if () { if () { if () { } } } } 守护绑定 苹果考虑到了狗一样的代码,推出了守护绑定,关键字…