आप एल्म में गतिशील रूप से इनपुट कैसे बनाते हैं?

Question

मैं एक बटन बनाना चाहता हूं, जिसे दबाए जाने पर, फ़ॉर्म में एक नया इनपुट (या टेक्स्टरेरा) जोड़ता है।

Answer 1

यदि आप प्रत्येक बार बटन क्लिक करने के लिए एक टेक्स्ट फ़ील्ड जोड़ना चाहते हैं, तो इसका मतलब है कि आप प्रदर्शित टेक्स्ट फ़ील्ड की संख्या बटन क्लिक किए जाने की संख्या के बराबर होना चाहते हैं। हम एक सिग्नल बना सकते हैं जो हमें बताता है कि सिग्नल पर countIf id का उपयोग कर बटन को कितनी बार क्लिक किया गया है।

यदि हमारे पास इनपुट की एक सूची है, तो हम उन्हें एक दूसरे के नीचे (या इसके अलावा) प्रदर्शित करने के लिए flow का उपयोग कर सकते हैं। यह एक ऐसा फ़ंक्शन लिखने के लिए काफी आगे है जो n लेता है और एक बटन और n टेक्स्ट फ़ील्ड वाली एक सूची तैयार करता है।

तो अब हम सिर्फ lift उपयोग कर सकते हैं हमारे संकेत है कि बटन क्लिक की संख्या की गणना करने के लिए है कि समारोह ऊपर हुक करने, गठबंधन कि flow समारोह, और देखा के साथ, हम एक बटन है कि गतिशील रूप से निवेशों की सृष्टि की है।

(btn, clicked) = Input.button "Click me!" 

-- Count how often the clicked signal is true 
clicks = countIf id clicked 

main = lift2 flow (constant down) $ lift nInputs clicks 

nInputs n = 
    let helper n acc = 
    if n<=0 then btn : acc 
    else 
     -- Input.textField returns a pair containing the field as well as a signal 
     -- that you can use to access the field's contents. Since I don't actually 
     -- ever do anything with the contents, I just ignore the signal here. 
     -- In your real code, you'd probably want to keep the signal around as well. 
     let (field, _) = Input.textField $ "input " ++ (show n) 
     in helper (n-1) $ field : acc 
    in helper n [] 

¹ बस count का उपयोग करके यह संकेत मिलेगा कि सिग्नल कितनी बार बदलता है। चूंकि प्रत्येक क्लिक सिग्नल के मान को सही में बदलने का कारण बनता है और फिर झूठ पर वापस आ जाता है, जो प्रति क्लिक 2 परिवर्तनों की गणना करेगा। countIf id का उपयोग करके हम केवल सिग्नल सत्य होने की संख्या और इस प्रकार क्लिक की संख्या की गणना करते हैं।

Answer 2

एल्म 0.8 के रूप में, यह वास्तव में किया जा सकता है। the release announcement देखें, online reference और code example के अनुभाग समूह देखें।