Voir la liaison de fonction de modèle non détectée dans IE9 mais fonctionne dans FF et Chrome

Update I realize this question is difficult to follow given the implementation. To see and test a working sample please download the solution.

Pour tester, vous devez utiliser IE9 et les outils de développement ne peuvent pas être ouverts. L'ouverture des outils de développement fera fonctionner le projet comme prévu. Cette solution fonctionne très bien avec n'importe quel autre navigateur. Pour tester, j'ai configuré la solution localement dans IIS et l'ai exécutée en dehors de VS/debug.


J'ai un projet où j'essaie d'enregistrer un knockout observable au Sever. Je vois des choses vraiment étranges dans IE9 que je ne peux pas expliquer et j'espère que quelqu'un peut m'aider. J'utilise Asp.NET Mvc avec knock-out et ont mis en œuvre le modèle de module révélateur JS pour cette partie du projet. mes fichiers JS sont les suivants:

  • Reportwriter.js liaison de base à html pour révéler le modèle
  • ReportWriterEffects.js ceci contient tous les événements que l'UI génère qui sont passés au knockout Viewmodel
  • ReportWriterUtilities.js. Cela contient les fonctions de manipulation de données/objets dans le Viewmodel
  • ReportWriterViewModel.js Reportwriter viewmodel Json sérialisation/sérialisation.

Ma page html a l'élément suivant


When this is clicked a non-obtrusive event is called from within the ReportWriterEffects.js

 $(document).on({

            click: function() {
                alert('click');// placed here for testing
                var context = ko.contextFor(this);
                context.$root.Save();
            }
        }, '#footerSaveButton');

Cela devrait appeler à partir de ReportWriterViewModel.js qui ressemble à

self.Save = function() {
            if (self.ValidateReport()) {

               //Transform the custom types in the myFilters collection into the form required by the server-side representation.
                self.TransformFilters();
                ReportWriterUtilities.Save(self.iqReport);
            }

qui passe mon rapport observable dans le fichier reportWriterUtilities.js où l'appel ajax est fait

function Save(reportObservable) {
 //Determine which method to call based upon the state of report modification.
  var command = reportObservable().IsNewReport() ? "SaveNewReport" : "UpdateExistingReport";
$.ajax({
    type: "POST",
    url: "../" + command,
    data: "{ json:'" +
    ko.toJSON(reportObservable, function (key, value) {//Remove the __type attribute. This causes problems with deserialization.
        if (key == "__type") {
            return;
        }
        else {
            return value;
        }
    }) + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    success: function (msg) {
        if (msg.Key != null) {
           //Update the ViewModel with properties from the saved Report.
            reportObservable().ReportId(msg.Key.ReportId);
            reportObservable().DateLastModified(msg.Key.DateLastModified);

            AlertMessaging.DisplaySuccess("Report Saved!", 'Your Report has been saved and is available in your Report Library. Go to Report Library');
        }
        else {
           //Display an error with the given text.
            AlertMessaging.DisplayError("Problem Saving Report", msg.Value);
        }
    }, error: function (err) {
        AlertMessaging.DisplayError("Error Saving Report", "The Server returned an error code. Code: " + err.status);
    }
    });
}

In Firefox and Chrome this all works and the report is saved. However within IE the save call is never invoked. I originally had a knockout bind set on the element which was never invoked. I thought the browser cache may have been having an impact on this since I was using Mvc so I decorated the controller to not load cache by adding the following attribute to the controllers constructor

[System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class ReportLibraryController : RootController
{ ...

Toujours pas de dés.

Si vous regardez les appels ajax vous verrez aussi où j'ai ajouté cache: false en pensant que cela peut aider. Toujours rien.

J'ai ajouté le message d'alerte et cela est appelé, mais le contexte. $ Root.Save (); n'est jamais appelé.

Now here is the really weird thing. When I load the page in IE9 and press F12 to open the dev tools in IE and then close the dev tools the save function within the viewmodel is called and everything works. If I launch the browser open dev tools and navigate to the page everything works. No errors or messages are generated in the console and it all works fine within other browsers. This seems isolated to IE9 as IE 10 works fine.

Est-ce que quelqu'un a des suggestions ou avez-vous déjà vécu quelque chose comme ça dans le passé? J'apprécierais tout aperçu de ce qui pourrait causer cela. J'espère que le code ci-dessous suffira. Je ne peux pas utiliser le violon puisque j'utilise le motif révélateur ici et cela ne donne pas une représentation précise du code.

0
ajouté édité
Vues: 1
@rlcrews: Je crains que cela n'ait rien à voir avec ko , ou un pattern spécifique. Bienvenue sur le monde glamour de IE !
ajouté l'auteur o.v., source
@PWKad C'est comme ça que je l'ai initialement configuré. Dans l'élément j'ai eu data-bind = "click: $ root.Save". Cela a montré le même effet que l'événement non-intrusif. Utiliser jQuery pouvait au moins appeler d'autres fonctions mais n'atteignait pas les fonctions du viewModel lui-même. Je ne pense pas que jQuery soit la cause principale ici. Cela fonctionne dans d'autres navigateurs. Utiliser des événements non-intrusifs comme je l'ai ici est parfaitement acceptable lorsque je fais référence à des fonctions anonymes
ajouté l'auteur rlcrews, source
TL: DR - vous avez probablement des problèmes parce que vous essayez d'utiliser jQuery pour la gestion des événements pour appeler knockout. Débarrassez-vous des liaisons de clic et reliez-les correctement avec ko
ajouté l'auteur PW Kad, source

1 Réponses

In IE8&9, console is undefined whenever F12 developer tools have not been initialized for the current document (afaik, old versions of firebug suffered from this as well).

Votre self.Save semble échouer sur console.log ('VM atteint'); dans ReportWriterViewModel.js (13) . Il pourrait aussi y avoir d'autres endroits, mais c'est aussi loin que mon analyse de code statique artisan me parvient (pas d'accès à un IDE VisualStudio ... ou de confiance pour des solutions non vérifiées :)

Vous pouvez simplement continuer à développer vos activités courantes avec les outils de développement ouverts, tant que les appels console sont supprimés du code de production - ce serait ma préférence personnelle.

Alternativement, vous pouvez choisir de "brancher" les méthodes de la console avec un noop (une méthode qui ne fait rien):

/*https://stackoverflow.com/a/9593812/1081234*/
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function() { };

This answer deserves attention as well, since it plugs other console methods.

4
ajouté
@rlcrews: Je suis content d'entendre cela aidé. Il y a quelque temps, nous avons rencontré un problème similaire et il semble que MSDN reste encore obscur à propos de cela et d'autres problèmes. À mon humble avis, il est fascinant de savoir combien de développeurs achètent dans le "IE9 + est un tel navigateur!" campagne de marketing.
ajouté l'auteur o.v., source
@ o.v c'était le problème. Niché dans l'une de mes fonctions de validation, j'ai eu un événement console.log. Jamais je n'aurais pensé que ce soit le problème mais ça l'était. Merci pour l'aperçu sur la console étant indéfini dans ces versions du navigateur
ajouté l'auteur rlcrews, source