Backbone.js的 - 加载意见编程

问题描述：

，所以我不能完全肯定，我正与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>

任何帮助或建议十分赞赏。

谢谢！

答

我一直在玩骨干，也喜欢它。

只是一对夫妇点：

如果您有QuestsCollection.length更换6？你可以动态地添加任务，并把它适当调整
在您QuestView，当你完成任务这样， ~~有它调用this.render（），如果它不是游戏结束，接下来的任务应该显示~~ 创建一个新的QuestView（{下一个任务模型}）并调用.render（）函数或重定向到/ play/quest＃？
要添加的任务，它应该是直线前进添加新任务到集合：QuestsCollection.add（{}）

这里是我的示例程序/游戏，如果你想查询出来。它主要基于官方骨干网上的待办事项计划。JS网站：http://rickcoder.com/bbtest/（使用了一些HTML 5个的本地存储功能，所以它仅适用于新的浏览器）

骨干相关的代码是在这里http://rickcoder.com/bbtest/bbtest.js

嗨RKW，感谢回答，你关于你的第一个点肯定是正确的。第二点，我尝试过，但我一直在收到下划线模板错误。你如何在视图中重定向到/ play/quest＃。你有一些我可以看看的代码吗？ –

重定向将是正常的javascript：window.location.href ='..' – rkw

答

I'mm寻找到这个问题，以及在目前这样别没有确定的答案。

然而，看看这个线程：

http://pinoytech.org/question/7172294/backbone-js-and-jquerymobile-routing-without-hack-or-other-router

你有效地想打电话给JQM的自己changePage。还有一篇文章下周你会发现有用：

http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Backbone.js的 - 加载意见编程

相关推荐