Knockoutjs Beta 3.0 - ¿Cómo se destruye los elementos infantiles?

Question

Actualmente tengo una configuración que se ve así:

    ko.applyBindings(viewModel);

    $(".removeButton").live("click", function() {
        viewModel.ProductCategories.destroy(ko.dataFor(this));
    });

    $(".renameButton").live("click", function() {
        ko.dataFor(this).Name("Renamed Successfully!");
    });

Esto funciona bien para mí hasta que presente el concepto de elementos infantiles. En ese punto, el evento de eliminación ya no funciona para esos elementos.

¿Existe una forma más genérica de "destruir" un elemento?

Ko obviamente sabe el elemento que estoy haciendo clic (ya que puedo cambiar el nombre).

[{"Id":1,"Name":"Bikes","Parent":null,"Children":[{"Id":5,"Name":"Mountain Bikes","Parent":1,"Children":null},{"Id":6,"Name":"Road Bikes","Parent":1,"Children":null},{"Id":7,"Name":"Touring Bikes","Parent":1,"Children":null}]},{"Id":2,"Name":"Components","Parent":null,"Children":[{"Id":8,"Name":"Handlebars","Parent":2,"Children":null},{"Id":9,"Name":"Bottom Brackets","Parent":2,"Children":null},{"Id":10,"Name":"Brakes","Parent":2,"Children":null},{"Id":11,"Name":"Chains","Parent":2,"Children":null]}]

Todos los eventos anteriores funcionarán en cualquier elemento (niño o de otro tipo), excepto el eliminación que solo funciona en elementos raíz.

¿Puedo llamar a eliminar un elemento en sí o tendré que agregar alguna forma de resolver dónde vive dentro de la matriz y destruirlo así?

por ejemplo; Esto es preferible:

    $(".removeButton").live("click", function() {
        ko.dataFor(this).destroy();
    });

a esto:

    $(".removeButton").live("click", function() {
          viewModel.ProductCategories[someindex].Children.destroy(ko.dataFor(this));
    });

Gracias Kohan

Answer 1

El problema principal es determinar quién es la matriz de padres cuando se trata de destruir un elemento.

Varias opciones: en lugar de ko.dataFor, puedes usar ko.contextFor que devolverá un objeto que incluya propiedades como $data, $parent, $parents y $root.

Si sus matrices tienen el mismo nombre, entonces podría hacer algo como: http://jsfiddle.net/rniemeyer/xjjk8/

Si sus matrices tienen nombres diferentes, entonces puede agregar una pista en el elemento del botón para comprender el nombre del padre como: http://jsfiddle.net/rniemeyer/arpnx/

De lo contrario, si realmente quisiera que fuera genérico, entonces podría usar el with vinculante para forzar un bloque de alcance, lo que le permitiría acceder a la matriz de padres a través de $parent. Sin embargo, esta será la matriz sin envolver y realmente quisiéramos el ObservableArray. Con algo de trabajo adicional, puede recorrer las propiedades del padre del padre y comparar la matriz subyacente con su matriz sin envolver para localizar la Real ObservableArray que desearía llamar a destruir con su artículo. Como esto: http://jsfiddle.net/rniemeyer/bbvre/

Finalmente, si tiene cuidado en la forma en que se crean sus objetos, puede impulsar la funcionalidad de destrucción al elemento en sí mismo en lugar de necesitar acceso directamente a los padres. Aquí hay una muestra que muestra agregar un destroyMe Método a un objeto que usa el padre que se pasó a la función del constructor: http://jsfiddle.net/rniemeyer/eeryh/