KnockoutJS: Ajout de Propriétés Observables et les Fonctions des objets dans une cartographie générée ObservableArray

Je suis nouveau sur KnockoutJS, et je suis coincé à essayer d'ajouter des propriétés et des méthodes pour les objets générés dans le ko.observableArray() créé par le mapping plugin.


Voici où j'en suis à:

  • J'ai un tableau JSON de Users
  • J'ai créé le ko.observableArray() avec le plugin de cartographie
  • J'ai un modèle qui crée une ligne de tableau pour chaque User, jusqu'ici tout va bien :o)


Voici ce que j'essaie de faire:

Chaque User a une propriété appelée 'IsActive' - j'aimerais data-bind d'un événement de clic à une méthode sur chaque User objet qui permet d'activer cette 'IsActive' propriété.

Cette question avait l'air prometteur, mais il semble comme une duplication inutile pour moi d'avoir à déclarer l'ensemble du Modèle de Vue en JS (sauf si c'est la façon que j'ai de le faire!) - est-il possible d'étendre simplement les objets générés?

Je pensais plus le long de ces lignes, où il y a une façon de déclarer des propriétés supplémentaires ou de méthodes, et d'étendre la mapping objets générés, mais cet article s'intéresse aux objets plutôt que de l'étendre les objets dans un tableau.


Voici le code: http://jsfiddle.net/yZkSf/2/ (ne fonctionne pas encore en JS fiddle - mais je vais continuer à jouer avec elle et de mettre à jour ce lien quand je le faire fonctionner).

Merci pour votre aide

InformationsquelleAutor Andrew | 2011-12-06
  1. 13

    Il y a plusieurs options que vous pourriez envisager.

    -Est d'utiliser le créer de rappel pour contrôler la façon dont votre "user" les objets créés. Vous pouvez soit définir des observables vous-même et ajouter des fonctionnalités supplémentaires ou appeler le plugin de cartographie sur l'utilisateur de l'objet, puis ajouter des fonctionnalités supplémentaires.

    Serait quelque chose comme: http://jsfiddle.net/rniemeyer/fkVaK/

    -Sinon, vous pouvez placer la "bascule" de la fonction sur votre viewModel et puis passer à "l'utilisateur" objet.

    Une belle façon avec 1.3, est d'utiliser ko.dataFor avec quelque chose comme du jQuery live/le délégué/sur l'événement d'une fonctionnalité de délégation. Serait comme: http://jsfiddle.net/rniemeyer/FkjNr/

    //unobtrusive event handler
$(".toggle").live("click", function() {
    var user = ko.dataFor(this);
    if (user) {
       viewModel.toggleIsActive(user);
    }
});

    Si vous ne voulez pas l'utiliser en cas de délégation, alors vous pouvez passer à l'élément directement à l'aide d'une fonction anonyme comme: http://jsfiddle.net/rniemeyer/GpQtN/

    EDIT: comme d'2.0, les données en cours est automatiquement transmis au gestionnaire lors de l'utilisation de la souris/les liaisons d'événements, de sorte que vous pouvez faire: 

    <a href="#" data-bind="click: $root.toggleIsActive"><span data-bind="text: IsActive"></span></a>
    • Parfait! - Je me suis rapproché avec le create: de rappel, mais la documentation se concentre sur la modification d'un tableau enfant, et je ne pouvais pas voir comment augmenter l'objet de base. Merci beaucoup
    • +1 très bon exemple de l'utilisation de "créer" de rappel. Merci
    InformationsquelleAutor RP Niemeyer
  2. 4

    C'est ce que je suis venu avec l'aide de votre et Ryan réponses... qui semble fonctionner. Merci de laisser des commentaires, comme je suis nouveau sur le knock-out et curieux, moi-même, si c'est une bonne approche.

    JS:

    $(function() {
    $.get("users/getUsers", function(r){
        var vm = ko.mapping.fromJS(r, {
            users: {
                create: function(user){
                    var methods = {
                        toggleIsActive: function(u){u.IsActive(!u.IsActive());},
                        foo: function(u){console.log(u);},
                        bar: function(u){/*whatever*/},   
                    }
                    return $.extend(ko.mapping.fromJS(user.data), methods);
                }
            }
        });
        ko.applyBindings(vm);
    }, 'json');
});

    DOM:

    <!-- ko foreach: users -->
   <a href="#" data-bind="click: toggleIsActive"><span data-bind="text: IsActive"></span></a>
<!-- /ko -->
    InformationsquelleAutor Jordan Arseno
  3. 0

    J'ai trouvé un moyen de le faire, mais cela signifie en boucle à travers les objets générés dans le tableau une fois qu'ils ont été créés.. je préfère un moyen d'obtenir le même résultat sans boucle supplémentaire..

    EDIT: Comme RP Niemeyer suggère dans sa réponse! ;o)

    De toute façon, une façon d'ajouter des propriétés à un objet existant est d'utiliser jQuery extend() pour combiner les objets.

    D'abord, déclarer les propriétés supplémentaires et des fonctions dans un nouvel objet:

    var userModel = {
    toggleIsActive: function() {
        console.log('toggleIsActive called: before: ' + this.IsActive());
        this.IsActive(!this.IsActive());
        //todo: save!
        console.log('toggleIsActive called: after: ' + this.IsActive());
    }
}

    Puis, après la ko.mapping.fromJS() appel, mais avant de le ko.applyBindings() appel, boucle à travers les objets dans l'généré tableau et de les étendre:

    viewModel.users = ko.mapping.fromJSON(/* get JSON */);

for (var i = 0; i < viewModel.users().length; i++) {
    $.extend(viewModel.users()[i], userModel);
}

ko.applyBindings(viewModel);
    InformationsquelleAutor Andrew