8

これは機能しています：

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
}

予想どおり、2 番目のラジオを選択すると、優先オブザーバブルの値が「必要」に変わります。ただし、Twitter Bootstrap ボタン グループをラジオとして使用したいと考えています。ここに私が持っているHTMLがありますが、期待どおりに観察可能なものを変更しません:

<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」はブートストラップ ボタンです。

4

2 に答える 2

6

チェック済みバインディングは、チェックボックス ( <input type='checkbox'>) やラジオ ボタン ( ) などの「チェック可能な」コントロールでのみ機能します<input type='radio'>。

しかしbutton、ブートストラップがラジオボタングループの外観をエミュレートするだけなので、checkedバインディングが機能しない2番目の例があります。

ただし、オブザーバブルに値を渡すclickバインディングを使用できます。

<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 のデモ。

于 2013-04-03T16:12:53.740 に答える