knock-out lier une clé d'objet de valeur à la liste déroulante

J'ai les modèles suivants:

var allCategories = [{
    id: 1,
    name: 'Red'},
{
    id: 5,
    name: 'Blue'}];

function model() {
    self = this;
    self.name = ko.observable("");
    self.categoryId = ko.observable(-1);
    self.categoryName = ko.computed(function() {
        if (self.categoryId() == -1) return "";
        return getCategoryNameById(self.categoryId()).name;
    });
}

function getCategoryNameById(id) {
    return _.find(allCategories, function(cat) {
        return cat.id == id;
    });
}

Je tiens à offrir un menu déroulant permettant de sélectionner la catégorie, mais je n'ai aucune idée de comment lier.
Peut-être que j'ai utilisé la bonne approche avec mes modèles, mais c'est probablement la façon dont je accéder à mes données depuis le serveur, j'ai donc essayé d'envelopper mon JS autour de cela.

J'ai essayé quelque chose comme ceci:

<select data-bind="options: categories, optionsText: 'name', value: 'id', optionsCaption: 'Categorie...'"></select>

Mais je ne comprends pas comment connecter la liste déroulante de la valeur pour le modèle categoryId.

Ici est un violon avec un travail de liaison pour le nom de la propriété.

OriginalL'auteur kannix | 2012-11-27

  1. 20

    Pour votre boîte de liste, vous devez spécifier: options, optionsText, optionsValue, et value.
    value (qui est la valeur actuellement sélectionnée) doit pointer vers votre model.categoryId(). Et optionsValue est le nom de la propriété où obtenir des valeurs de la liste:

    <select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId(), optionsCaption: 'Categorie...'"></select>

    Et c'est tout. Et le travail de violon: http://jsfiddle.net/Y7Nrc/

    merci pour cette rapide et utile de répondre 🙂

    OriginalL'auteur Max Shmelev

  2. 10

    Selon Max Schmelevs réponse, ce qui est correct, cette fonctionnalité n'est pas ne change pas l'objet JSON lorsque vous modifiez l'élément à partir d'une liste déroulante.

    Voici donc mes corrections pour sa code:

    Code HTML:

    <div id="container">
  <!-- Here I've added valueUpdate on keydown -->
  <input data-bind="value: model.name, valueUpdate:'afterkeydown'" />
  <!-- NOTE: Here you should call value like $root.model.categoryId -->
  <select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId, optionsCaption: 'Categorie...'"></select>
  <span data-bind="text: ko.toJSON($data.model)"></span>
</div>

    Code Javascript:

    var allCategories = [
    {id: 1, name: 'Red'},
    {id: 5, name: 'Blue'}];

function model() {
    self = this;
    self.name = ko.observable("");
    self.categoryId = ko.observable(1);
    self.categoryName = ko.computed(function() {
    //NOTE: Here we should check if categoryId() is defined or not
    if (!self.categoryId()) return "";
        return getCategoryNameById(self.categoryId()).name;
    });
}

function getCategoryNameById(id) {
    return _.find(allCategories, function(cat) {
        return cat.id == id;
    });
}

var viewModel = {};
viewModel.model = new model();
viewModel.categories = allCategories;
ko.applyBindings(viewModel, document.getElementById('container'));

    !!!IMPORTANT!!!

    Si cette approche répond à votre question, veuillez sélectionner Max Schmelev réponse comme correcte, pas le mien, parce que je viens de mettre quelques remarques dans son code.

    +1 pour donner le crédit à qui il est dû.
    merci beaucoup pour cette réponse. J'ai changer self.categoryId = ko.observable(1); à self.categoryId = ko.observable(); et maintenant tout fonctionne comme un charme 🙂

    OriginalL'auteur Pavlo