140 अक्षरों से गिनने के लिए होम पेज पर एक जावास्क्रिप्ट डिस्प्ले जोड़ें। (रेल ट्यूटोरियल, द्वितीय एड, अध्याय 10, व्यायाम 7)

Question

यह अभ्यास थोड़ा मुश्किल था। अनुमान लगाया कि मैं यह देखने के लिए अपना समाधान पोस्ट करूंगा कि किसी ने इसे अलग किया है या यदि कोई बेहतर तरीका जानता है।

मुझे एसेट पाइपलाइन का उपयोग करने के लिए सर्वोत्तम प्रथाओं पर यकीन नहीं है .. उदाहरण के लिए, application.js मेनिफेस्ट फ़ाइल में चीजों को रखने के लिए सही क्रम, या चीज़ों को lib बनाम ऐप में कब रखना है। मैं इसे काम करने के लिए प्रयास करने के लिए बस lib में निम्नलिखित डाल दिया।

---

Michael Hartl's Rails Tutorial 2nd ed अध्याय 10 से

, व्यायाम 7:

(चुनौतीपूर्ण) 140 अक्षरों से उलटी गिनती होम पेज के लिए एक जावास्क्रिप्ट प्रदर्शन जोड़ें।

सबसे पहले, मैंने यह post about jQuery Twitter-like countdowns पढ़ा, जिसने कोड को ऐसा करने के लिए प्रदान किया। इस तरह देखने के लिए

इसके बाद, मैं, अपडेट की/विचारों/साझा/_micropost_form.html.erb: फिर

<%= form_for(@micropost) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="field"> 
     <%= f.text_area :content, placeholder: "Compose new micropost..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-large btn-primary" %> 
    <span class="countdown"></span> 

<% end %> 

, मैं lib में एक javascripts निर्देशिका और कहा कि फ़ाइल

lib/संपत्ति बनाई

function updateCountdown() { 
    // 140 is the max message length 
    var remaining = 140 - jQuery('#micropost_content').val().length; 
    jQuery('.countdown').text(remaining + ' characters remaining'); 
} 

jQuery(document).ready(function($) { 
    updateCountdown(); 
    $('#micropost_content').change(updateCountdown); 
    $('#micropost_content').keyup(updateCountdown); 
}); 

अंत में /javascripts/microposts.js, मैं सीएसएस का एक छोटा सा जोड़ा

एप्लिकेशन/आस्तियों/स्टाइलशीट/custom.css.scss

/* micropost jQuery countdown */ 

.countdown { 
    display: inline; 
    padding-left: 30px; 
    color: $grayLight; 
} 

अंत में,/ऐप्स/आस्तियों/javascripts को निर्देश जोड़ने application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require microposts 
//= require_tree . 

अंतिम परिणाम इस http://grab.by/dbC6

तरह लग रहा है

---

प्रश्न: यह प्रकट ली डाल करने के लिए गलत नहीं होगा //= require_tree .

उदाहरण के लिए, यह काम करता है लेकिन मुझे यकीन नहीं है कि अंतर क्या होगा, पेड़ के ऊपर की रेखा को जोड़कर बनाम अंतर क्या होगा।

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 
//= require microposts 

Answer 1

मुझे लगता है कि my solution posted here in SO तुम्हारा से काफी अलग हैं कि मैं विनम्रतापूर्वक एक जवाब के रूप में पोस्ट कर सकते हैं।

Answer 2

आप CoffeeScript का उपयोग कर इसे सरल कर सकते हैं:

/app/assets/javascripts/microposts.js.coffee

 
updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

और जैसा कि jonyamo ने उल्लेख किया है, तो आप को छूने की जरूरत नहीं है application.js//= require_tree . पहले ही चाल है।

Answer 3

मुझे नहीं पता क्यों, लेकिन वह समाधान केवल कॉफी स्क्रिप्ट का उपयोग करके मेरे लिए काम करता था। मैंने इसे जावास्क्रिप्ट के साथ कार्यान्वित करने का प्रयास किया, लेकिन किसी भी तरह से कुछ भी प्रदर्शित नहीं किया: न ही उलटी गिनती, न ही पाठ के शेष भाग "वर्ण शेष"।

तो यहां मैंने जो किया है उसका एक सारांश है।

चरण 1: बनाने के एक एप्लिकेशन/javascripts/microposts.js.coffee फ़ाइल

updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

एनबी: होने के नाते है कि इसके एप्लिकेशन/javascripts फ़ोल्डर में रखा, मैं application.js अद्यतन करने की आवश्यकता नहीं किया था फ़ाइल।

चरण 2:

<%= form_for(@micropost) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="field"> 
     <%= f.text_area :content, placeholder: "Compose new micropost..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-large btn-primary" %> 
    <span class="countdown"></span> 
<% end %> 

चरण 3: custom_css.css.scss फ़ाइल

/* micropost jQuery countdown */ 

.countdown { 
    display: inline; 
    padding-left: 10px; 
    color: $grayLight; 
} 

चरण 4 के लिए सीएसएस का एक सा लागू: _micropost_form.html.erb आंशिक अद्यतन का आनंद नतीजा और खुश रहें कि यह सब काम करता है :)

Answer 4

यहां एड्रियनो के समाधान के आधार पर मेरा कॉफ़ीस्क्रिप्ट संस्करण है। यह व्हाइटस्पेस को अनदेखा करता है, दृश्य में रिक्त divs जोड़ने में शामिल नहीं है, और एक बार आप शून्य संख्या प्राप्त करने के बाद एक त्रुटि वर्ग भी जोड़ता है।

updateCountdown = -> 
    text = jQuery('#micropost_content').val() 
    text = text.replace(/\s/g, ''); 
    remaining = 140 - text.length 
    jQuery('.countdown').text remaining + ' characters remaining' 
    jQuery('.countdown').addClass 'alert alert-error' if remaining < 0 
    jQuery('.countdown').removeClass 'alert alert-error' if remaining > 0 

jQuery(document).ready -> 
    jQuery('#new_micropost').append '<span class="countdown">140 characters remaining</span>' 
    jQuery('#micropost_content').change updateCountdown 
    jQuery('#micropost_content').keyup updateCountdown 
    return 

Answer 5

मेरे microposts.js.coffee सभी जो पहले जवाब के लिए चर remaining के मूल्य के आधार शेष पात्रों में से रंग बदलने के लिए jQuery .css method का उपयोग करता है और अधिक बारीकी से की twitter

updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 
    jQuery(".countdown").css "color", (if (140 >= remaining >= 21) then "gray") 
    jQuery(".countdown").css "color", (if (21 > remaining >= 11) then "black") 
    jQuery(".countdown").css "color", (if (11 > remaining) then "red") 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

धन्यवाद व्यवहार दर्पण ।

Answer 6

मैंने ब्रेट्स ट्यूटोरियल में इस अभ्यास के माध्यम से मुझे प्राप्त करने के लिए ब्रेट का कोड इस्तेमाल किया, हालांकि मेरे पास मामूली परिवर्तन है। जब मैं एक अलग पृष्ठ पर नेविगेट किया गया, तो वापस घर पर .countdown तत्व से गायब पाठ के साथ समस्याएं थीं। कुछ मामूली शोध और help from another answer on SO के साथ मुझे एहसास हुआ कि कारण टर्बोलिंक्स था। ब्रेट के कोड में मेरा परिवर्तन ready की बजाय page:change ईवेंट पर बाध्यकारी है, नीचे है। मुझे आशा है कि यह कुछ अन्य लोगों की मदद करेगा।

function updateCountdown() { 
    // 140 is the max message length 
    var remaining = 140 - jQuery('#micropost_content').val().length; 
    jQuery('.countdown').text(remaining + ' characters remaining'); 
} 

function micropostChange() { 
    $('#micropost_content').change(updateCountdown); 
} 

function micropostKeyup() { 
    $('#micropost_content').keyup(updateCountdown); 
} 

jQuery(document).ready(function($) { 
    updateCountdown(); 
    micropostChange(); 
    micropostKeyup(); 
    jQuery(document).on('page:change', function($) { 
    updateCountdown(); 
    micropostChange(); 
    micropostKeyup(); 
    }); 
}); 

Answer 7

क्रम चरित्र में शून्य से बचने के लिए उलटी गिनती मैं आंशिक _micropost_form.html.erb को यह सीमा जोड़ा में, तो यह 140 अक्षरों में आप बंद हो जाता है:

<%= f.text_area :content, maxlength:140, placeholder: "Compose new micropost..." %>