`
desert3
  • 浏览: 2160614 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

knockoutjs 静动态数据、行为绑定,计算属性及Sync同步更新 Value值更新事件控制

 
阅读更多
data-bind="text: firstName"中data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁, text 表示把绑定的文本赋值给DOM元素

click 用来关联按钮点击事件

data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时,ko先更新viewmodel的数据,然后根据observables,来更新Label的值。valueUpdate: "afterkeydown"'可以控制什么事件才触发value的更新操作, 默认onchange

observables: 观察者模式,当属性发生变化时,主动通知相关者

computed properties: 根据基础属性计算得到新的属性,当基础属性发生变化时,ko会自动重新计算新的值

// 创建一个简单的viewmodel 
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";

    // 动态属性
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    // computed properties 计算属性
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);

    // last name变大写函数(行为)
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

// data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁 text 表示把绑定的文本赋值给DOM元素
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

// 静态文本绑定
<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

// 使用data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时,ko先更新viewmodel的数据,然后根据observables,来更新Label的值
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

分享到:
评论

相关推荐

    KnockoutJS

    **KnockoutJS**,简称KO.js,是一个轻量级的JavaScript库,专注于MVVM(Model-View-ViewModel)设计模式,使得在Web开发中实现数据绑定和动态用户界面变得简单易行。它通过双向数据绑定特性,允许开发者在视图和模型...

    ko knockoutjs动态属性绑定技巧应用

    这种模式在Web开发中被广泛应用于分离视图逻辑与业务逻辑,简化DOM操作,并实现数据与界面的同步更新。 在Knockout.js中,动态属性绑定是开发者需要掌握的一项重要技巧。动态属性指的是在编写ViewModel时不确定的...

    KnockoutJs 帮助文档 中文手册

    计算属性是在KnockoutJS中定义的函数,它们可以依赖于其他属性并自动更新。这些属性不需要手动管理,因为Knockout会跟踪依赖关系并进行必要的计算。 ### 可观察对象(Observables) 可观察对象是KnockoutJS的核心...

    KnockoutJS中文文档新

    例如,`ko.computed`函数可以创建一个计算属性,当其依赖的属性变化时,计算属性的值也会自动更新。 ### 6. 嵌套视图模型与组件化 KnockoutJS支持嵌套的视图模型,这意味着可以将复杂的UI分解为多个独立的、可复用...

    Asp.Net MVC 4 KnockoutJS 框架实例

    同时,KnockoutJS还提供了如依赖跟踪、订阅、计算属性等功能,使得数据管理更加灵活。 例如,一个简单的Asp.Net MVC 4控制器可能会有一个Action方法,该方法获取服务器上的数据并将其序列化为JSON,然后通过HTTP...

    KnockoutJs_帮助文档_中文手册 chm

    `computed observables` 是KnockoutJS中的另一个重要概念,它们是基于其他 observable 的值动态计算出的新值。当依赖的 observable 改变时,computed observables 会自动更新。 5. **订阅和发布** 通过`....

    js knockoutjs 全国省市区三级联动

    这里,我们使用了 `options` 绑定来填充下拉列表,`value` 绑定来跟踪当前选中的值,`visible` 绑定则根据上级选择的值来控制下级列表的显示和隐藏。 在用户选择省份时,我们需要监听 `selectedProvince` 的变化,...

    KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    总的来说,KnockoutJS 的 foreach 绑定提供了一种高效而简洁的方式来处理动态数据集和视图的同步更新。它极大地简化了 JavaScript 的 DOM 操作,使得开发者能够更加专注于业务逻辑的实现,而不必担心手动管理 UI ...

    KnockoutJs中文教程

    主要的数据绑定类型包括文本绑定、值绑定、事件绑定、可见性绑定等。例如,`&lt;span data-bind="text: myProperty"&gt;&lt;/span&gt;` 将显示与`myProperty`关联的值。 **2. 观察者模式** KnockoutJS使用观察者模式来实现数据...

    knockoutjs2.0入门.pdf

    例如,你可以使用`data-bind`属性将`&lt;span&gt;`元素绑定到数据模型中的特定属性,这样当属性值改变时,`&lt;span&gt;`的内容也会自动更新。 3. **可扩展性**: KnockoutJS允许开发者轻松创建自定义绑定,这使得你可以扩展库...

    KnockoutJS by Example源码

    源码中会展示如何使用`text`, `html`, `value`, `if`, `foreach`等不同的数据绑定指令来动态更新视图。 2. ** observables**:在KnockoutJS中,`observables`是可观察的值,当其改变时,会自动更新与其相关的视图。...

    knockoutjs2.0入门.docx

    在2.0版本中,它继续提供了一种强大的方式来绑定数据模型和视图,使得在前端开发中处理DOM元素的更新变得自动化。 在传统的Web开发中,当用户界面需要根据数据模型的变化进行更新时,开发者通常需要手动操作DOM。...

    KnockoutJS 3.X API 第四章之表单value绑定

    总结,`value`绑定是KnockoutJS中实现表单数据双向绑定的关键,使得开发者能更专注于业务逻辑,而不必操心数据与界面同步的细节。结合其他特性,如`options`绑定和`valueAllowUnset`,可以构建出高度动态和响应式的...

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    5. 最后,作者提到了如何使用KnockoutJS来动态添加、删除、修改表格中的数据项,通过更新视图模型中相应数据的值来实现界面的自动更新。 总而言之,这篇文章详细阐述了通过BootstrapTable与KnockoutJS相结合来实现...

    KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

    通过利用数据绑定和依赖追踪功能,KnockoutJS使得开发者能够将UI元素与模型数据关联起来,并自动更新UI以反映数据模型中的任何变化。KnockoutJS 3.X API是一个介绍KnockoutJS库中API使用的指南,而其第四章则专注于...

    knockout 中文文档 官方文档 打包下载

    8. **计算属性**:计算属性是基于其他 observables 的函数,它们会在需要时自动计算出新的值。这对于根据多个 observable 计算结果非常有用。 9. **命令(Commands)**:KnockoutJS 允许你定义可观察的命令,这些...

    WebApi+Bootstrap+KnockoutJs打造单页面程序

    接下来,在具体实现中,结合KnockoutJs进行数据绑定和视图模型的定义,使用Bootstrap框架来美化界面,最终实现一个完整的单页面应用程序。开发者可以利用KnockoutJs的依赖项跟踪特性来更新DOM,并且可以使用...

    基于knockoutjs的分页脚本

    KnockoutJS通过数据绑定将ViewModel与View连接起来,当ViewModel的数据发生变化时,View会自动更新,反之亦然。 ### 2. 数据绑定 KnockoutJS的核心特性之一就是数据绑定。在分页脚本中,我们将利用数据绑定来连接...

    KnockoutJS 3.X API 第四章之事件event绑定

    KnockoutJS是一个轻量级的MVVM(Model-View-ViewModel)库,它使得数据绑定和DOM操作变得更加简单。在KnockoutJS 3.X版本中,事件绑定(event binding)是其核心功能之一,允许开发者在用户与页面交互时调用特定的...

Global site tag (gtag.js) - Google Analytics