繁体   English   中英

敲除改变绑定事件

[英]knockout chaning binding events

目前,我无法触发依赖于敲除中另一个绑定事件的结果的绑定事件。

在下面的示例中,在“ available”输入中提供一个值,当“ condition1”输入中填充诸如22之类的值时,应清除并禁用“ available”输入,所有这些操作均在跳过逻辑绑定中完成。 这是正常发生的情况。

但是,问题在于在chain1输入元素上执行skiplogic绑定。 清除“可用”输入的值后,甚至不会触发此操作。 我如何获得它,以便一个绑定的结果激发另一个绑定?

这是下面代码的js小提琴版本: http : //jsfiddle.net/gYNb8/2/

这是我用来测试概念的表格:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<span>Condition 1</span> 
<input id="condition1" data-bind="value: condition1" />
<br/>
<span>Condition 2</span> 
<input id="condition2" data-bind="value: condition2" />
<br/>
<span>Available?</span> 
<input id="available" data-bind="value: available, skipLogic: condition1, skipLogic: condition2" />
<br/>
<span>Chain1</span> 
<input id="chain1" data-bind="value: chain1, skiplogic: available" />

这是JavaScript:

//此屏幕的总体viewmodel,以及初始状态函数ReservationsViewModel(){var self = this;

    self.condition1 = ko.observable();
    self.condition2 = ko.observable();
    self.available = ko.observable();
    self.chain1 = ko.observable();

}

//Here are the conditions which govern whether an element should be enabled or not
var elementConditions = {
    'available': [{
        'Condition': 'condition1() > 0',
        'Type': 'evaluation'
    }, {
        'Condition': 'condition2() > 0',
        'Type': 'evaluation'
    }],
        'chain1': [{
        'Condition': 'available',
        'Type': 'empty'
    }]
};


ko.bindingHandlers.skipLogic = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {


        var id = $(element).attr("id");
        var conditions = elementConditions[id];
        var isSkipped = false;
        var conditionMet = false;

        for (var i = 0; i < conditions.length; i++) {
            conditionMet = false;
            if (conditions[i].Type == "evaluation") {
                conditionMet = eval('viewModel.' + conditions[i].Condition);
            } else if (conditions[i].Type == "empty") {
                if ($('#' + conditions[i].Condition).val().length == 0) {
                    conditionMet = true;
                }
            } else if (conditions[i].Type == "notempty") {
                if ($('#' + conditions[i].Condition).val().length > 0) {
                    conditionMet = true;
                }
            }

            if (conditionMet == true) {
                isSkipped = true;
            }
        }

        if (isSkipped) {
            eval("viewModel." + id + "('');");            
            $(element).attr("disabled", "disabled");
        } else {
            if (elementSkipped[id] > 0) {
                $(element).attr("disabled", "disabled");
            } else {
                $(element).removeAttr("disabled");
            }
        }
    }
};

ko.applyBindings(new ReservationsViewModel());

绑定的update函数将在第一次绑定元素时(在init函数之后)执行,然后在其任何依赖项发生更改时都将再次运行。 您可以通过访问函数内的可观察对象来创建依赖项(就像在计算机内部一样),因为计算机实际上用于促进绑定更新。

因此,您将要确保通过调用valueAccessor()来访问传递给绑定的任何内容,然后,如果该值是可观察到的,则希望将其作为函数来检索该值。 否则,如果不确定您是否已通过可观察对象,则可以调用ko.unwrap (在2.3之前为ko.utils.unwrapObservable可以使用2.3后版本)。

此外,您可以使用allBindingsAccessor参数(第3个参数)或直接从数据(第4个arg)或上下文(第5个arg)访问值,以传递传递给其他绑定的值。

传递具有相同元素相同名称的多个绑定将不起作用。 您可能需要考虑采用不同的结构,例如传递数组data-bind="skipLogic: [one, two]" ,然后访问每个数组的值。

您可以使用布尔逻辑在绑定中将它们串联在一起吗? 这样,您就不必跟踪每个绑定状态。 我建立了以下绑定:

ko.bindingHandlers.skipLogic = {
init: function(element, valueAccessor) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var valueOfCondition = ko.unwrap(valueAccessor());
    var jqElement = $(element);       

//update if the field is disabled if more than one condition is met        
        if(valueOfCondition){
            jqElement.prop('disabled', true);
        }
        else{
            jqElement.prop('disabled', false);
        }
     }
};

一个有效的示例在这里: http : //jsfiddle.net/M7vUV/3/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM