Tengo un problema de la asignación de un objeto Json recibido desde el servidor en un predefinidos en Javascript objeto que contiene todas las funciones necesarias que se utilizan en los enlaces

Código Javascript es el siguiente

function Person(FirstName, LastName, Friends) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
    self.FullName = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    })
    self.Friends = ko.observableArray(Friends);
    self.AddFriend = function () {
        self.Friends.push(new Person('new', 'friend'));
    };
    self.DeleteFriend = function (friend) {
        self.Friends.remove(friend);
    };      
}

var viewModel = new Person();

$(document).ready(function () {
    $.ajax({
        url: 'Home/GetPerson',
        dataType: 'json',
        type: 'GET',
        success: function (jsonResult) {
            viewModel = ko.mapping.fromJS(jsonResult);
            ko.applyBindings(viewModel);
        }
    });
});

HTML:

<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>Full name: <span data-bind="text: FullName" /></p>
<p>#Friends: <span data-bind="text: Friends().length" /></p>
@*Allow maximum of 5 friends*@
<p><button data-bind="click: AddFriend, text:'add new friend', enable:Friends().length < 5" /></p>
<br>
@*define how friends should be rendered*@
<table data-bind="foreach: Friends">
    <tr>
        <td>First name: <input data-bind="value: FirstName" /></td>
        <td>Last name: <input data-bind="value: LastName" /></td>
        <td>Full name: <span data-bind="text: FullName" /></td> 
        <td><button data-bind="click: function(){ $parent.DeleteFriend($data) }, text:'delete'"/></td> 
    </tr>
</table>

Mi ServerSide MVC código para obtener los datos iniciales se parece a:

    public ActionResult GetPerson()
    {
         Person person = new Person{FirstName = "My", LastName="Name",
                        Friends = new List<Person>
                        {
                             new Person{FirstName = "Friend", LastName="Number1"},
                             new Person{FirstName = "Friend", LastName="Number2"}
                        }
        };
        return Json(person, JsonRequestBehavior.AllowGet);
    }

Estoy tratando de usar la asignación plugin para cargar el Json en mi objeto de Javascript, así que todo está disponible para los enlaces (El complemento de la función y la calculada propiedades en el Amigo de los objetos).

Cuando yo uso la asignación plugin no parecen funcionar.
Cuando se utiliza el plugin de la Añadiramigo método no está disponible durante la unión.
Es posible rellenar el JavaScript objeto de la Persona mediante la asignación de plugin o todo debe ser hecho manualmente?

OriginalEl autor DiederikTiemstra | 2012-01-10

1 Comentario

  1. 11

    Usted puede mirar pasar las opciones de asignación para la asignación de complemento, específicamente un create de devolución de llamada como se describe aquí.

    Algo como:

    var mapping = {
        create: function(options) {
            var person = options.data,
                friends = ko.utils.arrayMap(person.Friends, function(friend) {
                   return new Person(friend.FirstName, friend.LastName);   
                });
    
            return new Person(person.FirstName, person.LastName, friends);
        }
    };

    Ejemplo: http://jsfiddle.net/rniemeyer/5EWDG/

    Sin embargo, en este caso, usted no recibe una gran cantidad de energía a partir de la asignación de complemento y sólo podría hacerlo sin llamando a la Persona constructor de sí mismo y la asignación de los Amigos de matriz a la Persona de los objetos en el constructor como:
    http://jsfiddle.net/rniemeyer/mewZD/

    Una otra nota de tu HTML: asegúrese de que los elementos que contiene el contenido, que debe especificar el inicio y final de las etiquetas (span y button no fuera de esta forma en el código). KO tendrá problemas si no se especifica correctamente.

    Muchas gracias! Su respuesta dejó muy claro cómo la asignación de obras.
    Ryan, me he estado preguntando acerca de la utilidad de la cartografía plugin una vez que hayas comenzado la construcción de su propio constructores (como el «no se puede conseguir una gran cantidad de energía a partir de la asignación de plugin» comentarios). He ido por un camino equivocado cuando comience a usar un constructor? Si yo no uso el constructor, no sé cómo manejar mejor anexar los datos del mapa del usuario, con los datos introducidos. Con un constructor que puedo manejar la entrada de usuario, comprobación de errores, seguridad, etc. Sólo estoy poniendo en marcha con knockout y quiere ir por el buen camino. Los pensamientos?
    Si desea que el mejor control, entonces siento que haciendo lo mismo con los constructores es el mejor enfoque. El create devoluciones de llamada de la asignación plugin deja de agregar sus propias propiedades a varios niveles, pero nunca se siente tan limpia a mí. La asignación plugin es ideal cuando se desea activar una estructura en función de características observables sin necesidad de escribir mucho cliente real-sie código.
    FYI que me acabo de enterar de que el knock-out tutoriales recomiendan también el manual de asignación de sus propios objetos para obtener más control (consulte el Paso 2): learn.knockoutjs.com/#/?tutorial=loadingsaving

    OriginalEl autor RP Niemeyer

Dejar respuesta

Please enter your comment!
Please enter your name here