Question

我有一个复选框：

<div class="panel panel-default" style="margin-right:10px;">
<div class="panel-heading">
    <span class="glyphicon glyphicon-cog"> Configurações Abreviar</span>
</div>
<div class="panel-body">
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Nome</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">                    
                <input type="checkbox" data-bind="checked: AbreviaNome" id="AbreviaNome">
                <input type="checkbox" data-bind="checked: AbreviaFantasia" id="AbreviaFantasia">
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Endereço</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">
                <input type="checkbox" data-bind="checked: AbreviaLogradouro" id="AbreviaLogradouro">
                <input type="checkbox" data-bind="checked: AbreviaComplemento" name="type" id="AbreviaComplemento">                    
                <input type="checkbox" data-bind="checked: AbreviaBairro" id="AbreviaBairro">
                <input type="checkbox" data-bind="checked: AbreviaCidade" id="AbreviaCidade">
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Extra</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">                                                
                <input type="checkbox" data-bind="checked: AbreviaExtra" id="AbreviaExtra">
            </div>
        </div>
    </div>
</div>

以下ViewModel：

function JobDetailsViewModel() {
    var self = this;
    var baseUri = '/Api/Pedidos/';

    self.AbreviaNome = ko.observable(false);
    self.AbreviaFantasia = ko.observable(false);
    self.AbreviaLogradouro = ko.observable(false);
    self.AbreviaComplemento = ko.observable(false);
    self.AbreviaBairro = ko.observable(false);
    self.AbreviaCidade = ko.observable(true);
    self.AbreviaExtra = ko.observable(true);

    var updatableData = {            
        AbreviaNome: self.AbreviaNome,
        AbreviaFantasia: self.AbreviaFantasia,
        AbreviaLogradouro: self.AbreviaLogradouro,
        AbreviaComplemento: self.AbreviaComplemento,
        AbreviaBairro: self.AbreviaBairro,
        AbreviaCidade: self.AbreviaCidade,
        AbreviaExtra: self.AbreviaExtra
    };

    self.update = function (formElement) {                
        alert('BOOM');
        $.ajax({
            type: "PUT",
            url: baseUri,
            data: ko.toJSON(updatableData),
            dataType: "json",
            contentType: "application/json"
        })
            .done(function (data) {


            })
            .error(function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
                alert("fail");
            });

    };
}

$(document).ready(function () {            
    var viewModel = new JobDetailsViewModel();       


    ko.applyBindings(viewModel);            
    viewModel.AbreviaNome.subscribe(function (newValue) {
        alert(newValue);
        viewModel.update();
    });
});

它似乎工作正常，订阅工作，值正在更新，并且正在发送PUT resquest，并且没有控制台错误。但是当我单击它时，复选框UI不会更改其状态以反映模型。我在面板中添加的任何复选框都不起作用，它们具有相同的行为，即使它们未绑定到视图模型也是如此。

<input type="checkbox" name="type">

我的代码有什么问题，我应该做一个数组或类似的东西，为什么我只能使用简单的属性并将它们绑定到我想要的地方？

我摆弄了格式化的代码：JSFIDDLE

Answer 1

这与Knockout无关。它是由Bootstrap引起的。当您包含data-toggle="buttons"时，Bootstrap会拦截click事件以更新Bootstrap按钮。但是你实际上没有任何按钮，这会导致事件被取消。

最简单的解决方法就是删除data-toggle="buttons"，因为我已完成示例中的最后一个复选框：http://jsfiddle.net/mbest/RK96d/2/

参考：http://getbootstrap.com/javascript/#buttons

Answer 2

根据所有HTML规范，复选框的name和value属性是必需的。有些浏览器可能会在未提供时出现奇怪的行为。

Knockout Checkbox在单击时不会更新UI，但会更新viewModel

2 个答案: