knockout.js data-bind 声明式绑定整理

最新推荐文章于 2022-02-26 09:06:57 发布

.NET跨平台

最新推荐文章于 2022-02-26 09:06:57 发布

阅读量6.4k

点赞数 2

分类专栏： Knockout.js

Knockout.js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、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">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible  
    };
    viewModel.shouldShowMessage(false); // ... now it's hidden 
    viewModel.shouldShowMessage(true); // ... now it's visible again
</script>

3.说明

当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时，该绑定会设置yourElement.style.display为none，让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。

当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时，该绑定会去掉yourElement.style.display值，让元素显示。

注意，任何你在CSS中定义的样式会立即应用生效。

如果参数是一个observable值，visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值，visible绑定仅仅会设置元素visible状态一次，以后不会再更新。

注意：你可以选择使用JavaScript函数或者表达式作为参数值。这样的话，KO将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。

二、Text绑定

1.功能

　　Text绑定主要是让DOM元素显示参数值。

　　通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。

2.示例

Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">   
 var viewModel = {      
  myMessage: ko.observable() // Initially blank  
  };    
viewModel.myMessage("Hello, world!"); // Text appears
</script>

3.说明

　　Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。
　　
　　如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。

　　如果你传入的不是一个值或者一个字符串（比如：你传入一个对象或者数组）那么显示的文本将是yourParameter.toString()的结果。

三、html绑定

1.功能

　　html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。

2.示例

<div data-bind="html: details"></div> 
<script type="text/javascript">
var viewModel = {        
details: ko.observable() // Initially blank    
};    
viewModel.details("<em>For further details, 
view the report <a href='report.html'>here</a>.</em>"); // HTML content appears
</script>

3.说明
　　KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

　　如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

　　如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。

　　注意：因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

四、CSS类名绑定

1.功能

　　css绑定是添加或删除一个或多个CSS class到DOM元素上。非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）

2.示例

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> 
  Profit Information
</div> 
<script type="text/javascript">
var viewModel = {
        currentProfit: ko.observable(150000)
        // Positive value, so initially we don't apply the "profitWarning" class    
};    
viewModel.currentProfit(-50);    
// Causes the "profitWarning" class to be applied
</script>

　　效果就是当currentProfit 小于0的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。

view会随着监控属性的变化自动添加或者删除元素上的CSS class。

3.说明　

　　该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

　　你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

五、Style属性绑定

1.功能

　　style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）

2.示例

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">   
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
        currentProfit: ko.observable(150000)
 // Positive value, so initially black 
   };
    viewModel.currentProfit(-50); 
// Causes the DIV's contents to go red
</script>

　　当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。

　　view会随着监控属性的变化自动添加或者删除该元素的style值

3.说明

　　该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。

　　你可以一次设置多个style值。例如，如果你的view model有一个叫isServre的属性，

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">
...
</div>

如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的style值。如果不是，那style值将会只应用一次并且以后不在更新。

你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。

六、attr属性绑定

1.功能

　　这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：

　　attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。

2.示例

<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>

　　呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。

3.说明

　　该参数是一个JavaScript对象，属性是你的attribute名称，值是该attribute需要应用的值。

　　如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是，那attribute值将会只应用一次并且以后不在更新。

　　注意：应用的属性名字不是合法的JavaScript变量命名

　　如果你要用的属性名称是data-something的话，你不能这样写：

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

　　因为data-something 不是一个合法的命名。解决方案是：在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象文字（从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的）。例如,

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

七、foreach绑定

1.功能

　　使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。

2.示例

（1）、循环遍历输出数组

<script type="text/javascript" src="knockout-2.2.0.js"></script>

 <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>

（2）、动态增加和删除遍历节点

<script type="text/javascript" src="knockout-2.2.0.js"></script>

 <h4>People</h4> 
 <ul data-bind="foreach: people"> 
     <li> 
         Name at position <span data-bind="text: $index"> </span>: 
         <span data-bind="text: name"> </span> 
         <a href="#" data-bind="click: $parent.removePerson">Remove</a> 
     </li> 
 </ul> 
 <button data-bind="click: addPerson">Add</button>

 <script type="text/javascript">
     function AppViewModel() {
         var self = this;

         self.people = ko.observableArray([
         { name: 'Bert' },
         { name: 'Charles' },
         { name: 'Denise' }
     ]);

         self.addPerson = function () {
             self.people.push({ name: "New at " + new Date() });
         };

         self.removePerson = function () {
             self.people.remove(this);
         }
     }

     ko.applyBindings(new AppViewModel());
 </script>

