-1
我有一組複選框：淘汰賽複選框不更新用戶界面，但視圖模型更新
<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>
而下面的視圖模型：
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
這是相當多的代碼，你可以編輯你的問題的任何機會並修剪它（也許重新格式化以便於閱讀），所以我們可以關注*相關*位？ – Jeroen
我已經從viewModel中刪除了不相關的方法，其餘的我不確定它的相關與否，因爲對我來說這是非常奇怪的行爲。 – Oakcool
我只能看到'checkbox'中的'name ='type''。給一些其他的名字，並嘗試它。 –