KnockoutJS Liaison Problème, Impossible de lire la propriété

Votre selected observables ne dispose pas d'un .RequestLog de la propriété au moment de ko est l'évaluation de l'expression de liaison. Cette erreur est à venir à partir de javascript, pas de ko (si ko encapsule l'exception dans le message d'erreur que vous voyez). Lors de l'exécution, selected.RequestLog === undefined est vrai, et vous ne pouvez pas invoquer quoi que ce soit sur undefined. C'est comme une référence nulle exception.

Il a de sens que si vous appelez applyBindings avant l'appel ajax finitions.

Un moyen de résoudre ce problème en faisant une angiographie à la place:

<div class="param">
   <span>Time</span>
   <label data-bind="text: selectedRequestLogTimestamp"></label>
</div>

self.selectedRequestLogTimestamp = ko.computed(function() {
    var selected = self.selected();
    return selected && selected.RequestLog
        ? selected.RequestLog.TimeStamp
        : 'Still waiting on data...';
});

Ci-dessus, rien n'est jamais invoquée sur une variable non définie. Votre étiquette affichera "Toujours en attente sur des données" jusqu'à ce que l'appel ajax finit, il se remplira avec le timestamp dès que vous lancez self.selected(result[0]).

Une autre façon de le résoudre est de garder votre liaison la même, mais en donnant le sélectionné observable une valeur initiale. Vous pouvez laisser tous vos fichiers html, et juste pour cela:

self.selected = ko.observable({
    RequestLog: {
        TimeStamp: 'Still waiting on data'
    }
});

... et vous allez vous retrouver avec le même résultat.

Pourquoi?

Tout moment vous initialisez une observable en faisant quelque chose comme self.prop = ko.observable(), la valeur réelle de l'observable est undefined. Essayez:

self.prop1 = ko.observable();
var prop1Value = self.prop1();
if (typeof prop1Value === 'undefined') alert('It is undefined');
else alert('this alert will not pop up unless you initialize the observable');

Donc, pour résumer ce qui se passe:

1. Vous initialisez votre observables avec une valeur égale à la valeur undefined dans votre viewmodel.
2. Vous appelez ko.applyBindings contre le viewmodel.
3. ko analyse les données de l'affectation des attributs, et tente de se lier.
4. ko arrive à la text: selected.RequestLog.Timestamp de liaison.
5. ko appelle sélectionné(), qui renvoie undefined.
6. ko essaie d'appeler .RequestLog sur undefined.
7. ko déclenche une erreur, car non défini ne pas en avoir un .RequestLog propriété.

Tout ce qui se passe avant votre appel ajax retourne.

Répondre au commentaire #1

Oui, vous pouvez appeler applyBindings après votre ajax succès de l'événement. Toutefois, c'est généralement pas toujours ce que vous devrait faire. Si vous voulez, voici un exemple de la façon dont il pourrait être fait:

self.updateErrorList = function (page) {
    self.updateErrorPromise = jQuery.ajax({
        type: "POST",
        url: "/Admin/ErrorPage",
        data: { pageNum: page },
        success: function (result) {
            self.errorList(result);
            self.selected(result[0]);
        },
        error: function (result) {
            jQuery("#status").text = result;
        }
    });
};

jQuery(document).ready(function () {
    var vm = new siteLogModel();
    vm.updateErrorList(0);
    vm.updateErrorPromise.done(function() {
        ko.applyBindings(vm);
    });
});

Encore un autre moyen serait d'aller de l'avant et impatient de-lier (applyBindings avant l'appel ajax finitions), mais les envelopper votre balisage dans un si contraignant de la sorte:

<div class="param" data-bind="if: selected">
   <span>Time</span>
   <label data-bind="text: selected.RequestLog.Timestamp"></label>
</div>

OriginalL'auteur danludwig