knockoutjs 容易混淆的知识点(绑定)

最新推荐文章于 2024-07-19 15:23:49 发布

weixin_30613343

最新推荐文章于 2024-07-19 15:23:49 发布

阅读量74

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/michelle-phone/p/8964416.html

版权

knockoutjs 是声明式的语法且提供言简意赅的强大的把data link 到UI的javascript库。

一.绑定语法

使用name 和value 中间用冒号分隔，多个绑定表达式之间以逗号分隔。绑定的name必须是已经注册在knockoutjs中的或者是自己自定义的binding 名称，否则绑定不起作用，也不会报错，knockoutjs 会忽略它。绑定的值可以是个具体的值，变量或者直接量(数组，对象，字符串），和有效的javascript表达式

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8"/>
 6     <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js">
 7     </script>
 8 
 9     <script type="text/javascript">
10 
11         window.onload = function () {
12             var viewModel = {
13 
14                 shouldShowMessage: true,
15                 price: function () {
16                     return 20;
17                 },
18                 parseAreaCode: function (data) {
19                     return data;
20                 },
21                 cellphoneNumber: function () {
22                     return '123';
23                 },
24                 myFunction: function (a, b) {
25                     alert(a);
26                 },
27                 "facial-expression2": ko.observable()
28             };
29 
30             ko.applyBindings(viewModel);
31         }
32 
33     </script>
34 </head>
35 
36 <body>
37     <!-- variable (usually a property of the current view model -->
38     <div data-bind="visible: shouldShowMessage">Hi I can see...</div>
39 
40     <!-- comparison and conditional -->
41     The item is
42     <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>.
43     <!-- function call and comparison -->
44     <button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button>
45     <!-- function expression -->
46     <div data-bind="click: function (data) { myFunction('param1', data) }">...</div>
47 
48     <!-- object literal (with unquoted and quoted property names) -->
49     <div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">
50 
51         <span data-bind="text: emotion"></span>
52         <br/>
53         <span data-bind="text: 'facial-expression'"></span>
54         <br/>
55     </div>
56 </body>
57 </html>

View Code

绑定的name 和 value之间可以有空格或没有空格，也可以有换行。

二.绑定上下文

绑定context是一个object，当applyBindings 时，knockoutjs 会自动创建和管理继承式的context.

当使用with 或者foreach时，$data会非常好用。$index 用在foreach时。还可以使用$element.id来获取标签的dom id.

三.自定义绑定

1.注册一个绑定，把自定义的绑定附加到ko.bindingHandlers上。

 1 ko.bindingHandlers.yourBindingName = {
 2     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
 3         // This will be called when the binding is first applied to an element
 4         // Set up any initial state, event handlers, etc. here
 5     },
 6     update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
 7         // This will be called once when the binding is first applied to an element,
 8         // and again whenever any observables/computeds that are accessed change
 9         // Update the DOM element based on the supplied values here.
10     }
11 };

参数说明：

　　element:指的是绑定的标签，$(element)可以操作DOM

　　valueAccessor:可以使用valueAccessor()获取到该绑定对应的属性，使用ko.unwrap 获取返回值

　　allBindings:allBindings.get('name')检索任意name的绑定的值

　　viewModel:Knockout 3.x. 不建议使用，拿到当前的viewModel

　　bindingContext:绑定上下文

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js">
    </script>

    <script type="text/javascript">

        window.onload = function () {
            ko.bindingHandlers.slideVisible = {
                init: function(element, valueAccessor) {

    },
                update: function (element, valueAccessor, allBindings) {
                    // First get the latest data that we're bound to
                    var value = valueAccessor();

                    // Next, whether or not the supplied model property is observable, get its current value
                    var valueUnwrapped = ko.unwrap(value);

                    // Grab some more data from another binding property
                    var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified

                    // Now manipulate the DOM element
                    if (valueUnwrapped == true)
                        $(element).slideDown(duration); // Make the element visible
                    else
                        $(element).slideUp(duration);   // Make the element invisible
                }
            };
            var viewModel = {
                giftWrap: ko.observable(false)
            };
            ko.applyBindings(viewModel);
        }

    </script>
</head>

<body>

    <div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
    <label>
        <input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>

</body>

</html>

转载于:https://www.cnblogs.com/michelle-phone/p/8964416.html

weixin_30613343

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
knockoutjs 容易混淆的知识点(绑定)

knockoutjs 是声明式的语法且提供言简意赅的强大的把data link 到UI的javascript库。一.绑定语法使用name 和value 中间用冒号分隔，多个绑定表达式之间以逗号分隔。绑定的name必须是已经注册在knockoutjs中的或者是自己自定义的binding 名称，否则绑定不起作用，也不会报错，knockoutjs 会忽略它。绑定的值可以是个具体的值，变量或者直接...
复制链接

扫一扫