attr绑定

目的

attr绑定可以设置DOM元素的属性值。例如,当我们需要设置title的值,或者一个img的src值,或者一个超链接的href,使用属性绑定会在model的值发生改变时动态的更新绑定的属性值。

示例

<a data-bind="attr: { href: url, title: details }">
    Report
</a>
 
<script type="text/javascript">
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Report including final year-end statistics")
    };
</script>

这样就会把url设置成year-end.html, 把title设置为Report including final year-end statistics.

参数

  传递的参数是一个JavaScript对象的类型,参数的名称就是属性的名称,参数的值呢,就是要设置的属性的值。

  如果参数的值使用了一个observable的属性,那么这个属性将会是动态的,当observable的值发生改变时,KO会更新属性值。

注:如果属性名称不是一个合法的JavaScript变量名要怎么办

  例如,要绑定属性data-something,这样写是错的:  

<div data-bind="attr: { data-something: someValue }">...</div>

  正确的写法,是把属性使用引号括起来:

<div data-bind="attr: { ‘data-something‘: someValue }">...</div>

注:在老的浏览器是使用一些JavaScript关键字

  在一些老的浏览器(如IE8以下的),使用javascript的关键字会报错,此时只需要使用引号把关键字括起来就行了:

<input data-bind="attr: { ‘for‘: someValue }" />
时间: 2024-08-26 11:09:30

attr绑定的相关文章

KnockoutJS 3.X API 第四章 数据绑定(1) UI绑定

目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的可见或隐藏 例子: <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value

【Knockout】三、data-bind声明式绑定

1.visible绑定 <div id="myview" data-bind="visible : isVisible"> visible bind </div> <script> var viewModel = { isVisible : ko.observable(true) }; viewModel.isVisible(false); var el = document.getElementById('myview'); k

3.Knockout.Js官网学习(visible绑定)

前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shouldShowMessage: ko.observable(true) ///初始化的时候div是visible的 }; AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒 ko.applyBindings( AppV

KnockoutJS(4)-控制文本和外观绑定

控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是让DOM元素显示参数值. 通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素. html 绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用

knockoutjs data-bind 声明式绑定整理

一.Visible绑定 1.功能 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 2.示例 <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script type="text/javascript"

Knockout学习之文本和外观绑定器

文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面的示例: 1 <span data-bind="visible:visibleState">显示了</span> 2 <div> 3 <button type="button" data-bind="click:sho

knockoutJS学习笔记05:控制文本和外观绑定

测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.observable(age); self.isShow = ko.observable(""); self.html = "<div>没有div</div>", self.isRed = true } var person = new Person(

第三章:绑定语法(1)

第三章所有代码都需要启用KO的 ko.applyBindings(viewModel); 功能,才能使代码生效,为了节约篇幅,所有例子均省略了此行代码. 1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldSh

手写vue双向绑定数据

来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定watcher (3)  实现DOM事件改变之后, 响应data数据,实现视图更新 <!DocType> <html> <title>vue 的双向绑定事件</title> <body id="app"> <input ty