Désactiver le bouton radio avec knockout.js

Question

Comment désactiver un bouton radio avec knockout.js? Je ne veux pas que l'utilisateur puisse le sélectionner. Mon modèle ci-dessous ne fonctionne pas.

<div id="answers" data-bind="template: { name: 'answerTmpl', data: interactive.answers }"> 
    </div> 

    <script id="answerTmpl" type="text/html"> 

     {{each(index, value) $data}} 
     <div> 
      <input type="radio" value="${index}" name="Answer" data-bind="disable: app.viewModel.avatars.speaking, checked: app.viewModel.interactive.answerSelected"/> <span>${value}</span> 
     </div> 
     {{/each}} 
    </script> 

app.avatars.js

(function (app, $, undefined) { 

    app.viewModel = app.viewModel || {}; 

    app.viewModel.avatars = { 
     speaking: ko.observable(false), 
     loaded: ko.observable(false) 
    }; 

app.interactive.js

(function (app, $, undefined) { 

    app.viewModel = app.viewModel || {}; 

    app.viewModel.interactive = { 
     timeout: 1500, 
     answers: ko.observableArray(), 
     answerSelected: ko.observable(''), 
     correctAnswer: ko.observable(-1), 
     bookPage: ko.observable(1), 
     chapterEmail: ko.observable(''), 
     trialogue: { 
      inProgress: ko.observable(false), 
      response: ko.observable(''), 
      conversation: ko.observableArray() 
     } 
    }; 

    app.interactive.init = function() { 
     ko.applyBindings(app.viewModel); 
    }; 

Answer 1

Lorsque vous utilisez des variables globales au lieu de données liées, il semble que vous devez évaluer explicitement les fonctions: http://jsfiddle.net/nFgnj/

<input type="radio" value="${index}" name="Answer" 
    data-bind="disable:app.viewModel.avatars.speaking(), 
       checked:app.viewModel.interactive.answerSelected()" /> 

Je n'aime pas vraiment cette solution, car elle dépend de app étant une variable globale.