Knockout.js学习笔记----绑定

最新推荐文章于 2020-05-28 13:53:21 发布

desting0725

最新推荐文章于 2020-05-28 13:53:21 发布

阅读量465

点赞数

分类专栏：技术方案文章标签： html 前端 Knockout.js js web前端

本文链接：https://blog.csdn.net/weixin_39869732/article/details/100015056

版权

技术方案专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、Visible绑定

Visible绑定通过绑定一个值来确定DOM元素显示或隐藏；

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

2、Text绑定

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

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

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、html绑定

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

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

4、CSS类名绑定

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

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

绑定多个值时：

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

5、Style属性绑定

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

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

设置多个style值：

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

注意：

注：应用的style的名字不是合法的JavaScript变量命名

如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。

错误：{ font-weight: someValue }; 正确：{ fontWeight: someValue }

错误：{ text-decoration: someValue }; 正确：{ textDecoration: someValue }

参考：style名称和对应的JavaScript 名称列表。

6、attr属性绑定

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

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

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

7、foreach绑定

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

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

8、if绑定

（1）、使用if binding可以控制某个组件动态显示，类似我们之前接触到的visible属性，不过此属性绑定过以后就不能更改，而if binding可以根据相应的条件控制组件是否显示，下面是一个简单的例子：

<script type="text/javascript" src="knockout-2.2.0.js">
</script>
<label>
    <input type="checkbox" data-bind="checked: displayMessage" />
    Display message
</label>
<div data-bind="if: displayMessage">
    Here is a message. Astonishing.
</div>
<script type="text/javascript">
    ko.applyBindings({
        displayMessage: ko.observable(false)
    });
</script>

此例根据checkbox是否勾选来控制是否显示下面的一个<div>。

与visible binding类似，都可以控制一段内容是否出现在页面中。

与visible不同的是，if binding是真正的控制Html标签是否出现在DOM中，如果绑定的值为false,则Html标签不会出现在页面中。

if绑定会修改DOM结构，所以出于性能考虑，不应该频繁修改if的绑定值。（这种情况应该使用visible binding）

如果与observable或者computed属性绑定，则会产生双向绑定效果。

9、with绑定

我们可以使用with binding来重新定义一个上下文绑定，比如：

<script type="text/javascript" src="knockout-2.2.0.js">
</script>
<h1 data-bind="text: city">
</h1>
<p data-bind="with: coords">
    Latitude:
    <span data-bind="text: latitude">
    </span>
    , Longitude:
    <span data-bind="text: longitude">
    </span>
</p>
<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude: 51.5001524,
            longitude: -0.1262362
        }
    });
</script>

这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了，因为我们使用with:coords来指定了coords的上下文，当我们使用coords下面的属性时就可以直接使用了。

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

11、event绑定

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

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

注1：传参数给你的click 句柄

最简单的办法是传一个function包装的匿名函数：

<button data-bind="event: { mouseover: function() { viewModel.myFunction('param1', 'param2') } }">
    Click me
</button>

12、submit绑定

submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

13、value 绑定

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

参考文献：http://www.aizhengli.com/knockoutjs/52/knockout-viewmodels-observables.html