（3）、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话，我们可以使用$data来进行输出。比如：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

 <ul data-bind="foreach: months"> 
     <li> 
         The current item is: <b data-bind="text: $data"></b> 
     </li> 
 </ul> 

 <script type="text/javascript">
     ko.applyBindings({
         months: ['Jan', 'Feb', 'Mar', 'etc']
     }); 
 </script>

　　当然，我们也可以使用 $data来调用数组中具体的元素，比如我们要使用$ data调用例1中的firstName的话，我们可以使用$data.firstName来输出firstName。

（4）、使用$index、$parent等其他的上下文属性
　　我们曾在例2中使用了$index来表示我们数组的下标，$index是Knockoutjs为我们提供的属性，我们可以直接引用，它会随着数组等下标的变化动态变化的，比如如果数组的长度减少了1，$index的值也会跟着减少的。

　　我们也可以使用$parent来使用foreach元素之外的属性，比如：

<h1 data-bind="text: blogPostTitle"></h1> 
<ul data-bind="foreach: likes"> 
    <li> 
        <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b> 
    </li> 
</ul>

这里使用$parent来调用foreach循环体之外的blogPostTitle属性。

（5）、使用"as"为foreach中的元素定义别名
　　我们可以使用$data来代替数组中的元素，同时我们也可以使用as来为我们要遍历的元素起一个别名。

