[英]How to separate inline javascript from dynamically generated content in Express/Node.js?
對於有幾年Web開發經驗的人來說，這是一個有點無聊的問題，但是在沒有在Programmer Stack Exchange或Google上找到答案之后，我決定在這里問一下。
我正在使用Node.js的 Express Web框架，但這個問題並不特定於任何Web框架或編程語言。
這是從數據庫中查詢的游戲列表。 每個游戲實體都是一個表行，使用for循環生成：
table.table
tbody
for game in games
tr
td.span2
img.img-polaroid(src='/img/games/#{game.largeImage}')
// continues further
每個Rating塊，以及每個Buy按鈕/模態對話框都由for循環生成，其id與游戲匹配。 例如，刺客信條的購買按鈕將具有id =“price-assassins- creed ” 。 ＃{variable} - 是如何引用Jade中的變量，從服務器傳入的。
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模板文件中維護所有這些JavaScript，並且我的標記看起來令人無法接受。
這有什么解決方案？ 這似乎是CRUD應用程序的常見場景。 理想情況下，我想將所有javascript移動到單獨的.js文件中。 但是，如果我可以刪除一些代碼重復，那也會很棒。
問題是如果我將內聯javascript移動到一個單獨的文件，我怎么知道我評分哪個游戲？ 我如何知道用戶點擊了哪個購買按鈕？
現在沒有歧義，因為對於N場比賽，我有N個購買按鈕， N個模態對話框和N個評級腳本。 無論人們如何看待這種編程風格，維護代碼都是一種糟糕的方式。
請與noobie分享一些見解！
先感謝您。
這是我的games.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!');
});
});
這太久了，無法閱讀。 無論如何，我想我得到了你所說的要點，並會使用這樣的格式：
<div id="some_container">
<!-- The following div would be generated in each iteration of the for loop you speak of -->
<div class="item-container" data-game-name="Your game name" data-game-id="23">
<span class="button delete-button">X</span>
</div>
</div>
並且您的腳本將具有委托（以最大限度地減少綁定的數量）：
$(document).ready(function () {
$("#some_container").on("click", ".delete-button", function () {
var $this = $(this);
var $container = $this.closest(".item-container");
var game_name = $container.data("game-name");
var game_id = $container.data("game-id");
// Do whatever with the above 2 variables
});
});
至於模態的東西，你可以創建一個<div> ，它有一個“模板”，可以顯示什么。 然后，當你點擊任何按鈕時，你使用如上所述的邏輯（獲取第一個父.item-container來獲取項目的詳細信息，他們用這些信息填寫模態中的“模板”。然后，這樣， “確定”按鈕不需要一百萬個硬編碼的東西 - 只需一個 - 從模板中獲取信息並進行任何調用或提交表單。
如何調試從 CoffeeScript 生成的 Node.js/JavaScript 代碼？
[英]How to debug Node.js/JavaScript code generated from CoffeeScript?
在 Node.Js 中使用請求抓取 javascript 生成的內容
[英]Scraping javascript generated content using request in Node.Js
如何隱藏URL中的內容但仍然需要在node.js中發送到服務器並表達。
[英]How to hide content from URL but still need to send to server in node.js and express.?
node.js / socket.io如何分離html的javascript？
[英]node.js/socket.io how to separate javascript of the html?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.