knockout

KnockoutJS foreach绑定用来处理数组，通常用来将一个数组绑定到一个列表或者table中。在foreach绑定中，我们可以使用if、with等嵌套绑定。 示例代码： <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody> </table> <script type="text/javascript"> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { firstName: 'Denise', lastName: 'Dentiste' } ] }); </script> 绑定规则： 在ViewModel中，people是一个数组，foreach绑定将会遍历这个数组，将每一项生成一个tr，然后添加在tbody中。

7 click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。 例子 <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter">Click me</button></div><script type="text/javascript"> var viewModel = { numberOfClicks: ko.observable(0), incrementClickCounter: function () { var previousCount =this.numberOfClicks(); this.numberOfClicks(previousCount +1); } };</script> 每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。 参数 主参数 Click点击事件时所执行的函数。 你可以声明任何JavaScript函数 – 不一定非要是view model里的函数

1 Knockout简介 (Introduction) Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。 Knockout有如下4大重要概念： 声明式绑定 (Declarative Bindings) ： 使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。 UI 界面自动刷新 (Automatic UI Refresh) ： 当您的模型状态(model state)改变时，您的UI界面将自动更新。 依赖跟踪 (Dependency Tracking) ： 为转变和联合数据，在你的模型数据之间隐式建立关系。 模板 (Templating) ： 为您的模型数据快速编写复杂的可嵌套的UI。 简称：KO 官方网站： http://knockoutjs.com 2 入门介绍 (Getting started) 2.1 KO工作原理及带来的好处 Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很简单的帮你实现并且很容易维护。 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新，都会自动更新相应的内容。 声明式绑定 -

在最近的开发过程中，应用了一些关于knockout的下拉项目。 关于下拉多选的开发在这里做一个记录。 下面直接上代码 添加的时候，无需给初始值 --viewmodel function ViewModel() { //岗位下拉绑定 this.postName = ko.observableArray([]); }; 　　添加了一个触发。根据部门获得对应的岗位 //根据部门ID去获得对应的岗位下拉选项 function jsSearchData(obj) { var depId = $(obj).val(); if ($.trim(depId) != "") { console.log("type=" + depId); $.getJSON("@Url.Action("Json_GetSelectPostAccordingToDepartmentId")", { DepartmentId: depId }, function (data) { viewModel.postName(data); }); } else { viewModel.postName([]); $("select[name=PostName]").trigger("change"); } } 　　 @Html.DropDownList("DepartmentId", ViewBag.DepartmentId

MVVM和viewModel Knockout是建立在以下三大核心功能之上的： 监控属性和依赖跟踪（Observables and dependency tracking） 声明式绑定（Declarative bindings） 模板（Templating） 首先让我们先来了解下MVVM模式，和viewModel的概念。 MVVM（model、view、viewModel）是一种创建用户界面的设计模式，他旨在将一个复杂的UI简单的分割为三个部分： model ： 在你的应用用作存储数据； view ： 一个可见的、交互的UI来展现viewModel的状态； viewModel ： 用纯净的代码来展现ui的数据和操作，可是任意的javascript对象 首先创建一个viewModel，仅仅需要声明一个任意的javascript对象，例如： var viewModel = { 　　name : 'knockout' }; 然后为viewModel创建一个声明式的绑定view，例如： <div id="myview" data-bind="text : name"></div> 最后 激活knockout ，例如 ko.applyBindings(viewModel,document.getElementById('myview')); data-bind属性毕竟不是原生的html属性

KnockoutJS数组比较算法解析 前端开发中，数组是一种非常有用的数据结构。这篇博客会解释并分析KnockoutJS实现中使用的数据比较算法。 算法的目的 KnockoutJS使用MVVM的思想，view model中的数组元素会对应data model中的数组数据，当用户进行输入或者请求后台时，数组数据会发生变更， 从而带动UI的更新。例如购物车类的页面，用户可以通过点击一些按钮来添加/删除购物车中储存的物品。一个显示购物车中商品详情的列表会根据数组中物品元素的变化实时更新。另一个例子可以是一个展示餐馆等候队列的展示页面，随着客人加入/退出队列，服务器端会不断推送数据到前端页面，实时更新当前最新的队列情况。因此我们需要一个算法，根据更新前的数组数据和更新后的数组数据，计算出一个DOM操作序列，从而使得绑定的DOM元素能根据data model里的数据变化自动更新DOM里的元素。 经典Edit Distance问题 开始正式分析之前，我们先回顾一个经典的算法问题。给定两个字符串，允许“添加”，“删除”或是“替换”字符，如何计算出将一个字符串转换成另一个字符串的操作次数。我们不难发现我们之前讨论的问题和这个经典的问题非常相似，但是又有以下一些不同点： DOM元素并不能很好地支持“替换”的操作。通过浏览器的JavaScript

最近接手的任务用的是KnockoutJS + TypeScript，所以第二个项目就采用KnockoutJS做一个老生常谈的TODO List。 https://codepen.io/xinxhe/pen/qBBMoVL KnockoutJS的特点是双向绑定，在ViewModel中定义一系列的变量，然后用data-bind绑定到对应的HTML元件中即可。做这个项目的时候有几个难点：1.实现输入to-do后按回车键添加； 2. 实现动态组件变化，如点击编辑按钮后变成储存按钮，点击编辑按钮后to-do文字部分变成编辑框； 3. 修改样式让to-do变得好看（没错，这个花费时间最长！）☺ 下面上代码： HTML <div class="todo-container"> <div class="todo-sub-container todo-title"> <h2>To-do list by KnockoutJS</h2> </div> <div class="todo-sub-container todo-input"> <input data-bind="value: itemToAdd, valueUpdate: 'afterkeydown', event: { keyup : addItem }" placeholder="Add a to-do" /> </div> <div

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a question with an array of answers. Each answer has a boolean property called isRight, which represents whether the answer is...right. I'm trying to render a radio button for each answer, and have it be checked if that answer is right. If the user clicks a different button, that answer becomes correct. I understand that KO binds the checked property to a value, and each radio button will only be checked if the radio's value matches the bound value; you can't just bind directly to isRight. I put a computedObservable on the question

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I've built a very data/number heavy app in Knockout. I'm currently getting the error: Uncaught Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters. This is happening when my custom bindingHandler (which formats the numbers into 'large' form, ie. 123,345,678,987) tries to write back to the original input which displays the value of a computed function. Value displayed in an input element: self.value = ko.computed(function(){ return self.chosenAge()

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a problem when binding a list of complex values (id/ description) to a list of checkboxes. The problem is that I need not just the id or the description, but both. When I bind using the Checked binding, all the checkboxes in my list are checked when I click one item. This is part of something bigger, and the reason I want the object and not just the id is that the complex type in turn will have a list which I want to bind to another list of checkboxes. Here is a fiddle that produces the problem: http://jsfiddle.net/M8KFd/1 Thankful