如何在選中/單擊單選按鈕時更新KO對象的屬性？

Question

我已經閱讀了關於knockoutjs的文檔，我明白，單選按鈕使用檢查綁定。這對我來說的問題是綁定工作的方式不適合我的場景。在他們的例子中，一個單選按鈕被分配一個值，當選擇單選按鈕時，它將驗證單選按鈕的值與ko.computed函數中的值，以確定檢查哪個單選按鈕。然而，在我的下面的例子中，我有一個單行按鈕的單選按鈕。

我需要屬性「IsPrimary」更新爲true時，他們選擇一個單選按鈕的行...單選按鈕的名稱是相同的，防止多個選擇。我已經能夠獲取屬性更新爲KO，但它不會更新我的mvc模型中的屬性，也不會檢查單選按鈕以顯示它被選中。

<table data-bind="foreach: details"> 
      <tr> 
       <td> 
        <div> 
         <input data-bind="value: StandardAccountNo, attr: {name: 'NewAccountGroupDetails[' + $index() + '].StandardAccountNo'}" /> 
        </div> 
       </td> 
       <td> 
        <div class="radiobutton"> 
         <input type="radio" data-bind="click: $parent.markPrimary, attr: {value: $index()}" name="primary" /> 
        </div> 
       </td> 
       <td> 
        <a href="#" data-bind="click: $parent.removeDetail">Remove</a> 
       </td> 
      <tr> 
</table> 

<button data-bind="click: addDetail">New</button> 

敲除

var Detail = function() { 
    this.StandardAccountNo = ko.observable(new Date()); 
    this.IsPrimary = ko.observable(false); 
    this.EffectiveDate = ko.observable(formattedDate(new Date())); 
    this.EndDate = ko.observable(formattedDate(new Date())); 
}; 

function ViewModel() { 
    var self = this; 
    var rawList = '@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.NewAccountGroupDetails))'; 
    self.details = ko.observableArray(convertJSONToKoObservableObject($.parseJSON(rawList))); 
    self.details.push(new Detail()); 

    self.addDetail = function() { 
     self.details.push(new Detail()); 

     $('.datepicker').each(function (i, obj) { 
      $(obj).datepicker({ changeYear: true, changeMonth: true }); 
     }); 
    } 

    self.markPrimary = function() { 
     console.log(this); 
     this.IsPrimary(true); 
     $('.radiobutton').each(function (i, obj) { 
      console.log(obj); 
     }); 
    } 

    self.removeDetail = function() { 
     self.details.remove(this); 
    } 
} 

ko.applyBindings(new ViewModel()); 

注：console.logs輸出KO對象，表示所選擇的行和其工作原理。下一個只是輸出每一行上有一個單選按鈕，它的工作原理。我試圖用這個來確定如何標記頁面上的單選按鈕，並確保我的mvc模型上的屬性得到更新，以便回發。

Answer 1

試試這個：

self.markPrimary = function (currentDetail) { 
     ko.utils.arrayForEach(self.details(), function (detail) { 
      detail.IsPrimary(false); 
     }); 
     currentDetail.IsPrimary(true); 
     return true; 
} 

Answer 2

我認爲你從視asp.net mvc的點接近這個有點過分。嘗試首先隔離客戶端的問題，然後序列化模型，然後處理您的服務器。

至於淘汰賽而言，這將是如何做你想要什麼：http://jsfiddle.net/z1b3mh89/

// items have names and a computed function that knows whether 
// this item is primary among other items 
function Item(name, primaryObservable) { 
    this.name = name; 
    this.isPrimary = ko.computed(function(){ 
     return this.name === primaryObservable(); 
    }, this); 
} 

(function(){ 
    var i = 0; 
    var viewModel = { 
     primaryItemName: ko.observable(), 
     items: ko.observableArray(), 
     add: function (a,b,c) { 
      this.items.push(new Item(i++ + ' choice', this.primaryItemName)); 
     } 
    }; 

    // add a few items 
    viewModel.add(); 
    viewModel.add(); 
    viewModel.add(); 

    // add a computed that renders a textual representation of the model 
    // just to see the changes live (this is only for DEBUG) 
    viewModel.log = ko.computed(function() { 
     return this.items().map(function (item) { 
      return item.name + (item.isPrimary() ? ' [primary]' : ''); 
     }).join(', '); 
    }, viewModel); 

    ko.applyBindings(viewModel); 
})(); 

和你的HTML很簡單：

<!-- ko foreach: items --> 
<label> 
    <input type="radio" name="group1" data-bind="checked: $parent.primaryItemName, value: name"/> 
    <span data-bind="text: name"/> 
</label> 
<!-- /ko --> 

<h3>The Items in the view model:</h3> 
<p data-bind="text: log"></p> 

<button data-bind="click: add">Add Item</button> 

一旦你得到那個工作，您的視圖模型應始終處於良好狀態。你可以擔心序列化併發送給mvc。