Sử dụng Twitter Bootstrap nút nhóm như đài phát thanh chọn với bindings loại trực tiếp

Question

này đang làm việc:

view.html

<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div> 
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need" style="margin-top: -3px; margin-right: 3px;"/>I need to</div> 

controller.js

function feedbackViewModel() { 
    var self = this; 
    self.priority = ko.observable("want"); 
    //lots of other stuff 
} 

Đúng như dự đoán, khi bạn chọn radio thứ hai giá trị quan sát ưu tiên thay đổi thành "cần". Tuy nhiên, tôi muốn sử dụng nhóm nút Twitter Bootstrap làm đài. Dưới đây là HTML tôi có, nhưng nó không làm thay đổi quan sát được như mong đợi:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button> 
    <button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button> 
</span> 

cập nhật Tôi có một jsfiddle sẽ ở đây: http://jsfiddle.net/a8wa8/6/ "priority1" là sẽ chọn đài phát thanh chuẩn và "priority2" là bootstrap nút.

Answer 1

Vấn đề là bạn đang sử dụng Checked ràng buộc với nút không được phép, thay vào đó bạn có thể sử dụng liên kết nhấp chuột. kiểm tra fiddle này:

http://jsfiddle.net/a8wa8/7/

Cập nhật:

Có bạn có thể đạt được điều này bằng cách sử dụng ko css binding. Kiểm tra fiddle cập nhật này:

Updated Fiddle

Answer 2

checked binding chỉ hoạt động với các điều khiển "có thể kiểm tra" như hộp kiểm (<input type='checkbox'>) hoặc nút radio (<input type='radio'>).

Nhưng bạn có button trong ví dụ thứ hai của bạn trong đó bootstrap chỉ mô phỏng giao diện của nhóm nút radio để liên kết checked không hoạt động.

Tuy nhiên bạn có thể sử dụng click binding nơi bạn vượt qua giá trị quan sát của bạn:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="click: function() { priority2('want') }" 
      type="button" class="btn" value="want">I want to</button> 
    <button data-bind="click: function() { priority2('need') }" 
      type="button" class="btn" value="need">I need to</button>  
</span> 

Và bạn có thể ẩn này đằng sau một tùy chỉnh ràng buộc:

ko.bindingHandlers.valueClick = { 
    init: function(element, valueAccessor, allBindingsAccessor, 
        viewModel, bindingContext) {  
     var value = valueAccessor(); 
     var newValueAccessor = function() { 
      return function() { 
       value(element.value); 
      }; 
     }; 
     ko.bindingHandlers.click.init(element, newValueAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    }, 
} 

Sau đó, bạn có thể sử dụng nó như:

<span class="btn-group" data-toggle="buttons-radio"> 
    <button data-bind="valueClick: priority2" 
      type="button" class="btn" value="want">I want to</button> 
    <button data-bind="valueClick: priority2" 
      type="button" class="btn" value="need">I need to</button>  
</span> 

Demo JSFiddle.