यह कोई है जो वेब विकास अनुभव के कुछ वर्षों के लिए किया था के लिए कुछ हद तक एक noob के सवाल यह है, लेकिन या तो प्रोग्रामर स्टैक एक्सचेंज या गूगल, मैं फैसला किया है इसे यहाँ पूछने के लिए पर जवाब नहीं पाने के बाद।एक्सप्रेस/Node.js में गतिशील रूप से जेनरेट की गई सामग्री से इनलाइन जावास्क्रिप्ट को कैसे अलग किया जाए?
मैं Node.js के लिए एक्सप्रेस वेब रूपरेखा का उपयोग कर रहा है, लेकिन इस सवाल का किसी भी वेब रूपरेखा या प्रोग्रामिंग भाषा के लिए विशिष्ट नहीं है।
यहां डेटाबेस की पूछताछ की गई गेम की एक सूची है।
table.table
tbody
for game in games
tr
td.span2
img.img-polaroid(src='/img/games/#{game.largeImage}')
// continues further
प्रत्येक रेटिंग ब्लॉक, साथ ही प्रत्येक खरीदें बटन/मॉडल संवाद द्वारा उत्पन्न कर रहे: प्रत्येक खेल इकाई एक एकल तालिका पंक्ति, एक के लिए लूप उपयोग करते हुए उत्पन्न है गेम से मेल खाने वाली आईडी के साथ फॉर-लूप। उदाहरण के लिए, हत्यारे के पंथ के लिए बटन खरीदें आईडी = "मूल्य-हत्यारा-पंथ" होगा। # {variable} - यह है कि आप सर्वर से पास किए गए जेड में एक चर का संदर्भ कैसे देते हैं।
button.btn.btn-primary.btn-mini(id='price-#{game.slug}', href='#buyModal', role='button', data-toggle='modal')
और
.modal.hide.fade(id='modal-#{game.slug}', tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
.modal-header
span.lead Game Checkout
img.pull-right(src='/img/new_visa_medium.gif')
.modal-body
label
i.icon-user
| Name on Card
input.input-medium(type='text')
label
i.icon-barcode
| Card Number
input.input-medium(type='text', placeholder='•••• •••• •••• ••••', maxlength=16)
label
i.icon-time
| Expiration Date
input.input-mini(type='text', placeholder='MMYY', maxlength=4)
label
i.icon-qrcode
| Card Code
input.input-mini(type='text', placeholder='CVC', maxlength=4)
.modal-footer
button.btn(data-dismiss='modal', aria-hidden='true') Cancel
button.btn.btn-primary(id='#{game.slug}') Buy
और
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: true
});
गुणा कि खेल की संख्या से और कहा कि कितने इनलाइन स्क्रिप्ट मैं एक पृष्ठ पर है।
अभी तक इससे भी बदतर, मैं निम्नलिखित मामलों के लिए खाते में करने के लिए है:
- उपयोगकर्ता लॉग-इन नहीं कर रहा है: केवल-पठन मोड में रेटिंग स्क्रिप्ट ऊपर प्रदर्शन।
- उपयोगकर्ता की लॉग-इन, लेकिन अभी तक मतदान नहीं हुआ है:
... उस स्थिति में, निम्न स्क्रिप्ट का उपयोग:
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: false,
click: function (score, event) {
var self = this;
$.meow({
message: 'Thanks for voting. Your rating has been recorded.',
icon: 'http://png-3.findicons.com/files/icons/1577/danish_royalty_free/32/smiley.png'
});
$.ajax({
type: 'POST',
url: '/games/rating',
data: {
slug: $(self).attr('id').slice(1),
rating: score
},
success: function() {
console.log('setting to read-only');
$(self).raty('readOnly', true);
}
});
}
});
- उपयोगकर्ता की लॉग-इन लेकिन रेटिंग से निलंबित: इस विशेष के लिए अभी तक एक और पठन-केवल स्क्रिप्ट कॉपी और पेस्ट करें यदि अन्य स्थिति।
लंबी कहानी संक्षेप में, यह एक बुरा सपना रखरखाव मेरी .jade टेम्पलेट फ़ाइलों में यह सब जावास्क्रिप्ट बनाए रखने की कोशिश हो गया है, और मेरी मार्कअप अस्वीकार्य गंदा लग रहा है।
इसके लिए कोई समाधान क्या है? यह सीआरयूडी अनुप्रयोगों के लिए इस तरह के एक आम परिदृश्य की तरह लगता है। आदर्श रूप से मैं सभी जावास्क्रिप्ट को एक अलग पर ले जाना चाहता हूं।जेएस फ़ाइल। लेकिन अगर मैं कुछ कोड डुप्लिकेशन को हटा सकता हूं, तो यह भी बहुत अच्छा होगा।
समस्या यह है कि यदि मैं इनलाइन जावास्क्रिप्ट को एक अलग फ़ाइल में ले जाता हूं तो मुझे कैसे पता चलेगा कि मैं कौन सा गेम रेटिंग कर रहा हूं? मुझे कैसे पता चलेगा कि किस खरीदें बटन पर उपयोगकर्ता ने क्लिक किया है? क्योंकि एन खेल के लिए मैं एन बटन, एन मोडल संवादों और एन रेटिंग स्क्रिप्ट खरीद की है
अभी वहाँ कोई अस्पष्टता नहीं है। किसी भी प्रोग्रामिंग की इस शैली के बारे में क्या सोचता है, भले ही यह कोड को बनाए रखने का एक भयानक तरीका है।
कृपया नोबॉ के साथ कुछ अंतर्दृष्टि साझा करें!
अग्रिम धन्यवाद।
extends layout
block content
br
ul.nav.nav-pills
if heading === 'Top 25'
li.active
a(href='/games') Top 25
else
li
a(href='/games') Top 25
if heading === 'Action'
li.active
a(href='/games/genre/action') Action
else
li
a(href='/games/genre/action') Action
if heading === 'Adventure'
li.active
a(href='/games/genre/adventure') Adventure
else
li
a(href='/games/genre/adventure') Adventure
if heading === 'Driving'
li.active
a(href='/games/genre/driving') Driving
else
li
a(href='/games/genre/driving') Driving
if heading === 'Puzzle'
li.active
a(href='/games/genre/puzzle') Puzzle
else
li
a(href='/games/genre/puzzle') Puzzle
if heading === 'Role-Playing'
li.active
a(href='/games/genre/role-playing') Role-Playing
else
li
a(href='/games/genre/role-playing') Role-Playing
if heading === 'Simulation'
li.active
a(href='/games/genre/simulation') Simulation
else
li
a(href='/games/genre/simulation') Simulation
if heading === 'Strategy'
li.active
a(href='/games/genre/strategy') Strategy
else
li
a(href='/games/genre/strategy') Strategy
if heading === 'Sports'
li.active
a(href='/games/genre/sports') Sports
else
li
a(href='/games/genre/sports') Sports
if games.length == 0
.alert.alert-warning
| Database query returned no results.
else
table.table
tbody
for game in games
.modal.hide.fade(id='modal-#{game.slug}', tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
.modal-header
span.lead Game Checkout
img.pull-right(src='/img/new_visa_medium.gif')
.modal-body
label
i.icon-user
| Name on Card
input.input-medium(type='text')
label
i.icon-barcode
| Card Number
input.input-medium(type='text', placeholder='•••• •••• •••• ••••', maxlength=16)
label
i.icon-time
| Expiration Date
input.input-mini(type='text', placeholder='MMYY', maxlength=4)
label
i.icon-qrcode
| Card Code
input.input-mini(type='text', placeholder='CVC', maxlength=4)
.modal-footer
button.btn(data-dismiss='modal', aria-hidden='true') Cancel
button.btn.btn-primary(id='#{game.slug}') Buy
tr
td.span2
img.img-polaroid(src='/img/games/#{game.largeImage}')
td
a(href='/games/#{game.slug}')
strong
= game.title
|
if user.userName
button.btn.btn-primary.btn-mini(id='price-#{game.slug}', href='#modal-#{game.slug}', role='button', data-toggle='modal')
i.icon-shopping-cart.icon-white
= game.price
if user.purchasedGames && user.purchasedGames.length > 0
for mygame in user.purchasedGames
if mygame.game.slug == game.slug
script(type='text/javascript')
$('#price-#{game.slug}').removeAttr('href');
$('#price-#{game.slug}').html('<i class="icon-shopping-cart icon-white"></i> Purchased');
div
span(id='_' + game.slug)
span(id='votes', name='votes')
| (#{game.votes} votes)
div
small.muted
div #{game.releaseDate} | #{game.publisher}
div #{game.genre}
p
=game.description
// logged-in users
if user.userName
if game.votedPeople.length > 0
for voter in game.votedPeople
if voter == user.userName || user.suspendedRating
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: true
});
else
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: false,
click: function (score, event) {
var self = this;
$.meow({
message: 'Thanks for voting. Your rating has been recorded.',
icon: 'http://png-3.findicons.com/files/icons/1577/danish_royalty_free/32/smiley.png'
});
$.ajax({
type: 'POST',
url: '/games/rating',
data: {
slug: $(self).attr('id').slice(1),
rating: score
},
success: function() {
console.log('setting to read-only');
$(self).raty('readOnly', true);
}
});
}
});
else
if (user.suspendedRating)
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: true
});
else
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img/',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: false,
click: function (score, event) {
var self = this;
$.meow({
message: 'Thanks for voting. Your rating has been recorded.',
icon: 'http://png-3.findicons.com/files/icons/1577/danish_royalty_free/32/smiley.png'
});
$.ajax({
type: 'POST',
url: '/games/rating',
data: {
slug: $(self).attr('id').slice(1),
rating: score
},
success: function() {
console.log('setting to read-only');
$(self).raty('readOnly', true);
}
});
}
});
else
script(type='text/javascript')
$('#_#{game.slug}').raty({
path: '/img',
round : { down: .25, full: .6, up: .76 },
score: #{game.rating}/#{game.votes},
readOnly: true
});
script(type='text/javascript')
$('##{game.slug}').click(function() {
var game = this;
$.ajax({
type: 'post',
url: '/buy',
data: {
slug: $(game).attr('id')
}
}).success(function() {
$('#price-#{game.slug}').attr('disabled', 'true');
$('#modal-' + $(game).attr('id')).modal('hide');
humane.log('Your order has been submitted!');
});
});
टेक्स्ट की बड़ी दीवार लेकिन एक बहुत अच्छा सवाल। +1 – Ben