Estoy tratando de enlazar a la par clave/valor de datos con KnockoutJS:

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

En mi HTML yo uso el $enlace de datos:

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

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

</ul>

que se traduce en:

[object Object]

[object Object]

¿Alguien sabe cómo mi enlace debe mirar como si yo quiero ver esta:

name: Chuck

country: USA

en otras palabras…¿cómo puedo mostrar el nombre de la propiedad y el valor de la propiedad?

EDIT: Alguien me señaló en: https://github.com/jamesfoster/knockout.observableDictionary Pero sigo teniendo la esperanza de unirse sin una biblioteca

foreach está pensado para trabajar con matrices. Una buena opción es asignar el objeto a un array que contiene los elementos clave/valor de los accesorios. Echa un vistazo a esta respuesta para hacerlo de una manera: stackoverflow.com/questions/7400387/…

OriginalEl autor Loek | 2012-06-15

4 Comentarios

  1. 6

    Hay una forma más fácil de unión a un par clave-valor mediante Knockout.js. Digamos que tiene un valor de la clave par que tiene el siguiente aspecto

    myItems: [
                { Name: 'Item 1', Value: 1},
                { Name: 'Item 3', Value: 3},
                { Name: 'Item 4', Value: 4}
            ],

    Sólo utilizar el siguiente código html para enlazar con el valor de la clave par.

    <select data-bind="options: myItems, optionsText: 'Name', optionsValue: 'Value'></select>

    Referencias:

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

    OriginalEl autor aholtry

  2. 5

    Intentar algo como esto:

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

    Para 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());

    OriginalEl autor Liu Yue

  3. 3

    Crear una función en el modelo de vista que convierte el objeto de la propiedad de los nombres y los valores en un array de objetos con la clave y el valor de las propiedades que contiene el mencionado nombre y valor.

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

    La plantilla html debe tener el siguiente aspecto:

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

    Esto se traduce en la siguiente salida:

    • nombre: Loek
    • país: países Bajos

    Aquí un violín con un ejemplo de trabajo.

    OriginalEl autor Daryl Wright

  4. 2

    Creo que se debe hacer

    <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());​

    violín http://jsfiddle.net/Aw5hx/

    P. S. nunca he usado knockoutJS antes de este post así que no soy ningún experto mundial.

    Hola Nicolás, gracias por tu rápida respuesta, pero que no es exactamente lo que estoy buscando. En mi caso no sé las llaves del objeto personal. Así que me quiero hacer un foreach sobre el objeto personal y mostrar cada una de las teclas (nombre) y el Valor. Espero que usted me puede ayudar aún más.
    si usted no sabe las claves / valor en el objeto personal, ¿por qué no recorrer en aquellos con una por ciclo y, a continuación, construir el DOM dinámicamente antes de aplicar los enlaces?

    OriginalEl autor Nicola Peluchetti

Dejar respuesta

Please enter your comment!
Please enter your name here