web-dev-qa-db-fra.com

Dissocier le modèle de vue de la vue à élimination directe

Je suis à la recherche de fonctionnalités non liées dans KO. Malheureusement, googler et parcourir les questions posées ici ne m'a pas donné d'informations utiles sur le sujet.

Je vais fournir un exemple pour illustrer le type de fonctionnalité requis.

Disons que j'ai un formulaire avec plusieurs entrées. J'ai également un modèle de vue lié à ce formulaire. Pour une raison quelconque, en tant que réaction à l'action de l'utilisateur, j'ai besoin de dissocier mon modèle de vue du formulaire, c'est-à-dire que l'action est effectuée, je veux que tous mes observables cessent de réagir aux changements des valeurs correspondantes et vice versa - tout changement apporté aux observables ne devrait pas '' t affecter les valeurs des entrées.

Quelle est la meilleure façon d'y parvenir?

formsmvvmknockout.jsunbind
38
ILya

Vous pouvez utiliser ko.cleanNode pour supprimer les fixations. Vous pouvez l'appliquer à des éléments DOM spécifiques ou à des conteneurs DOM de niveau supérieur (par exemple, l'ensemble du formulaire).

Voir http://jsfiddle.net/KRyXR/157/ pour un exemple.

48
Mark Robinson

La réponse de @Mark Robinson est correcte.

Néanmoins, en utilisant la réponse de Mark, j'ai fait ce qui suit, que vous pourriez trouver utile.

  // get the DOM element
  var element = $('div.searchRestults')[0];
  //call clean node, kind of unbind
  ko.cleanNode(element);
  //apply the binding again
  ko.applyBindings(searchResultViewModel, element);
15
aamir sajjad
<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.debug.js"></script>
        <script type="text/javascript" src="clickHandler.js"></script>
    </head>
    <body>
        <div class="modelBody">
            <div class = 'modelData'>
                <span class="nameField" data-bind="text: name"></span>
                <span class="idField" data-bind="text: id"></span>
                <span class="lengthField" data-bind="text: length"></span>
            </div>
            <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button>
            <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button>
            <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button>
        </div>
    </body>
</html>

@Mark Robinson a donné une solution parfaite, j'ai un problème similaire avec un seul élément dom et la mise à jour de différents modèles de vue sur cet élément dom unique.

Chaque modèle de vue a un événement de clic, lorsque le clic s'est produit à chaque fois que la méthode de clic de chaque modèle de vue est appelée, ce qui a entraîné l'exécution de blocs de code inutiles pendant l'événement de clic.

J'ai suivi l'approche @Mark Robinson pour nettoyer le Node avant d'appliquer mes liaisons réelles, cela a vraiment bien fonctionné. Merci Robin. Mon exemple de code se présente comme suit.

function viewModel(name, id, length){
                var self = this;
                self.name = name;
                self.id = id;
                self.length = length;
        }
        viewModel.prototype = {
                showModelData: function(data){
                console.log('selected model is ' + data);
                if(data=='model1'){
                        ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel1, button1[0]);
                        console.log(viewModel1);
                }
                else if(data=='model2'){
                ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel3, button1[0]);
                        console.log(viewModel2);
                }
                else if(data=='model3'){
                ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel3, button1[0]);
                        console.log(viewModel3);
                }
        } 
        }
        $(document).ready(function(){
                button1 = $(".modelBody");
                viewModel1 = new viewModel('TextField', '111', 32);
                viewModel2 = new viewModel('FloatField', '222', 64);
                viewModel3 = new viewModel('LongIntField', '333', 108);
                ko.applyBindings(viewModel1, button1[0]);
        });
1
Raju Putchala