Knock-out case événement de changement envoie l'ancienne valeur

Je vais avoir un problème avec knock-out "checked" de liaison. Il semble que l'événement "change" à la case de retour de l'ancienne valeur, avant qu'il soit mis à jour(si elle a été désactivée, elle renvoie false). Je ne pense pas que je peux vous abonner à la valeur puisque je l'ai à l'intérieur de l'objet.

<tbody data-bind="foreach: Categories">
                <tr>
                    <td><input type="checkbox" data-bind="checked: ShowOpened, event: { change: $root.CategoryChange }" /></td>
                </tr>
            </tbody>
<script type="text/javascript">
var Category = function (Id, Name, Order, ShowOpened) {
    this.Id = Id;
    this.Name = Name;
    this.Order = Order;
    this.ShowOpened = ShowOpened;
    this.IsUpdated = ko.observable(false);

    this.OldOrder = Order;
    this.OldShowOpened = ShowOpened;
};
var ViewModel = {
    Categories: ko.observableArray([]),
    CategoryChange: function(pCategory) {
        if(pCategory.Order != pCategory.OldOrder || pCategory.ShowOpened != pCategory.OldShowOpened)
            pCategory.IsUpdated(true);
        else
            pCategory.IsUpdated(false);
    }
};
ko.applyBindings(ViewModel);
</script>

Donc dans cet exemple j'ai ShowOpened case qui peuvent déclencher CategoryChange méthode qui va changer une variable à l'intérieur de l'objet(que j'ai besoin plus tard pour savoir quels objets sont mis à jour). Mais quand le chechbox est changé, toujours envoyer l'ancienne valeur, méthode de déclenchement, puis les changements de la valeur. Est-il possible de résoudre ce problème?

  • Quelque chose ne va pas avec votre code. Ni ShowOpened ni IsUpdated sont ko.observables (et probablement c'est pourquoi vous obtenez toujours l'ancienne valeur). Comment ce code fonctionne même? CategoryChange doit lever une exception.
  • vous êtes wright, j'ai fait une erreur lors de la création de ce post à l'origine. Mais toujours l'erreur vous avez indiqué n'est pas le problème.
  • Oi, manquant encore ceci: this.ShowOpened = ko.observable(ShowOpened); et ce: pCategory.ShowOpened(). Je dois dire que vous avez fait beaucoup d'erreurs lors de l'écriture de ce post...
InformationsquelleAutor akhabaiev | 2012-07-02
  1. 62

    Depuis que vous avez persisté sur le constat que le manque de ko.observables n'est pas un problème, j'ai regardé de plus près. Il me semble que vous avez raison! Le change événement est déclenché avant la valeur réelle est définie. Je crains que je ne sais pas la raison pour cela.

    Mais il y a un moyen facile de résoudre ce problème: il suffit de changer change événement à click événement:

    <input type="checkbox" data-bind="checked: ShowOpened, click: $root.CategoryChange" />

    N'oubliez pas que vous devez explicitement mis return true; à la fin de click gestionnaire d'événement. Sinon, la nouvelle valeur ne sera pas définie à une case à cocher.

    Si vous ne souhaitez pas utiliser click cas, alors vous pouvez le faire dans l'autre sens. Abonnez-vous à des changements de ShowOpened:

    this.ShowOpened = ko.observable(ShowOpened);
this.ShowOpened.subscribe(function(newValue) {
    /* Do something when ShowOpened changes.
       newValue variable holds the new value, obviously. :) */
});
    • Grand, cliquez sur l'événement œuvres. Je l'ai essayé begore, juste oublié de renvoyer la valeur true, et la case à cocher ne l'ai jamais coché/décoché. Merci.
    • J'ai eu exactement le même problème avec IE ne reconnaissant pas le change événement. Grr.
    • Fonctionne parfaitement! Merci. Le "return true;" est la clé pour que cela fonctionne correctement!
    • Wow cela fonctionne, semble comme un bug dans le changement: événement knock-out pour moi...
    • C'est bien que l'événement click est déclenchée, même lorsque j'appuie sur la barre d'espace et la case a le focus.
    • J'ai été en utilisant deux cases avant la lecture de cette réponse que je n'étais pas renvoyer true. Merci pour la belle solution.
    • Je l'avais oublié .abonnez-vous(func). J'aime cette approche beaucoup.

    InformationsquelleAutor freakish
  2. 6

    Essayez d'utiliser subscribe au lieu de liaison d'événements. Cela devrait fonctionner maintenant

    <table>
    <tbody data-bind="foreach: Categories">
        <tr>
            <td><input type="checkbox" data-bind="checked: ShowOpened" /></td>
        </tr>
    </tbody>
<table>

var Category = function (Id, Name, Order, ShowOpened) {
    this.Id = Id;
    this.Name = Name;
    this.Order = Order;
    this.ShowOpened = ko.observable(ShowOpened);
    this.IsUpdated = false;

    this.OldOrder = Order;
    this.OldShowOpened = ShowOpened;

    this.ShowOpened.subscribe(function (newShowOpened) {
        if(this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened)
            this.IsUpdated = true;
        else
            this.IsUpdated = false;
    }, this);
};
var ViewModel = {
    Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);

    Ou comme alternative (et à mon avis une meilleure solution), vous pouvez utiliser dependentObservable, maintenant appelé computed. Voici comment il devrait ressembler à

    <table>
    <tbody data-bind="foreach: Categories">
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: ShowOpened" />
                <span data-bind="text: IsUpdated"></span>
            </td>
        </tr>
    </tbody>
</table>
var Category = function (Id, Name, Order, ShowOpened) {
    this.Id = Id;
    this.Name = Name;
    this.Order = Order;
    this.ShowOpened = ko.observable(ShowOpened);
    this.OldOrder = Order;
    this.OldShowOpened = ShowOpened;
    this.IsUpdated = ko.computed(function () {
        return this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened;
    }, this);
};
var ViewModel = {
    Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);
    InformationsquelleAutor Sasha Grinevich
  3. 0

    J'ai aussi eu ce problème, mais je ne pouvais pas utiliser le abonnez-vous une solution parce que j'étais déjà abonnée à la même champ avec une requête ajax qui pourrait réinitialiser la valeur. Le code serait rester dans une boucle lorsque vous l'avez modifiée. J'ai donc ajouté la solution de contournement suivante (sa moche mais ça fonctionne).

    $("input[type='radio'], input[type='checkbox']", element).on("change", function (e, data) {
    setTimeout(function () {
        $(this).trigger("afterChange", data);
    }.bind(this), 10);
});

    Alors, plutôt que sur l'écoute, le changement que je voudrais écouter l'afterChange événement.

    <div data-bind="foreach: answerList">
    <input type="checkbox" data-bind="event: { afterChange: $root.sendSelectedAnswer($data) }"/>
</div>

    Je sais que c'est pas la meilleure solution, mais dans mon cas, je n'avais pas d'autre option.

    InformationsquelleAutor J. Visser