Knockoutjs, mise à jour de ViewModel après l'appel ajax

Question

J'utilise le knockout et le plugin de cartographie knockout.

• Mon action MVC3 renvoie une vue et non JSON directement en tant que tel, je convertisse mon modèle en JSON.
• Il s'agit d'un formulaire de saisie de données et en raison de la nature de la validation du système se fait dans la couche de service, avec des avertissements renvoyés dans un objet de réponse dans le ViewModel.
• Les liaisons et les mises à jour initiales fonctionnent correctement, c'est le comportement "post-mise à jour" qui me cause un problème.

Mon problème est après avoir appelé le post ajax et et recevoir mon knockout de réponse JSON ne met pas à jour toutes mes liaisons ... comme si les mappages observables avaient été déposés

Si j'inclus un KO.ApplyBindings supplémentaire (ViewModel); dans le Succès Les choses fonctionnent ... mais les problèmes surviennent alors avec plusieurs liaisons et je suis certain que ce n'est pas la bonne solution.

Ceci est le HTML / modèle / reliures

<!-- Start Form -->
<form action="@Url.Action("Edit")" data-bind="submit: save">
<div id="editListing" data-bind="template: 'editListingTemplate'"></div>
<div id="saveListing" class="end-actions">
    <button type="submit">Save Listings</button>
</div>
</form>
<!-- End Form -->

<!-- Templates -->
<script type="text/html" id="editListingTemplate">
        <div class="warning message error" data-bind="visible: Response.HasWarning">
            <span>Correct the Following to Save</span>
            <ul>
                {{each(i, warning) Response.BusinessWarnings}}
                    <li data-bind="text: Message"></li>
                {{/each}}
            </ul>
        </div>

        <fieldset>
            <legend>Key Information</legend>
            <div class="editor-label">
                <label>Project Name</label>
            </div>
            <div class="editor-field">
                <input data-bind="value: Project_Name" class="title" />
            </div>            
        </fieldset>        
</script>
<!-- End templates -->

Et c'est le knockout / script

<script type="text/javascript">
        @{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }

        var initialData = @jsonData;
        var viewModel = ko.mapping.fromJS(initialData);


        viewModel.save = function () 
        {
            this.Response = null;
            var data = ko.toJSON(this);
            $.ajax({
                url: '@Url.Action("Edit")',
                contentType: 'application/json',
                type: "POST",
                data: data,
                dataType: 'json',
                success: function (result) {
                ko.mapping.updateFromJS(viewModel, result);
            }
        });
    }

    $(function() {                        
        ko.applyBindings(viewModel);            
    });
</script>

Et c'est la réponse que JSON a renvoyée de la demande réussie, y compris les messages de validation.

{
    "Id": 440,
    "Project_Name": "", 
    "Response": {
        "HasWarning": true,
        "BusinessWarnings": [
            {
                "ExceptionType": 2,
                "Message": "Project is invalid."
            }, {
                "ExceptionType": 1,
                "Message": "Project_Name may not be null"
            }
        ]
    }   
}

METTRE À JOUR

Démo violon Est un exemple en direct coupé de ce que je vis. J'ai la mise à jour project_name avec le JSON renvoyé mais l'objet et les propriétés ViewModel.Response ne sont pas mis à jour via leurs liaisons de données. Spécifiquement la réponse.Haswarning ().

J'ai changé pour ko.mapping.updatefromjs car dans mon contrôleur, je retourne spécifiquement JSON (ViewModel).

Nettoyé mon code / question initial pour correspondre à la démo.

Answer 1

Je suppose que la réponse est réservée, lorsque je change de "réponse" à "resp", tout s'est bien passé. Voir http://jsfiddle.net/bbzvm/

Answer 2

Ne devriez-vous pas utiliser ko.mapping.updatefromjson sur votre événement de réussite? Chapitre Travailler avec des cordes JSON Le site de cartographie à élimination directe dit:

Si votre appel ajax renvoie une chaîne JSON (et ne le désérialise pas dans un objet JavaScript), vous pouvez utiliser les fonctions ko.mapping.fromjson et ko.mapping.updatefromjson pour créer et mettre à jour votre modèle de vue à la place.