L'ajout de propriétés à la vue du modèle créé en utilisant le knock-out JS plugin de cartographie

Je suis en train de travailler à travers la cartographie plugin exemple sur le Knockoutjs site web.

C'est l'exemple des données.

var data = {
    name: 'Scott',
    children: [
        { id : 1, name : 'Alice' }
    ]
}

L'exemple montre comment remplacer la cartographie pour l'un des enfants, mais comment puis-je modifier la cartographie de l'objet de base.

Si par exemple je voulais ajouter un "FavouriteChild" propriété de Scott comment m'y prendre?

Je suppose que j'ai besoin d'utiliser la fonction create sur la cartographie de base, mais je ne peux pas trouver un exemple de la syntaxe n'importe où.

var myChildModel = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.nameLength = ko.computed(function() {
        return this.name().length;
    }, this);
}

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);
        }
    }
}

var viewModel = ko.mapping.fromJS(data, mapping);

EDIT : De la accepté de répondre ci-dessous j'ai trouvé que c'

<span data-bind='text: AdditionalProperty'>

Le knock-out code

var mapping = {
    create: function (options) {
        //customize at the root level.  
        var innerModel = ko.mapping.fromJS(options.data);

        innerModel.AdditionalProperty = 'Hello World';

        return innerModel;
    }
}

var viewModel = ko.mapping.fromJS(data, mapping);

//use this as our model bindings
ko.applyBindings(viewModel);

InformationsquelleAutor fluent | 2011-12-29

knockout.js

24

Vous devez utiliser un create méthode sur l'objet de mappage de lui-même comme:
```
var mapping = {
  //customize at the root level.  
  create: function(options) {
     //first map the vm like normal
     var vm = ko.mapping.fromJS(options.data);

     //now manipulate the returned vm in any way that you like
     vm.someProperty = "test";

     vm.someComputed = ko.computed(function() {
          return vm.first() + " " + vm.last();
     });

     //return our vm that has been mapped and tweaked
     return vm;
  }
};
```
- Comment expliquer comment, que de créer avec un vide de fonction montre rien sur l'accès à la racine et en ajoutant à cela.
- mise à jour de la fonction de montrer comment vous carte et de manipuler le résultat avant de le retourner.
- Je sais que c'est une très vieille question, mais juste après avoir rencontré j'ai voulu faire une suggestion. L'exemple de code pour l'utilisation de la créer de rappel au moment de la cartographie (sur la KnockoutJs site) n'explique pas que la méthode de création est sur le mapping objet. Ryan, si vous le pouvez, je voudrais demander au propriétaire du site, afin de remplacer leur exemple de code avec le vôtre ci-dessus.
InformationsquelleAutor RP Niemeyer

Voici une poursuite de cette réponse sur la base de RP Niemeyer solution

Cette réponse est basée sur la solution ci-dessus et de son blog, Merci pour ça! J'ai pensé que je devrais ajouter quelques détails, car il répond à quand le tableau n'est pas un premier niveau d'objet.

 var data = {
person: {
       children: [{ id: 1, firstName: 'Scot', lastName: 'Weise'}]
    }
};

var mapping = {
    'children': {
        create: function(options) {
            return (new (function() {
                //setup the computed binding for some reason I had
                // to use ko.dependentObservable instead of ko.computed
                //or errors showed up.
                this.fullName = ko.dependentObservable(function() {
                    return this.firstName() + ' ' + this.lastName();
                    }, this);
                    ko.mapping.fromJS(options.data, { }, this);
                })(/* call the ctor here */));
            }
        }
    };

    //Create view model and map the data object to the model.
    var viewModel = ko.mapping.fromJS(data, {});

    //update the viewModel with the mapping object that contains 
    //some a computed property(s)
    viewModel.person = ko.mapping.fromJS(viewModel.person, mapping);
    ko.applyBindings(viewModel);

Noter que la personne est le premier niveau de l'objet et des enfants est sous la propriété de cette personne. La ligne viewModel.personne = ko.la cartographie.fromJS(viewModel.personne, cartographie) n'était pas intutive pour moi à la première.

Et ici est une légère variation

La personne objet est une observable qui est ajouté ou mis à jour après il est créé à partir du serveur de données json.

var viewModel = {};
$(document).ready(function () {
    var person = getPerson();

    //selected person is added to the viewModel
    viewModel.selectedPerson = ko.observable(person);
    ko.applyBindings(viewModel);
});

function getPerson() { 
//you would probably pass this into the function as a parameter. 
var person =
    {
        name: 'jim',
        children: [{ id: 1, firstName: 'jane', lastName: 'bob'}]
    };

    var mapping = {
        'children': {
            create: function (options) {
                return (new (function () {
                    //setup the computed binding
                    this.fullName = ko.dependentObservable(function () {
                    return this.firstName() + ' ' + this.lastName();
                    }, this);
                    ko.mapping.fromJS(options.data, {}, this);
                })(/* call the ctor here */));
            }
        }
    };

    var result = ko.mapping.fromJS(person, mapping);
    return result;
}

De liaison sont code dans le html

En fin de compte, vous aurez besoin de mettre pour l'utiliser à un certain point comme ceci:

<div data-bind="foreach:viewModel.selectedPerson().children">
    <span data-bind="text:fullName"></span>
</div>

Merci pour votre aide! Je ne pouvais pas avoir fait cela loin sans votre blog.

InformationsquelleAutor jwize

Noter que pour définir d'autres calculée observables sur un enfant vous aurez besoin de passer à une autre série d'options de correspondance

var mapping = {
  create: function(options) {
    //customize at the root level.  

    var mapping2 = {
      'children': {
        create: function(options) {
          //customize children also

        }
      }
    }

    //call ko.mapping.fromJS on the options.data as well with further customization
    ko.mapping.fromJS(options.data, mapping2, this);
  }
};

Je suis ici à la recherche de la façon de mapper des propriétés imbriquées et à mon avis c'était l'exemple le plus flagrant. Si elle comprenait un échantillon de ce dernier, il serait une solution complète pour moi.

InformationsquelleAutor Jason

Un autre exemple basé sur les exemples fournis par Jason et RP Niemeyer.

data est ce que nous obtenons après une requête ajax, à laquelle nous ajoutons deux imbriqués observables (viewModel.weekly.selectedWeek et viewModel.monthly.selectedMonth):

    var data = {
"date": "2017-03-28",
"weekly": {
"weeks": [
{
"id": "201701",
"label": "Week 1"
},
{
"id": "201702",
"label": "Week 2"
}
]
},
"monthly": {
"months": [
{
"id": "201701",
"label": "01/2017"
},
{
"id": "201702",
"label": "02/2017"
}
]
}
}
var viewModelMapping = {
create: function (options) {
return (new (function () {
//viewModel root level
var mapping2 = {
'weekly': {
create: function (options) {
//viewModel.weekly
return new function () {
var model = ko.mapping.fromJS(options.data, {}, this);
model.selectedWeek = ko.observable();
return model;
};
}
},
'monthly': {
create: function (options) {
//viewModel.monthly
return new function () {
var model = ko.mapping.fromJS(options.data, {}, this);
model.selectedMonth = ko.observable();
return model;
};
}
}
};
ko.mapping.fromJS(options.data, mapping2, this);
})());
}
};
var viewModel = ko.mapping.fromJS(data, viewModelMapping);
ko.applyBindings(viewModel);

InformationsquelleAutor Eric Boumendil

Vous devez vous connecter pour publier un commentaire.