Comment utiliser des liaisons personnalisées?
-
14-10-2019 - |
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.log
ging 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?
La solution
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