L'utilisation de Twitter Bootstrap groupe de boutons radio sélectionnez avec knock-out liaisons

Cela fonctionne:

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
}

Comme prévu, lorsque vous sélectionnez la deuxième radio la priorité observables changement de valeur du "besoin". Cependant, je voudrais utiliser Twitter Bootstrap groupe de boutons radio. Voici le code HTML que j'ai, mais il ne change pas observables comme prévu:

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

mise à jour j'ai un jsfiddle allant ici: http://jsfiddle.net/a8wa8/6/ "priorité1" est le standard de la radio sélectionne et "priority2" est le bootstrap boutons.

OriginalL'auteur Scott Beeson | 2013-04-03

  1. 9

    Le problème est que vous utilisez Checked liaison avec le bouton qui n'est pas autorisé, au lieu de cela, vous pouvez utiliser le clic de la liaison. vérifiez ce violon:

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

    Mise à jour:

    Oui, vous pouvez y parvenir en utilisant ko css binding. Cochez cette mise à jour de violon:

    mise à Jour de Violon

    Cela fonctionne bien sauf que lorsque je modifie le modèle, il n'a pas de mise à jour de la vue. c'est à dire, réglage priority2 ("vouloir"), de façon pragmatique, ne permet pas de sélectionner le bouton approprié. Est-ce facilement réalisable?
    veuillez vérifier mes mises à jour de réponse et laissez-moi savoir est-ce que vous souhaitez ?
    Parfait! Merci
    vous êtes les bienvenus 🙂
    Est-il possible de déplacer le data-bind attribut du contenu d'un fichier js? Si possible, comment serait-il chercher?

    OriginalL'auteur Gaurav

  2. 6

    La vérifié liaison ne fonctionne qu'avec des "checkable" contrôles comme les case (<input type='checkbox'>) ou un bouton radio (<input type='radio'>).

    Mais vous avez button dans votre deuxième exemple où le bootstrap juste émule l'apparence du groupe de boutons radio, de sorte que le checked de liaison ne fonctionne pas.

    Cependant, vous pouvez utiliser le cliquez de liaison où vous passez la valeur à votre observables:

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

    Et vous pouvez vous cacher derrière une liaison personnalisée:

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

    Alors vous pouvez l'utiliser comme:

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

    Démo JSFiddle.

    Cela fonctionne aussi, mais c'est beaucoup plus complexe que gaurav réponse, mais il a le même problème. Ce n'est pas une liaison bidirectionnelle. Si j'ai mis en priorité ("désir") et priority2 ("vouloir"), vous verrez que la radio est automatiquement sélectionné, mais le bootstrap bouton n'est pas.
    Si vous aussi vous voulez avoir la double liaison, alors vous devez combiner les click avec le css de liaison. Mon valueClick personnalisé bindinghandler peut être étendu pour gérer ce cas également. À première vue, il peut sembler compliqué, mais il est beaucoup plus facile à gérer solution. Parce que, dans votre réponse, vous devez répéter "vouloir" et "besoin" 3 fois et "priority2" 2 fois sur les boutons. À l'autre côté avec une liaison personnalisée, vous devez écrire tout à la fois.
    Duuuuude vos solutions est parfait pour ce dont j'ai besoin. Merci, je vais avoir besoin d'étendre valueClick'une fonctionnalité permettant de gérer la liaison bidirectionnelle, comme vous l'avez dit, mais jusqu'à présent, c'est parfait.
    Votre exemple m'a aidé de deux façons; il a résolu le même groupe de boutons problème et m'a montré que je n'ai pas besoin d'un 'toggle' fonction sur le modèle de vue. Parce que les phénomènes observables sont les fonctions que vous pouvez tout simplement passer à une nouvelle valeur dans la liaison cliquez sur l'événement. Des acclamations.

    OriginalL'auteur nemesv