Come si legano i dati verso l'alto CSS, a sinistra, la larghezza e l'altezza di un elemento DOM?

Question

Sto cercando di utilizzare KnockoutJS per costruire un cruscotto interattivo con associazioni di dati su diversi aspetti della proprietà style; cioè left, top, width e height. Ad esempio, sto utilizzando jQuery UI con ui-trascinabili ed effetti ui-ridimensionabile per consentire agli utenti di trascinare i pannelli in giro su una tela e li ridimensiona comunque meglio credono. Senza KnockoutJS, mi è stato semplicemente l'iterazione di ogni div e rubare questi oggetti di l'elemento dom. Sono sicuro che c'è un modo migliore utilizzando KnockoutJS, giusto?

Per spiegare il mio problema un po 'meglio, prendere in considerazione due pannelli affiancati:

<div id='dashboard'> 
  <div id='panel1' class='ui-draggable ui-resizable' data-bind='?????'> 
    <!-- content goes here -->
  </div> 
  <div id='panel2' class='ui-draggable ui-resizable' data-bind='?????'> 
    <!-- content goes here --> 
  </div> 
  <button data-bind='click: send'>Update</button> 
</div> 

Il mio modello vista simile a questa (nota: pseudo codice per brevità):

var viewModel = { 
  panels: [ 
   { id: 'panel1', left: 0, top: 0, width: 50; height: 50 }, 
   { id: 'panel2', left: 50, top: 0, width: 50; height: 50 } ], 
  send: function() { 
   ko.utils.postJson( location.href , { panels: this.panels } ); 
  } 
}; 
ko.applyBindings( '#dashboard', viewModel ); 

Vorrei impegnare in modo tale che quando un utente dimensioni qualsiasi elementi div (es. I pannelli), che sarebbe quindi aggiornare il ViewModel sottostante utilizzando il costruito nel dati OnMouseUp vincolanti. Poi, quando l'utente fa clic sul pulsante "Aggiorna", Vorrei poi inserire le coordinate al server.

Sto pensando che potrebbe avere qualcosa a che fare con modelli personalizzati, ma anche lì mi sono imbattuto in alcune complessità che non riuscivo a cogliere nel gestire gli eventi del mouse su ogni pannello.

<script type='text/html' id='panelTemplate'>
    <div class='ui-draggable ui-resizable' 
         style='top: ${ top }; left: ${ left }; width: ${ width }px; height: ${ height }px;'>
        <!-- content goes here -->
    </div>
</script>

idee?

Answer 1

ho avuto esattamente lo stesso problema: bind un modello KnockoutJS alla raccolta di div trascinabili e ridimensionabili. La soluzione è quella di utilizzare personalizzato vincolante e gestire l'evento di fine del ridimensionamento e la fine di resistenza, come spiego qui .

$(document).ready(function () {
            $('#btnSave').click(function () {
                $.ajax({
                    url: '/Save.ashx',
                    contentType: "application/json; charset=utf-8",
                    type: 'POST',
                    dataType: 'json',
                    data: ko.toJSON(viewModel),
                    error: function () { alert("ajax error"); }
                });
            });

            ko.bindingHandlers.jqDraggableResizable = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var obj = valueAccessor();
                    var $elem = $(element);

                    element.dataObj = obj;

                    $elem.resizable({
                        stop: function (event, ui) {
                            this.dataObj.H(ui.size.height);
                            this.dataObj.W(ui.size.width);
                        }
                    });

                    $elem.draggable({
                        stop: function (event, ui) {
                            this.dataObj.X(ui.position.left);
                            this.dataObj.Y(ui.position.top);
                        }
                    });
                }
            }

            ko.applyBindings(viewModel);
        });

Answer 2

Con il passare del tempo il modo in cui lo fa non ero in grado di vedere la soluzione di verde in JSFiddle e la soluzione da Awais sembrava un po 'lunga quindi ho slugged attraverso di essa un po'.

Ho trovato le seguenti opere di legame per l'impostazione della larghezza. Le parentesi e 'px' sembrano essere importanti. Nel mio caso 'aWidth' è la larghezza di un tag div.

data-bind="style: {width: AWidth() + 'px'}"

Answer 3

Questa domanda è stato risposto sopra il KnockoutJS Google Group da uno sviluppatore di nome brillante verde.

Ha dimostrato come farlo utilizzando una libreria di estensione personalizzata (che ha costruito) per KnockoutJS. La sua soluzione consente eventi jQueryUI supplementari di essere "associabile" (cioè. Drag & ridimensionamento). Egli ha poi postato la sua soluzione insieme ai suoi eliminazione diretta-ext.js il file su JSFiddle per me di utilizzare e imparare da esso.

Grazie ancora, verde ! :)

Answer 4

sono stato in grado di farlo funzionare con una soluzione semplice, si costruisce fuori vista Ryans.

Questo mi permette di salvare i miei cambiamenti in tempo reale come elementi goccia mi trascina, con BreezeJS

in viewmodel

ko.bindingHandlers.draggable = {
    init: bindDraggable
};

function bindDraggable(element, value) {
    $(element).draggable({
        stop: onStopDrag
    });

    function onStopDrag(event, ui) {
        ko.dataFor(element).PositionX(ui.position.left);
        ko.dataFor(element).PositionY(ui.position.top);
        datacontext.saveChanges(); //if you want real time updating on drop
    }
}

e, a mio avviso

<div data-bind="foreach: posts">
<div class="BoardPost" data-bind="style: { top: PositionY() + 'px', left: PositionX() + 'px' }, draggable:null">
    <div class="Title" data-bind="text: Content"></div>
</div>