Làm cách nào để hiển thị một mảng dưới dạng danh sách các nút radio?

Question

Tôi muốn lặp qua một mảng mà tôi xác định trong Javascript của tôi và hiển thị danh sách các nút radio. Mã của tôi mà không hiện đang làm việc, và nó là như sau (cũng trên jsfiddle):

<div data-bind="foreach: options" > 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="checked: selected" /> 
     <span data-bind="text: label"></span> 
    </div>  
</div> 

var optionsList = [ 
    {"value": "a","label": "apple"}, 
    {"value": "b","label": "banana"}, 
    {"value": "c","label": "carrot"} 
]; 
function viewModel() { 
    var self = this; 
    self.options = optionsList; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
} 
ko.applyBindings(new viewModel()); 

Nếu mảng của tôi là một phần của html sau đó nó hoạt động tốt, xem này (hoặc jsfiddle):

<div> 
    <input type="radio" name="optionsGroup" value="a" data-bind="checked: selected"  />Apple 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="b" data-bind="checked: selected" />Banana 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="c" data-bind="checked: selected" />Carrot 
</div> 
<div data-bind="text: selected"> 
</div> 

function viewModel() { 
    var self = this; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
}  
ko.applyBindings(new viewModel()); 

tôi để làm việc này bằng cách tạo ra các tất cả các html trong javascript của tôi và có điều này sử dụng làm việc hộp kiểm tra, nhưng đang bối rối tạo ra một nhóm các radiobutton sử dụng iterato foreach r.

Có ai có ví dụ như người đầu tiên làm việc của tôi không?

Answer 1

Mã của bạn được đưa ra lỗi này:

Message: ReferenceError: selected is not defined;

Bindings value: checked: selected

Bạn định nghĩa selected vào mức độ quan điểm mô hình, nhưng bạn đang tham chiếu nó bên foreach nên Knockout.js đang tìm kiếm nó trên cấp độ tùy chọn.

Thay đổi:

<div><input type="radio" name="optionsGroup" data-bind="checked: selected" /> 

tới:

<div><input type="radio" name="optionsGroup" data-bind="checked: $root.selected" /> 

$root.selected sẽ tìm kiếm selected tài sản trên mức điểm mô hình.

HERE là mã được sửa đổi.

Để biết thêm thông tin về các biến giả (như $root), hãy xem 3. Access to parent binding contexts.

Answer 2

Đây là một cách để thực hiện việc này. Lưu ý rằng ràng buộc attr phải đến trước ràng buộc checked.

var optionsList = [ 
 
    {"value": "a", "label": "apple"}, 
 
    {"value": "b", "label": "banana"}, 
 
    {"value": "c", "label": "carrot"} 
 
]; 
 

 
function viewModel() { 
 
    this.options = optionsList; 
 
    this.selected = ko.observable("a"); 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<h3>Fruits</h3> 
 
<div data-bind="foreach: options" > 
 
    <label> 
 
    <input type="radio" 
 
      name="optionsGroup" 
 
      data-bind="attr: {value: value}, checked: $root.selected" /> 
 
    <span data-bind="text: label"></span> 
 
    </label>  
 
</div> 
 

 
<h3>Selected value:</h3> 
 
<pre data-bind="text: ko.toJSON($root.selected)"></pre>

Answer 3

Bạn đang hoạt động. Chỉ cần bao gồm knockout.js trong jsfiddle của bạn và thiết lập tài liệu "onDomready": http://screencast.com/t/DmTSgCoEUsxC

Answer 4

Để có thể có toàn bộ đối tượng nó tốt hơn để sử dụng CheckedValue thay vì attr: {value} như thế:

Fruits 
<div data-bind="foreach: options" > 
    <div><input type="radio" name="optionsGroup" data-bind="checkedValue: $data, checked: $root.selected" /> 
    <span data-bind="text: label"></span></div>  
</div>