फ़ील्ड बनाने के लिए div चौड़ाई/ऊंचाई को कैसे बांधें?

Question

मैं div एस की संख्या बनाना चाहता हूं जिसे मैं स्थानांतरित और आकार बदल सकता हूं, और एक सरणी में किसी ऑब्जेक्ट में width, height आदि को बांध सकता हूं। इसलिए, अगर मैं छह divs बनाता हूं, तो मेरे पास मेरी सरणी में छह ऑब्जेक्ट हैं, प्रत्येक ऑब्जेक्ट में .width, .height, आदि

मुझे समझ में नहीं आता कि मैं इनपुट को बाध्य करता हूं और सरणी ऑब्जेक्ट गुणों का उपयोग करके टेक्स्ट को कैसे स्पैन करता हूं knockout.js।

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]); 
} 

मैं कैसे objects[1].width div d1 के <input> मूल्य के लिए बाध्य करने के लिए मिल जाएगा: यहाँ मेरी प्रयास है?

Answer 1

आप ऐसा करने के लिए की तरह कुछ कर रहे होते पाने के लिए बनाने के लिए होता है कि परिवर्तन की न्यूनतम राशि:

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>'); 

तो, यह style का उपयोग करता है अपने मुख्य div पर बाध्यकारी। इसके अलावा, चूंकि आप ऑब्जेक्ट्स पर काउंटर बाइंडिंग को कॉल कर रहे हैं [काउंटर] आप सीधे बाइंडिंग में गुणों का संदर्भ दे सकते हैं (ऑब्जेक्ट्स [काउंटर] के बजाए)।

यदि आप इस फ़ंक्शन को कई बार कॉल कर रहे हैं, तो आप ko.applyBindings पर कॉल करने के तरीके से सावधान रहना चाहेंगे। यदि आप दूसरा पैरामीटर पास नहीं करते हैं, तो यह पूरे दस्तावेज़ पर लागू होगा। आप वास्तव में केवल एक बार ऐसा करना चाहते हैं। आपके मामले में, संभवतः आप प्रारंभ करने के लिए सटीक रूट तत्व को इंगित करने के लिए एक दूसरा पैरामीटर पारित करना चाहते हैं। तो, आप ko.applyBindings(objects[counter], $("#d" + counter)[0]);

मुझे कुछ सटीक उपयोग के मामले के बारे में नहीं पता, लेकिन अगर यह मैं था, तो मैं पहले ऑब्जेक्ट्स की अपनी सरणी बनाउंगा और फिर divs बनाने के लिए टेम्पलेट का उपयोग करूंगा। फिर, मार्कअप में मेरे पास एक कंटेनर होगा जो template को foreach विकल्प के साथ बाध्यकारी करता है। फिर, आप एक टेम्पलेट बनायेंगे जिसमें प्रत्येक div के लिए मार्कअप शामिल है। इस तरह आप मार्कअप को स्ट्रिंग के रूप में बनाने से बच सकते हैं। अगर आप ऐसा कुछ करने का उदाहरण चाहते हैं, तो मुझे बताएं।

उम्मीद है कि इससे मदद मिलती है।