Comment lier une largeur/hauteur div pour former des champs?

Question

Je veux créer un nombre de div s que je peux déplacer et redimensionner, et lier leurs width, height, etc. à un objet dans un tableau. Donc, si je crée six divs, j'ai six objets dans mon tableau, chaque objet ayant .width, .height, etc.

Je ne comprends pas très bien comment je lierais le texte d'entrée et d'étendue aux propriétés de l'objet tableau en utilisant knockout.js. Voici ma tentative:

var counter = 0; 
var objects = []; 

$(document).ready(function() { 
    dostuff($("#main")); // give it a target container div 
}); 

function dostuff(target) { 
    counter++; 
    // create a div containing a span and an input that binds to knockout.js 

    target.append('<div id="d' + counter + '">width:<span id="d' + counter + 
     '" data-bind="text:objects[' + counter + '].width"></span>' + 
     '<input type="text" id="d' + counter + 
     '" data-bind="value:objects[' + counter + '].width"/></div>'); 

    var a = $("#d" + counter); 
    a.css("position", "absolute"); 
    a.css("width", "100px"); 
    a.css("height", "100px"); 
    a.css("background-color", "#" + 
     Math.ceil(Math.random()*9) + "0" + 
     Math.ceil(Math.random()*9) + "0" + 
     Math.ceil(Math.random()*9) + "0"); 
    a.resizable({ 
     stop: function (e, ui) { 
      this.childNodes[2].value = ui.size.width; 
     } 
    }); 
    objects[counter] = { width: "100px", height: "100px", 
     top: "0px", left: "0px" }; 
    ko.applyBindings(objects[counter]); 
} 

Comment pourrais-je obtenir le objects[1].width de se lier à la valeur <input> de la div d1?

Answer 1

La quantité minimale de changements que vous devez faire pour obtenir ce faire serait de faire quelque chose comme:

target.append('<div id="d' + counter + '" data-bind="style: { width: width , height: height, top: top, left: left } }">width:<span id="d' + counter + 
     '" data-bind="text: width"></span>' + 
     '<input type="text" id="d' + counter + 
     '" data-bind="value: width"/></div>'); 

Ainsi, celui-ci utilise la style lie votre principale div. De plus, puisque vous appelez applyBindings on objects [counter] vous pouvez référencer les propriétés directement dans les bindings (plutôt que par les objets [counter]).

Si vous appelez cette fonction plusieurs fois, vous devrez faire attention à la façon dont vous appelez ko.applyBindings. Si vous ne passez pas un deuxième paramètre, il s'appliquera à l'ensemble du document. Vous voulez vraiment seulement faire ça une fois. Dans votre cas, vous voudrez probablement passer un second paramètre pour indiquer l'élément racine exact pour commencer. Donc, vous appelleriez quelque chose comme ko.applyBindings(objects[counter], $("#d" + counter)[0]);

Je ne connais pas votre cas d'utilisation exact, mais si c'était moi, je créerais d'abord mon tableau d'objets et ensuite j'utiliserais un modèle pour construire les divs. Ensuite, dans le balisage, j'aurais un conteneur qui appelle la liaison template avec l'option foreach passant le tableau. Ensuite, vous créez un modèle qui contient le balisage pour chaque div. De cette façon, vous pouvez éviter de créer le balisage en tant que chaînes. Si vous voulez un exemple de faire quelque chose comme ça, faites le moi savoir.

Espérons que cela aide.