Knockout.Js不检测程序改变复选框状态(Knockout.Js doesn't de

2019-08-05 11:35发布

我有一个简单的复选框有它由一个位的基础设施,我写在localStorage的坚持状态调整值。 我知道,这通常是通过设置视图模型来完成, 但基础设施不知道任何基因敲除绑定,并有他们的访问权限。

我不认为这会是一个问题,因为我认为在淘汰赛跑断“变”事件,但是$checkbox.prop('checked', true).trigger('checked')未能触发我观察到的。 即使使用click事件直接没有得到我完全是我所需要的。

哪些事件呢淘汰赛丝? 我如何得到它来读取控制的状态?

jsbin这里展示这种怪异的行为 。 尝试直接选择复选框与点击的按钮。

Answer 1:

我发现这样做的更好的方法。 只是把这个代码的domready中事件的内部:

    $("input:checkbox").bind('change', function () {
        $(this).triggerHandler('click');
    });


Answer 2:

淘汰赛绑定不会真的在你所想的方式工作。

退房: http://knockoutjs.com/documentation/custom-bindings.html

这里是一个解决方案,您可以使用,没有jQuery的,没有自定义绑定。

你的HTML将保持不变。

var m = {
  isChecked: ko.observable(false),
  infrastructureUpdatesCheckbox: function() {
    this.isChecked( this.isChecked() === true ? false : true);
  }
};

ko.applyBindings(m);


Answer 3:

你应该改变复选框”通过您的视图模型检查状态:

 var m = {
   isChecked: ko.observable(false)
  //,infrastructureUpdatesCheckbox: function() {
    //$chk = $(':checkbox');
    //$chk
    //  .prop('checked', !$chk.prop('checked'))
    //  .trigger('change');
    //this.isChecked(!this.isChecked());  // this - is your view model
 }
};

这里是更新版本:

function InfrastructureUpdatesCheckbox(){

  var $cb = $(':checkbox');
  var cb = $cb[0];
  cb.checked = !cb.checked;  // manually change checked status
  $cb.triggerHandler('click');  // run all event handlers bound to 'click' event
}

我想这个问题是关系到中只有复选框(单选按钮)。 当你手动触发事件的其他控件应正确behaive。



Answer 4:

你可能已经找到了解决您的问题,但是这可能帮助别人。

我有完全相同的问题。 我所做的是使用发布 - 订阅模式,并有我的组件触发其自身的变化事件。 什么,那么你可以做的是有一个需要更新模型订阅该事件,然后更新您的模型中的基础设施组件的实例。 更妙的是你的模型可以订阅事件,这样你的模型所知道的基础设施组件,而不是周围的其他方法

这样,你的基础架构组件并不需要了解KO,你可以在其他地方重复使用它。 我相信你找到它的其他用途之前,如果你打算重新使用该组件,这只是一个时间问题。

希望这有助于(抱歉,没有代码,我不能张贴SO客户代码,但如果有人想一个例子,是这么说,我会做的jsfiddle来说明。



Answer 5:

在我的情况下,这竟然是关系到一个jQuery错误。 我走上淘汰赛GitHub的问题跟踪器,跟踪下来; 在这里看到 。

最后,我结束了在我的组件这样做:

var isjQueryOld = /^(0|1)\.[0-8]\./.test($.fn.jquery); // <=1.8.*
var toggleCheckbox = isjQueryOld ? jQueryOldToggleCheckbox : function($el) { $el.trigger('click') } //https://github.com/knockout/knockout/issues/987


function jQueryOldToggleCheckbox($el) {
    //This should be simple right? See http://stackoverflow.com/a/8595601/5056
    //and "simulating events to adjust knockout models" jasmine spec
    //all this is nessessary to get everything working with knockout
    var changeTo = !$el.prop('checked');
    if(changeTo)
        $el.attr('checked', true);
    else
        $el.removeAttr('checked');
    $el.trigger('click');
    $el.prop('checked', changeTo);
}

而在我的代码

        toggleCheckbox($el);


Answer 6:

我不知道是什么事件淘汰赛被监听,你也许可以涉水到源本身看着办吧,但一个解决办法是使用自定义绑定 。 在init自定义绑定,您可以设置你想要的,你想捕捉(如任何事件处理程序的任何changed ),并用它来强迫你绑定运行update



Answer 7:

我已经花时间今天落入上点击循环使用检查和点击的方式,试图ko.observable,pureComputed写甚至infrastructureUpdatesCheckbox没有成功太多时间去解释给任何人谁支付我的工作,为什么我不能检查在这个该死的淘汰赛单选按钮。 不幸的是我的上下文(Magento的2结账与购买插件)并没有让我实现有效的视图模型,所以最后我已经成功地解决简单的黑客问题添加第二个输入类型=“无线电”,并显示在点击:

selectRadioPayment: function (obj, event, method) {
        this.selectPaymentMethod(obj, event, method);
        $('.ko-payment-selector').show();
        $('#p_method_' + method).hide();
        $('#p_method_' + method).closest('.radio-payment-selector').show();
    },

    renderedPaymentMethods: function() {
        if(quote.paymentMethod) {
            var selectedMethod = quote.paymentMethod().method;
            $('#p_method_' + selectedMethod).hide();
            $('#p_method_' + selectedMethod).closest('.radio-payment-selector').show();
        }
    },

    <input class="radio-payment-selector" type="radio" class="hidden" checked />
    <input class="ko-payment-selector" type="radio" name="payment[method]" class="radio" event: {change: function(data, event){$parent.selectRadioPayment(data, event, $data.method)}}"/>

我希望这会帮助别人一天。



文章来源: Knockout.Js doesn't detect programmatically changed checkbox state