Knock-out JS cartographie plugin sans données initiales / formulaire vide

Nous sommes à l'aide de knock-out et le knock-out de la cartographie plugin pour faciliter la liaison de données dans notre jQTouch application web. La raison pour laquelle nous utilisons le plugin de cartographie, est d'être en mesure d'utiliser knockout sans la nécessité de définir/modifier viewmodel manuellement en javascript. La cartographie plugin fonctionne très bien lorsque vous avez un chargement initial des données à partir du serveur/client côté de la base de données.

Le problème que nous avons est que nous avons des écrans qui ont une forme dans laquelle il est possible qu'il n'y a pas de données initial. Sans ces données initiales, le plugin de cartographie ne pouvez pas générer de " le viewmodel (ko.la cartographie.fromJS). Cela signifie que nous avons encore besoin de définir notre viewmodel à la main pour une grande partie de nos points de vue.

Je me trompe en supposant que c'est un scénario qui le plugin de cartographie (devrait) prennent en charge? Je veux dire, cela signifie que le plugin de cartographie est utilisable uniquement dans les scénarios dans lesquels vous avez toujours un chargement initial des données.

InformationsquelleAutor MichaelvR | 2011-07-18

19

Un couple d'options pour vous en plus juste manuellement la gestion de votre modèle de vue. La cartographie plugin prend en charge un create de rappel qui vous permet de personnaliser la façon dont il est créé. Cela peut être utilisé pour ajouter des propriétés par défaut d'un objet, s'il leur arrive d'être absent.

Quelque chose comme ceci: http://jsfiddle.net/rniemeyer/WQGVC/

Une autre alternative est d'utiliser une liaison qui crée des propriétés qui sont manquants. Il pourrait ressembler à:
```
//create an observable if it does not exist and populate it with the input's value
ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        //populate the observable with the element's value (could be optional)
        data[property](value);

        ko.applyBindingsToNode(element, { value: data[property] });
    }
}
```
Que vous pouvez l'utiliser comme ceci (il faut passer la propriété comme une chaîne de caractères, sinon il sera d'erreur):
```
<input data-bind="valueWithInit: 'name'" />
```
Exemple ici: http://jsfiddle.net/rniemeyer/JPYLp/
- Merci PR Niemeyer, je vais essayer dans les prochains jours. Semble prometteur!
- La liaison personnalisée fonctionne parfaitement, merci!
- le cust initialisation de la liaison a très bien fonctionné pour moi, mais je n'aimais pas la mise à jour dynamique des données de l'affectation de l'attribut dans la liaison, donc je vous conseille d'utiliser virual éléments. Quelque chose comme:  <input data-bind="visible: PropC, valeur: PropC"></input>
- cette version était un peu obsolète. J'ai mis à jour la réponse avec une liaison personnalisée qui s'appliquerait la value de liaison à l'élément, mais pas écraser les autres liaisons. Une autre option est de simplement utiliser un init de liaison que vous placer avant toutes les autres liaisons.
- est-ce toujours la meilleure façon d'aller à ce sujet?
- si vous souhaitez créer des observables "à la volée", c'est toujours une bonne option.
InformationsquelleAutor RP Niemeyer
4

Je pense que la solution à votre problème vient de la pensée sur le modèle de vue dans le mauvais sens. Un modèle de vue n'est pas seulement quelque chose qui fournit des données à la vue, mais aussi d'une place de titulaire pour la soumission des données.

La façon dont j'ai l'habitude de travailler avec knock-out, je n'ai jamais finir par envoyer un vide modèle d'affichage de la vue. Le modèle de vue a généralement tous les domaines, je suis à la lie. Tandis qu'ils pourraient être des chaînes vides, ou les objets initialisés avec pas d'affichage des valeurs, des objets réels encore sorties, avec une bonne représentation de chaque objet dans le champs je suis de liaison à.

Vous voudrez peut-être regarder dans le simple envoi d'objets vides au lieu de ne rien avoir à la vue.

EDIT: L'exemple de l'onu ASP.NET MVC

Donc basiclaly, j'sur le côté serveur, j'ai créer un modèle de vue de l'objet, qui contient toutes les données qui doivent être affichés ainsi que toutes les données qui doivent être recueillies. Pour faciliter la validation du code général j'ai mis les données à collecter dans une sous-classe, mais que tout est une question de besoins de votre code.

Dans anycase, tout objet qui va à la vue inherts à partir d'un vmBase classe qui, fondamentalement, fournit une méthode toJSON() qui génère la sérialisation JSON de l'objet. Ce qui est appelé de mon point de vue par le moteur d'affichage. Comme indiqué dans le code ci-dessous.
```
      <script type='text/javascript'>         
        var viewModel = ko.mapping.fromJS(<%= Model.ToJson() %>);                     

        $(document).ready( function () {        
            ko.applyBindings(viewModel);                             
        });                  
     </script>   
```
Quand je suis prêt à envoyer le code de retour, j'ai simplement supprimer tirer un JS version du modèle de vue.
```
<script type='text/javascript'>
     var dataToSendToServer = ko.toJS(viewModel);
</script>
```
Dans certains sanarios, où seule une partie de la vue modèle est en train de changer (c'est si vous faites de l'AJAX mises à jour), vous pouvez faire des trucs cool comme, de commutation, de modèles, de sorte que les différents liaison peut être appliquée. Dans ce cas, nous sommes à l'aide d'un #ID_of_Container en tant que contenant de l'origine des données/modèle et de remplacer le modèle (qui peut contenir des données-bind="" éléments) d'un nouveau modèle de ID_of_Template
```
<script type='text/javascript'>
    ko.cleanNode($("#ID_of_Container"));
    delete (viewModel.Some_Element_To_Be_Updated);
    viewModel = ko.mapping.updateFromJS(viewModel, New_Data_For_That_Element);

    //Use ko.toJS(viewModel) because standard template plugin doesn't understand 
    //knockout observables
    $("#ID_of_Container").html($("#ID_of_Template").tmpl(ko.toJS(viewModel)))
    ko.applyBindings(viewModel, $("#ID_of_Container")[0]);

</script>
```
- Êtes-vous également à l'aide de l'KO plugin de cartographie? Qui permet de générer le viewmodel, au lieu d'avoir à le définir "à la main". C'est la partie que nous allons avoir des problèmes avec.
- Espérons que le modifier permet de. Il m'a fallu un peu de savoir que je peux faire ce genre de choses avec les huitièmes de finale. Mais elle finit avec un peu assez de grands résultats. Il donne vraiment le site web d'un client lourd est tombé très fluide AJAX flux.
InformationsquelleAutor Sergei Golos
0

Une approche que je me penche maintenant est de créer une autre méthode de service web appelé ReturnEmptyObject() qui n'est rien d'autre que de créer et retourner un objet nouvellement instancié (dont les propriétés seraient les valeurs par défaut) sur le côté serveur. L' (dans mon cas, C#) de l'objet est sérialisée en JSON, et arrive enfin sur le jQuery, Ajax appel.... et puis passé dans ko.la cartographie.updateFromJS()... qui crée le besoin observables sur le chargement initial de la page... avant que j'appelle ko.applyBindings().

Lorsque ko.applyBindings() s'exécute, il trouve des observables elle a besoin afin de ne pas jeter une erreur, même si elles sont vides pour la plupart.

De cette façon, la page peut d'abord être ouvert sans aucune des champs remplis. Pourtant, si j'ajoute quelques nouvelles propriétés à ma classe sur le côté serveur, ils affichent automatiquement sur le côté client encore.

InformationsquelleAutor ClearCloud8

Vous devez vous connecter pour publier un commentaire.