Tengo los siguientes modelos:

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;
    });
}

Quiero ofrecer un menú desplegable para seleccionar la categoría, pero no tengo ni idea de cómo se unen.
Tal vez he utilizado el enfoque equivocado con mis modelos, pero que es más probable que ¿cómo puedo obtener mis datos desde el servidor así que he tratado de envolver mi JS en torno a eso.

He intentado algo como esto:

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

Pero no entiendo cómo conectar el menú desplegable valor para el modelo categoryId.

Aquí es un violín con un trabajo de unión para el nombre de la propiedad.

OriginalEl autor kannix | 2012-11-27

2 Comentarios

  1. 20

    Para su cuadro de lista deberá especificar: options, optionsText, optionsValue, y value.
    value (que es el valor seleccionado actualmente) debe apuntar a su model.categoryId(). Y optionsValue es el nombre de la propiedad donde para obtener los valores de la lista:

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

    Y eso es todo. Y el trabajo de violín: http://jsfiddle.net/Y7Nrc/

    thx por este rápido y útil respuesta 🙂

    OriginalEl autor Max Shmelev

  2. 10

    Según Max Schmelevs respuesta, lo cual es correcto, esta funcionalidad no, no cambia el objeto JSON al cambiar el elemento de una lista desplegable.

    Así que aquí están mis correcciones para su código:

    Código 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>

    Código 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'));

    !!!IMPORTANTE!!!

    Si este enfoque responde a su pregunta, por favor seleccione Max Shmelev la respuesta como correcta, no la mía, porque sólo he puesto algunos comentarios en su código.

    +1 para dar crédito donde es debido.
    muchas gracias por esta respuesta. He de cambiar self.categoryId = ko.observable(1); a self.categoryId = ko.observable(); y ahora todo funciona como un encanto 🙂

    OriginalEl autor Pavlo

Dejar respuesta

Please enter your comment!
Please enter your name here