Comment utiliser des liaisons personnalisées?

Question

J'ai un grand viewmodel, et je voudrais poster la mise à jour d'un statut ( « lire » / « non lu ») au serveur sans affichage l'ensemble du modèle.

Qu'est-ce que je l'ai fait est de créer une liaison personnalisée comme ceci:

ko.bindingHandlers.statusUpdater = {
    update: function(element, valueAccessor) {
        console.log(element);
    }
};

Dans le modèle:

<div data-bind='template: { name: "contactsListTemplate", data: viewModel.conversations.conversationlist }'> </div>

<script type="text/html" id="contactsListTemplate">
 <table>
  <tbody>
   {{each(i, conversation) $data}}
    <tr>
     <td>
      <input type="checkbox" data-bind="checked: read, statusUpdater: conversation_id" />
     </td>
    </tr>
   {{/each}}
  </tbody>
 </table>
</script>

Pour la liaison personnalisée, je suis seulement intéressé les mises à jour, ce que je pensais que cela me permettrait de faire est de détecter une mise à jour KnockoutJS et déterminer quel élément a été mis à jour pour que je puisse saisir cet ID articles et nouvelles statistiques, puis poster que sur le serveur.

Qu'est-ce qui se passe est le CustomBinding est console.logging chaque case à cocher sur une seule modification de case à cocher. Cela signifie que je changerais une case à cocher et les 3 cases se connectent à la console via le ko.bindingHandlers.statusUpdater.

Je pensais que sur l'ajout d'un événement de clic pour les données de liaison, mais cela ne semble pas aussi propre comme liant sur mesure. Peut-être ce que je suis en train de faire avec des liaisons personnalisées ne sont pas ce qu'ils sont pour?

Pensées?

Answer 1

La raison pour laquelle le fait que parce que la méthode de mise à jour est appelée à chaque moment où la valeur du modèle est mis à jour et au début après la méthode d'initialisation est appelée.

La mise à jour la méthode de liaison est pour vous de définir l'état de l'élément lié dom lorsque les changements de ViewModel.

Si vous souhaitez réagir à un changement et mettre à jour le viewmodel vous aurez besoin de mettre en œuvre la méthode d'initialisation et joindre un événement (clic, changer, etc.) Dans ce gestionnaire, vous pouvez ensuite envoyer la mise à jour de statut à votre viewmodel.

ko.bindingHandlers.statusUpdater = {
    'init': function (element, valueAccessor, allBindingsAccessor) {

        var updateHandler = function() {            
            var valueToWrite;
            if (element.type == "checkbox") {
                valueToWrite = element.checked;
            } else if ((element.type == "radio") && (element.checked)) {
                valueToWrite = element.value;
            } else {
                return; // "checked" binding only responds to checkboxes and selected radio buttons
            }

            var modelValue = valueAccessor();

            if (ko.isWriteableObservable(modelValue)) {             
                if (modelValue() !== valueToWrite) { // Suppress repeated events when there's nothing new to notify (some browsers raise them)
                    $.ajax({
                      url: 'someurl',
                      success: function(data) {
                            alert('status update');
                      }
                    });
                    modelValue(valueToWrite);
                }
            } else {
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['checked']) {
                    allBindings['_ko_property_writers']['checked'](valueToWrite);
                }
            }
        };

        $(element).click(updateHandler).change(updateHandler);
    },
    'update': function (element, valueAccessor) {
        ko.bindingHandlers.checked(element, valueAccessor);
    }
};

La meilleure façon d'apprendre ce Trouvé je devais regarder la version de débogage de KO sur git. Qu'est-ce que vous voulez atteindre est essentiellement une version modifiée vérifié la liaison avec un appel ajax.

Je n'ai pas testé ci-dessus, mais il devrait vous aider à démarrer.

Cheers,

Ian