उपयोग ट्विटर बूटस्ट्रैप बटन समूह रेडियो के रूप में नॉकआउट बाइंडिंग के साथ

Question

यह काम कर रहा है का चयन करें:

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 
} 

जैसी उम्मीद थी, जब आप "रेडियो" प्राथमिकता देखने योग्य मूल्य परिवर्तन में दूसरे रेडियो का चयन करते हैं। हालांकि, मैं एक रेडियो बूटस्ट्रैप बटन समूह को रेडियो के रूप में उपयोग करना चाहता हूं। यहाँ एचटीएमएल मेरे पास है, लेकिन यह मानने योग्य अपेक्षा के अनुरूप नहीं बदलता है:

<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> 

अद्यतन मैं एक jsfiddle यहाँ जा रहा है: http://jsfiddle.net/a8wa8/6/ "priority1" मानक रेडियो चयन और "priority2" है बूटस्ट्रैप बटन।

Answer 1

समस्या यह है कि आप Checked का उपयोग कर रहे बटन के साथ बाध्यकारी हैं, इसके बजाय आप क्लिक बाइंडिंग का उपयोग कर सकते हैं।

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

अपडेट किया गया::

हाँ आप ko css binding का उपयोग करके इस लक्ष्य को हासिल कर सकते हैं इस बेला की जाँच करें। इस अद्यतन बेला की जाँच करें:

Updated Fiddle

Answer 2

checked binding केवल चेकबॉक्स (<input type='checkbox'>) या एक रेडियो बटन (<input type='radio'>) जैसे "चेक करने योग्य" नियंत्रणों के साथ काम करता है।

लेकिन आपके पास अपने दूसरे उदाहरण में button है जहां बूटस्ट्रैप बस रेडियो बटन समूह के रूप को अनुकरण करता है ताकि checked बाइंडिंग काम न करे।

हालांकि आप click binding उपयोग कर सकते हैं, जहां आप अपनी नमूदार को मान पास:

<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> 

और तुम बंधन एक कस्टम के पीछे यह छिपा सकते हैं:

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); 
    }, 
} 

तो फिर तुम इसे पसंद का उपयोग कर सकते हैं:

<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> 

डेमो JSFiddle.