淘汰賽複選框不更新用戶界面，但視圖模型更新

-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

來源

2014-01-27 Oakcool

這是相當多的代碼，你可以編輯你的問題的任何機會並修剪它（也許重新格式化以便於閱讀），所以我們可以關注*相關*位？ – Jeroen

我已經從viewModel中刪除了不相關的方法，其餘的我不確定它的相關與否，因爲對我來說這是非常奇怪的行爲。 – Oakcool

我只能看到'checkbox'中的'name ='type''。給一些其他的名字，並嘗試它。 –

這與Knockout無關。它是由Bootstrap引起的。當您包含data-toggle="buttons"時，Bootstrap會攔截click事件以更新Bootstrap按鈕。但是你實際上沒有任何按鈕，這會導致事件被取消。

最簡單的解決方法是隻刪除data-toggle="buttons"，因爲我已經在你的例子做最後的複選框：http://jsfiddle.net/mbest/RK96d/2/

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

來源

2014-01-27 23:17:56

這樣做，非常感謝。 – Oakcool

我確實已將按鈕分組並存在，因爲我認爲這是導致問題的原因，但並不認爲這是完全正確的。 – Oakcool

如果您想嘗試使用引導按鈕，以下是可能有所幫助的綁定：http://stackoverflow.com/a/20080917/1287183 –

根據所有的HTML規範，都需要複選框的name和value屬性。有些瀏覽器在未提供時可能會出現奇怪的行爲。

來源

2014-01-27 22:37:02 ebohlman

淘汰賽複選框不更新用戶界面，但視圖模型更新

回答

相關問題