KnockoutJS de liaison de paire Clé/Valeur

Je suis en train d'essayer de se lier à une paire clé/valeur des données avec KnockoutJS:

this.personal = {
  "name" : "Chuck",
  "country" : "USA"
};

Dans mon HTML j'utilise le $de liaison de données:

<ul data-bind="foreach: personal">

  <li data-bind="text: $data"></li>

</ul>

qui se traduit par:

[object Object]

[object Object]

Quelqu'un sait comment mon de liaison devrait ressembler si je veux voir ça:

name: Chuck

country: USA

en d'autres mots...comment je peux afficher le nom de la propriété et de la valeur de la propriété?

EDIT: Quelqu'un m'a indiqué: https://github.com/jamesfoster/knockout.observableDictionary Mais j'ai encore de l'espoir pour lier sans une bibliothèque

foreach est destiné à travailler avec les tableaux. Une bonne option est de faire un plan de votre objet dans un tableau qui contient des éléments avec clé/valeur d'accessoires. Jetez un oeil à cette réponse pour un moyen de le faire: stackoverflow.com/questions/7400387/...

OriginalL'auteur Loek | 2012-06-15

6

Il y a un moyen plus facile de se lier à une paire clé-valeur à l'aide de Knockout.js. Disons que vous avez une valeur clé de la paire qui ressemble au suivant
```
myItems: [
            { Name: 'Item 1', Value: 1},
            { Name: 'Item 3', Value: 3},
            { Name: 'Item 4', Value: 4}
        ],
```
Suffit d'utiliser le code html suivant à se lier à la valeur de la clé de la paire.
```
<select data-bind="options: myItems, optionsText: 'Name', optionsValue: 'Value'></select>
```
Références:

http://knockoutjs.com/documentation/options-binding.html

OriginalL'auteur aholtry

Essayer quelque chose comme cela:

<ul data-bind="keyvalue: properties">
    <li>
        <span data-bind="text: key"></span> :
        <span data-bind="text: value"></span>
    </li>
</ul>

Pour JavaScript:

function AppViewModel() {
    this.properties = { b: 'c', d: 'e' };
}

ko.bindingHandlers['keyvalue'] = {
    makeTemplateValueAccessor: function(valueAccessor) {
        return function() {
            var values = valueAccessor();
            var array = [];
            for (var key in values)
                array.push({key: key, value: values[key]});
            return array;
        };
    },
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['foreach']['init'](element, ko.bindingHandlers['keyvalue'].makeTemplateValueAccessor(valueAccessor));
    },
    'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['foreach']['update'](element, ko.bindingHandlers['keyvalue'].makeTemplateValueAccessor(valueAccessor), allBindings, viewModel, bindingContext);
    }
};

ko.applyBindings(new AppViewModel());

OriginalL'auteur Liu Yue

Créer une fonction dans votre modèle de vue qui convertit l'objet de la propriété des noms et des valeurs dans un tableau d'objets avec une clé et de la valeur des propriétés contenant ladite nom et la valeur.

var ExampleViewModel = function () {
    var self = this;

    self.personal = {
        "name": "Loek",
        "country": "Netherlands"
    };

    self.personalList = function () {
        var list = [];

        for (var i in self.personal) if (self.personal.hasOwnProperty(i)) {
            list.push({
                "key": i,
                "value": self.personal[i]
            });
        }

        return list;
    };
};

Votre modèle html devrait ressembler à la suivante:

<ul data-bind="foreach: personalList()">
    <li data-bind="text: $data.key + ': ' + $data.value"></li>
</ul>

Cette résultats dans la sortie suivante:

nom: Loek
pays: pays-bas

Voici un violon avec un exemple de travail.

OriginalL'auteur Daryl Wright

2

Je pense que vous devriez faire
```
<ul data-bind="foreach: personal">
  <li data-bind=" text: country"></li>
  <li data-bind=" text: name"></li>
</ul>

//This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    //Use an array here
    this.personal = [{
        "name": "Loek",
        "country": "Netherlands"
    }];
}

//Activates knockout.js
ko.applyBindings(new AppViewModel());
```
violon http://jsfiddle.net/Aw5hx/

P. S. je n'ai jamais utilisé knockoutJS avant ce post, donc je ne suis pas un expert mondial.

Salut Nicolas, merci pour votre réponse rapide, mais qui n'est pas exactement ce que je recherche. Dans mon cas, je ne connais pas les touches de l'objet personnel. Alors je veux faire un foreach sur l'objet et afficher chaque Clé (nom) et de la Valeur. J'espère que vous pourrez m'aider.
si vous ne connaissez pas les touches / de la valeur de l'objet personnel, pourquoi ne pas vous itérer sur ceux avec un cycle et ensuite construire le DOM de manière dynamique avant d'appliquer les liaisons?

OriginalL'auteur Nicola Peluchetti

Vous devez vous connecter pour publier un commentaire.