<script type="text/javascript" src="knockout-2.2.0.js"></script>

 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul> 

 <script>
     var viewModel = {
         categories: ko.observableArray([
             { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
             { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
         ])
     };
     ko.applyBindings(viewModel); 
 </script>

　　在使用的时候我们要注意，起别名使用的是as:’category’而不是as:category。

（6）、在没有绑定属性的情况下使用foreach
　　有的时候我们想要循环输出一些特殊的内容，比如我们想要输入下面文本中的<li></li>标签：

<ul> 
     <li class="header">Header item</li> 
     <!-- The following are generated dynamically from an array --> 
     <li>Item A</li> 
     <li>Item B</li> 
     <li>Item C</li> 
 </ul>

　　如果我们想要循环输出上面代码中的<li></li>标签的话，我们就没有一个可以绑定foreach的元素，此时我们可以通过以下的代码来实现：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

 <ul> 
     <li class="header">Header item</li> 
     <!-- ko foreach: myItems --> 
         <li>Item <span data-bind="text: $data"></span></li> 
     <!-- /ko --> 
 </ul> 

 <script type="text/javascript">
     ko.applyBindings({
         myItems: ['A', 'B', 'C']
     }); 
 </script>

我们使用来表示循环的开始和结束，这是一个虚拟的标签，Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。

（7）、默认不显示被标示为删除的元素
　　有的时候我们要跳过数组中的一些元素，此时这些元素已经被标示为删除，但并没有被真实删除，这些元素当我们使用foreach输出的时候是默认不显示的，如果我们想要这些元素显示的话，我们可以使用includeDestroyed这个选项，比如：

<div data-bind='foreach: { data: myArray, includeDestroyed: true }'> 
    ... 
</div>

八、click绑定

1.功能

　　click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。

2.示例

<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>

3.说明
　　Click点击事件时所执行的函数。

　　你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：someObject.someFunction。

　　View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写incrementClickCounter就可以了，而无需写成：viewModel.incrementClickCounter（尽管是合法的）。

　　ps：每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。

九、value 绑定

1.功能

　　value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>，<select>和<textarea>上。

　　当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。

　　注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。

2.示例

<p>
    Login name:
    <input data-bind="value: userName" />
</p>
<p>
    Password:
    <input type="password" data-bind="value: userPassword" />
</p>
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),
        // Initially blank        userPassword: ko.observable("abc"), // Prepopulate    };

</script>

3.说明

　　KO设置此参数为元素的value值。之前的值将被覆盖。

　　如果参数是监控属性observable的，那元素的value值将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。

　　如果你提供的参数不是一个数字或者字符串（而是对象或者数组）的话，那显示的value值就是yourParameter.toString() 的内容（通常没用，所以最好都设置为数字或者字符串）。

　　不管什么时候，只要你更新了元素的值，那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点（例如onchange事件）的时候，KO才更新这个值，但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。

4.其他

valueUpdate
　　如果你使用valueUpdate参数，那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项：

　　“change”（默认值） - 当失去焦点的时候更新view model的值，或者是元素被选择的时候。

　　“keyup” – 当用户敲完一个字符以后立即更新view model。

　　“keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup，这个更新和keydown是一样的。

　　“afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

　　上述这些选项，如果你想让你的view model进行实时更新，使用“afterkeydown”是最好的选择。

示例：

<p>
    Your value:
    <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
</p>
<p>
    You have typed:
    <span data-bind="text: someValue">
    </span>
</p>
<!-- updates in real-time -->
<script type="text/javascript">
    var viewModel = {
        someValue: ko.observable("edit me")
    };
</script>

十、event绑定

1.功能

　　event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。

2.示例

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
</script>

3.说明

　　你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。

　　你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：event: { mouseover: someObject.someFunction }。

　　View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写event: { mouseover: enableDetails }就可以了，而无需写成：event: { mouseover: viewModel.enableDetails }（尽管是合法的）。

　　ps：每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值，而第二个元素会根据detailsEnabled的值自动显示或者隐藏。

knockout.js使用visible, disable, css绑定

这个例子非常简单，主要演示如何通过属性控制html元素的显示与否（visible），可用性（disable）以及根据属性添加相应的CSS样式。

先简单的看一段代码：

<p>
    <input id="isvip" type='checkbox' data-bind="checked: isVip" />
    <label for="isvip">
        是否是会员
    </label>
</p>
<p>
    你的用户名是:
    <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"
    />
    <span data-bind="visible: isVip">
        尊贵的会员欢迎你访问!
    </span>
</p>

这段代码几乎不需要解释，非常的简单易懂，就是控制input元素的可用性，根据其中的文本添加样式，和控制隐藏元素的显示。

完整代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width" />
        <title>
            Test
        </title>
        <script src="~/Scripts/jquery-2.0.3.js">
        </script>
        <script src="~/Scripts/knockout-2.3.0.js">
        </script>
        <style type="text/css">
            .account { border-bottom-color:#0094ff; background-color:#b6ff00; border-bottom-width:2px;
            }
        </style>
    </head>

    <body>
        <p>
            <input id="isvip" type='checkbox' data-bind="checked: isVip" />
            <label for="isvip">
                是否是会员
            </label>
        </p>
        <p>
            你的用户名是:
            <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"
            />
            <span data-bind="visible: isVip">
                尊贵的会员欢迎你访问!
            </span>
        </p>
        <script type="text/javascript">
            function ViewModel() {
                var self = this;
                self.isVip = ko.observable(false);
                self.username = ko.observable("halower@@");
            }
            $(function() {
                ko.applyBindings(new ViewModel());
            });
        </script>
    </body>

</html>

运行效果

这里写图片描述

Knockout.js Select Options绑定

<!DOCTYPE html>

<html>
<head>  <meta charset="utf-8" />

    <title>select</title>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="https://cdn.bootcss.com/knockout/3.4.2/knockout-debug.js"></script>
    <script>

        function MyViewModel() 
        {
            var self = this;  //用self替代this 
            self.peopleList = ko.observableArray([
    { name: "张三", id: "1" },
    { name: "李四", id: "2" },
    { name: "王五", id: "3" }
]); //监控数组
            self.selectedPeople=ko.observable(0); //记录已选中的人员值
            self.peopleChange=function() //选择某个选项后的事件。
            {
                alert(self.selectedPeople());

            }

        }
        $(function () {
            ko.applyBindings(new MyViewModel());
        });
    </script>


</head>
<body>
<div>
<select  data-bind="options: peopleList,optionsText: 'name', optionsValue:'id',value: selectedPeople, optionsCaption: '选择人员...',event: { change: peopleChange}">
</select>
</div>
</body>
</html>

options: peopleList  指定绑定数据有哪个对象来。
optionsText: 'name' 绑定时显示字段为name
optionsValue:'id'  绑定时值字段为id
value: selectedPeople  值保存在哪个对象中
optionsCaption: '选择人员...' 默认下拉框中的文字
event: { change: peopleChange}" 指定onchange事件需要执行的方法

运行结果如图:

这里写图片描述

.NET跨平台

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
knockout.js 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/java
复制链接

扫一扫

专栏目录