liaison knockout ne fonctionne pas pour activer le bouton après ko.applyBindings dans bootstrap modal

Question

J'essaie d'activer un bouton après avoir coché une case, les éléments sont dans un modal. J'utilise MVC, et je suis d'ajouter les observables après la principale liaison pour les utiliser juste avec le modal comme ce

<script type="text/javascript"> 
    var Model = function() { 
     self.check = ko.observable(false); 
    }; 

    $(document).ready(function() { 
     ko.cleanNode($('#Modal')[0]); 
     ko.applyBindings(Model, $('#Modal')[0]); 
    }); 

</script> 

Les éléments HTML à l'intérieur du regard modal comme celui-ci:

<input type="checkbox" data-bind="checked:viewModel.check">bla bla.. 
<button type="button" data-bind="enable:viewModel.check==true" class="btn btn-primary">Delete</button> 

lorsque je sélectionne la case à cocher, la propriété viewModel.check est vraie et quand elle n'est pas cochée, elle est fausse, mais le bouton est toujours désactivé. Tout conseil s'il vous plaît

Answer 1

Plusieurs questions ...

Un-instancié ViewModel

Lorsque vous appelez ko.applyBindings, le premier argument doit être un viewmodel exemple. Cela signifie que vous devez appeler new sur votre "classe" ViewModel.

ko.applyBindings(new Model()) 

champ incorrect dans HTML

Vous faites référence à une variable viewModel qui n'existe pas. Lorsque vous appliquez des liaisons, elle utilise la portée de viewModel transmise pour créer le contexte de liaison. Cela signifie que les valeurs disponibles dans le HTML sont les mêmes que sur this dans votre ViewModel. Donc, il suffit d'utiliser check.

enable liaison lié à l'expression, non observable

La fixation doit être activé lié à un observable, mais vous avez lié à l'expression check==true. Dans ce cas, check est réellement un observable - this.check = ko.observable(), donc ce que vous êtes en train de comparer est quelque chose à l'effet de function() { return true } == true, qui est attendu false. Pour effectuer des comparaisons sur des observables, vous devez d'abord les déplier en les appelant en tant que fonction: check() == true. Notez, cependant, que chaque fois que vous écrivez == true, vous n'avez probablement pas besoin de: enable: check est ce que vous voulez en fin de compte.

and a fiddle