1
，所以我不能完全肯定，我正與Backbone.js的正確的做法和我想要做的，但讓我嘗試仍然解釋。Backbone.js的 - 加載意見編程
我正在創建一個移動「遊戲」。遊戲非常簡單，你連接到Facebook並「登錄」，選擇一個級別[Easy | Medium | Hard]並開始遊戲。
遊戲由6個任務，找到使用地理定位的特定區域（您應爲15米的位置內完成任務）。
也爲了幫助您找到位置，在「誰想成爲百萬富翁」的風格得到一些生命線。
我離題了。我使用的是Backbone.js，但它的第一次刺激Javascript MVC，我有點不確定我應該如何使用它。
當玩家告訴他們認爲是在該位置的應用程序，我想是可以的，檢查地點後，將播放到下一個任務（只要不六號和最後一個任務），並簡單地更新他們的分數。
每個任務共享相同的視圖，我想通過Ajax最終填充任務模式。
我最大的問題是如何優雅地從Quest 1到Quest 2。
我使用jQuery & jQueryMobile用下劃線和骨幹。
這裏是我到目前爲止的代碼：
$(document).bind("mobileinit", function() {
$.mobile.hashListeningEnabled = false;
$.mobile.ajaxEnabled = false;
var PROGRESS = 1;
var Quest = Backbone.Model.extend({
defaults: {
id: 0,
message: '',
points: 0,
latitude: '0',
longitude: '0',
clues: {}
},
initialize: function(){
},
addPoints: function(points) {
this.set({points: this.get('points') + points});
},
takePoints: function(points) {
this.set({points: this.get('points') - points});
}
});
var QuestsCollection = Backbone.Collection.extend({
model: Quest,
comparator: function(quest) {
return quest.get('id');
},
getFinalScore: function() {
var points = this.pluck('points');
var total = 0;
$.each(points, function(k, v) {
total += v;
});
return total;
}
});
var QuestView = Backbone.View.extend({
el: '#play',
tagName: 'div',
className: 'quest',
template: _.template($('#play-tpl').html()),
model: Quest,
quest: {},
questNumber: 1,
location: {latitude: 0, longitude: 0},
events: {
'click .amIWarm' : 'checkGeoWarmth',
'click .imThere' : 'complete',
'click .skipQuest' : 'skip'
},
initialize: function() {
this.questNumber = this.options.questNumber;
this.quest = this.options.quest;
},
checkGeoWarmth: function(event) {
console.log(event);
console.log('checkGeoWarmth');
},
complete: function(event) {
console.log('Check that the user is located within 30 metres of the target!');
console.log('If the user is actually at the location, move them on to the next quest and save their points.');
this.questNumber += 1;
PROGRESS += 1;
console.log(PROGRESS);
if (PROGRESS >= 6) {
console.log('Game Over!');
}
},
skip: function(event) {
console.log('Set points to 0');
console.log('Move on to the next quest.');
this.questNumber += 1;
if (this.questNumber >= 6) {
console.log('Game Over!');
}
},
render: function() {
$('.page').hide();
$(this.el).show();
console.log(this.quest);
$(this.el).html(this.template({quest: this.quest}));
}
});
var Game = Backbone.Router.extend({
routes: {
"": "welcome",
"/play/:quest": "play"
},
welcome: function() {
var SplashPage = new SplashView;
SplashPage.render();
},
selectLevel: function() {
console.log('Select Level');
},
play: function(quest) {
var thisQuest = Quests.get(quest);
var QuestPage = new QuestView({quest: thisQuest});
//console.log(QuestPage);
QuestPage.render();
},
gameOver: function() {
var score = Quests.getFinalScore();
// Score
console.log('Your Score is ' + score);
// Save Score
console.log('Send Ajax Request to [/score/save] with [{player_id: 1, facebook_id: 1234567890, score: 440}]')
// Share On Facebook
console.log('Share your score on Facebook?');
// Tweet?
console.log('Share your score on Twitter?');
},
leaderboard: function() {
// Model: Score
// Collection: Scores
// View: Score
}
});
var game = new Game;
Backbone.history.start();
});
我的HTML如下：
<!DOCTYPE html>
<html>
<head>
<title>GeoQuest</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1; user-scalable=1;" />
<link type="text/css" rel="stylesheet" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/geoquest.css" />
</head>
<body>
<div id="splash" class="page" data-role="page">
<script type="text/html" id="splash-tpl">
<a href="#/play/1">Play</a>
<button class="connect">Connect</button>
<button class="disconnect">Disconnect</button>
</script>
</div>
<div id="select-level" class="page" data-role="page">
</div>
<div id="play" class="page" data-role="page">
<script type="text/html" id="play-tpl">
<h1>Quest <%= quest.id %></h1>
<div class="quest-message">
<%= quest.message %>
</div>
<button class="skipQuest" data-role="button">Skip Quest</button>
<button href="/play/2" class="imThere" data-role="button">I'm There</button>
<button class="amIWarm" data-role="button">Am I Warm</button>
</script>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '140750459345068', status: true, cookie: true, xfbml: true});
window.FB = FB;
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/underscore.js"> </script>
<script type="text/javascript" src="js/backbone.js"> </script>
<script type="text/javascript" src="js/json2.js"> </script>
<script type="text/javascript" src="js/geoquest.js"> </script>
<script type="text/javascript" src="js/jquery.mobile.js"> </script>
</body>
</html>
任何幫助或建議十分讚賞。
謝謝！
嗨RKW，感謝回答，你關於你的第一個點肯定是正確的。第二點，我嘗試過，但我一直在收到下劃線模板錯誤。你如何在視圖中重定向到/ play/quest＃。你有一些我可以看看的代碼嗎？ –
重定向將是正常的javascript：window.location.href ='..' – rkw