knockoutjs关于ko.bindingHandlers的updata订阅

ko.bindingHandlers是先执行init进行初始化数据的绑定(如果需要执行updata进行数据更新可以不用初始化);

1 init: function(element, valueAccessor) {
2                     //初始化数据--然后执行updata进行需要更新数据的绑定,添加订阅
3                     //如果在updata进行了数据的执行,init可以添加初始化事件
4                     var value = valueAccessor(); // Get the current value of the current property we're bound to
5                     $(element).text(value); // jQuery will hide/show the element depending on whether "value" or true or false
6                 },
ko.bindinHandlers.init

在updata里面,才是订阅产生的时候,而不是在init的时候,数据就绑定了订阅;

1 update: function(element, valueAccessor, allBindings) {
2                     var value = ko.unwrap(valueAccessor()); //执行更新数据绑定,必须要执行一次否则无法确定添加订阅
3                     //var value = valueAccessor()(); // Get the current value of the current property we're bound to
4                     $(element).text(value);
5                 }
ko.dindingHandlers.updata

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/knockout-3.4.0.debug.js"></script>
        <script type="text/javascript">
            ko.bindingHandlers.slideVisible = {
                init: function(element, valueAccessor) {
                    //初始化数据--然后执行updata进行需要更新数据的绑定,添加订阅
                    //如果在updata进行了数据的执行,init可以添加初始化事件
                    var value = valueAccessor(); // Get the current value of the current property we're bound to
                    $(element).text(value); // jQuery will hide/show the element depending on whether "value" or true or false
                },
                update: function(element, valueAccessor, allBindings) {
                    var value = ko.unwrap(valueAccessor()); //执行更新数据绑定,必须要执行一次否则无法确定添加订阅
                    //var value = valueAccessor()(); // Get the current value of the current property we're bound to
                    $(element).text(value);
                }
            };
            var model = {
                te: ko.observable("ttttttttt"),
                aaa: function() {
                    this.te("aaaaaaaaaaaaaaaaaaaa");
                }
            }
            window.onload = function() {
                ko.applyBindings(model, document.body)
            }
        </script>
    </head>

    <body>
        <div data-bind="slideVisible:te"></div>
        <input type="button" value="aaaaaaaaa" data-bind="click:aaa" />
    </body>
</html>
ko.bindingHandlers.model

注:小七目前还是小白,写的博客为笔记类型的博客,是在项目中遇到的问题,仅用于学习。

  涉及到原理部分还未做总结。

  如果内容有不对、不全面或者其他的问题,欢迎大家纠正。

内容为小七在工作中遇到或在其他地方看到所做的总结,方便以后查看,仅供学习使用; 转载请注明出处;
原文地址:https://www.cnblogs.com/xiaoxiaoqiye/p/5908198.html