La mise à jour du modèle de vue de l'objet ne fonctionne pas

Je veux être en mesure d'observer un objet à l'intérieur du modèle de vue. J'ai un exemple simple qui ne fonctionne pas comme prévu, n'importe qui peut voir le problème?

À l'aide de knock-out 1.1.1, ont 2 entrées en tant que tel:

<form data-bind="submit: save">
    <input type="text" data-bind="value: deckName" />
    <input type="text" data-bind="value: deck().Name" />
    <button type="submit">Go</button>
</form>

Lorsque le chargement de la page, les entrées d'obtenir les valeurs par défaut, mais sur la soumission du formulaire viewModel.deck().Name n'est pas mis à jour mais viewModel.deckName est.

<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = {
        deck: ko.observable(initialData),
        deckName: initialData.Name,
        save: function() {
            ko.utils.postJson(location.href, { deck: this.deck, deckName: this.deckName });
        }
    };
    ko.applyBindings(viewModel);
</script>

Sur le POST de formulaire, deck va encore envoyer "test" peu importe à l'entrée, tandis que deckName sera le correspondant de la valeur d'entrée.

Ce que je veux vraiment, c'est être capable d'observer un objet viewModel.deck et puis de lier ses propriétés d'entrées, mais les propriétés ne sont pas mis à jour.

InformationsquelleAutor yanta | 2010-12-20
  1. 7

    Il y a plusieurs problèmes avec ce que vous avez fournis.

    1. Vous n'avez qu'à programmer une valeur de temps setter pour votre deuxième entrée depuis deck().Name est un valeur statique (par opposition à une ko.observable ou un ko.observableArray). (Pour prouver ce complément viewModel.deck({"Name":"updated test"}); à la fin de votre script après ko.applyBindings(viewModel);)
    2. deckName est une façon de liaison - il est écrit lors de la première applyBindings et viewModel sera mis à jour par les changements effectués par l'utilisateur ou des scripts à la <input>. Cependant, si vous apportez des modifications du programme de la viewModel votre champ de saisie ne sera pas mis à jour pour correspondre. Vous aurez envie de prendre un coup d'oeil à la dernière partie de Knockout.js' la valeur contraignante de la documentation.

    Une légère amélioration de la version:

    <form data-bind="submit: save">
    <input type="text" data-bind="value: deckName" />
    <input type="text" data-bind="value: deck().Name" />
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = {
        deck: ko.observable(initialData),
        //Set up a two way binding
        deckName: ko.observable(initialData.Name),
        //Set up a one time value setter
        save: function() {
            ko.utils.postJson(location.href, ko.toJSON(this));
            //When we save the model we post *it* back, rather than
            //serializing it by hand.
        }
    };
    ko.applyBindings(viewModel);
    viewModel.deck({"Name":"updated test"});
</script>

    Une autre version à l'aide de fromJS:

    <form data-bind="submit: save">
    <input type="text" data-bind="value: Name" />
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = ko.mapping.fromJS(initialData);
    viewModel.save = function() {
        ko.utils.postJson(location.href, ko.toJSON(this));
        //When we save the model we post *it* back, rather than
        //serializing it by hand.
    }
    ko.applyBindings(viewModel);
</script>

    Vous aurez envie de chercher à knock-out du fromJSON et fromJS funcitons (mis en œuvre dans son plugin de cartographie).

    • Bon point sur la manière d'une liaison sur deckName. Ce que je veux c'est un viewModel avec "le pont", comme une observable qui vient de JSON et ensuite être en mesure d'ajouter d'autres propriétés pour le viewModel qui ne viennent pas de JSON.
    • vous pouvez ajouter d'autres propriétés qui ne viennent pas de l'objet JSON après que vous avez appelé fromJSON. Le modèle peut être construit par programme; il n'a pas à être mis ensemble en une seule fois.
    • Vieira - j'ai pris votre deuxième exemple et de copier dans une page, mais le viewModel est pas défini, le Nom n'est;t diaplyed dans l'entrée et la forme ne poste pas. Une idée?
    • avez-vous d'inclure les huitièmes de finale.la cartographie de l'extension sur la page? github.com/SteveSanderson/knockout.mapping
    • le module de cartographie est défini dans la page comme ceci <script type="text/javascript" src="/Scripts/knockout.mapping-latest.js"></script>
    • Ah, ko.fromJS devrait être ko.la cartographie.fromJS 🙂
    • était-ce une aide?

    InformationsquelleAutor Sean Vieira