2010-11-10 42 views
18

Estoy trabajando con los Grupos de Google en los foros de Knockout para obtener ayuda con esto también, pero me imagino que un público más grande nunca puede dañar la situación.Knockoutjs con jQuery UI Sortable

Estoy tratando de hacer que KO trabaje con una situación usando el complemento "ordenable" de jQuery UI. Tengo mi código publicado aquí.

http://www.pastie.org/1285716

El intento de utilizar un enlace a medida ...

 ko.bindingHandlers.onReceiveItem = { 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
       $(element).bind("sortreceive", function (event, ui) { 
        ko.bindingHandlers.onReceiveItem.update(element, valueAccessor, allBindingsAccessor, viewModel); 
       }); 
      }, 
      update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
       var value = ko.utils.unwrapObservable(valueAccessor()); 
       var bindings = allBindingsAccessor(); 
      } 
     }; 

El objetivo es que cuando la clasificación ordenada recibe un artículo, se puede conseguir el artículo y añadirlo a la otra observableArray.

Aunque esto no me funciona del todo. Tengo dificultades para que el evento se dispare como quiero. La forma en que lo tengo configurado, dispara, pero solo devuelve un valor 'verdadero/falso'. Esperaba que alguien más pudiera tener una idea de lo que estoy haciendo mal y saber cómo solucionarlo.

(para usar el código, es necesario hacer referencia a

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="Stylesheet" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script> 

en la parte superior, y luego la versión más reciente de Knockout (1.1.1)

http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.1.debug.js

+0

[https://github.com/rniemeyer/knockout-sortable](https://github.com/rniemeyer/knockout-sortable) Knockout.js 2.0 esta es una gran aplicación. – Joe

Respuesta

10

no lo hice darse cuenta Steve had already answered this antes de que yo haya terminado. Aquí tienes una forma ligeramente diferente a él.

ordenable hace esto mucho más difícil, esta woul Ha sido mucho más fácil con un enlace de arrastrar y soltar vinculado a cada producto. El problema con ordenar es que usted es vinculante en la lista completa en lugar de los artículos.

http://www.pastie.org/1432093

+0

Gracias, y también debo agradecer a Steve. Nunca recibí un correo electrónico que me respondiera, así que supuse que se había quedado en el camino. Supongo que olvidé suscribirme al hilo.Este ejemplo es excesivamente útil y me ahorrará mucho tiempo en lo que necesito hacer con él. – Ciel

+0

Cabe señalar que esta era una solución KO 1.0 y que muchas cosas han cambiado desde entonces. Ryan Niemeyer ha revisado la clasificación de post KO 2 en este [complemento sólido] (http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html) – madcapnmckay

16

volví a trabajar la muestra y venía con un bindingHandler casi completa, que no requiere un atributo id y también se encarga de reordenamiento. Aquí está el código:

http://jsbin.com/knockoutsortable/20/edit

uso:

  • Se trata de utilizar la unión de averiguar cuál es la matriz asociada en el modelo de vista template.foreach.

  • Puede usar databind = "foreach: Products, sortable: true" para habilitar la clasificación dentro de una única matriz sin opciones.

  • Está trabajando con Objetos de Array observables.

  • Está construyendo el objeto ordenable jQuery por sí mismo, puede pasar el mismo objeto de opciones en el enlace que en el constructor jQuery.sortable.

+1

Esta es una gran respuesta. Yo era capaz de usarlo para cambiar el orden de clasificación para un nocaut observableArray añadiendo el siguiente después de su llamada newArray.splice:. $ (viewModel.items()) cada uno (function (índice) {var \t newSortOrder = índice + 1; \t var thisItem = viewModel.items() [index]; \t thisItem.sortOrder (newSortOrder); }); – Reaction21

+0

@ Guillaume86 Lamentablemente su solución no funciona con Knockout> v3.1.0 Los elementos desaparecen de aparecer dos veces al ordenar – RHAD

+0

@Richard lo siento Cambié a angular hace unos años ya no uso knockout – Guillaume86

Cuestiones relacionadas