2013-02-11 108 views
0

我想在線跟隨一個簡單的骨幹教程。問題是,當我點擊「發佈」時,推文發佈在日誌中,但立即清除。我不知道爲什麼控制檯在打印出tweets.toJSON()後自行清理。我使用node和livereload2在保存後加載頁面。我不認爲這是livereload,因爲無論livereload是否運行,行爲都是相同的。骨幹jQuery的調試鉻控制檯不斷清除輸出

  1. 一切都包裹在自我調用匿名jQuery的功能範圍我認爲。這樣變量就不會暴露在DOM中的窗口級別。
  2. 它將JQuery變量作爲$符號使用,以便我可以在函數內部使用它。

我正確地讀這個嗎?

謝謝你的幫忙!

<html> 
<head> 
    <title>Backbone Twitter App</title> 
</head> 
<body> 
    <h1> Backbone for twitter </h1> 

    <form id="new-tweet"> 
     <label>Author:</label> <input id="author-name" name="author-name" type="text" /> 
     <label>Status:</label> <input id="status-update" name="status-update" type="text" /> 
     <button>Post</button> 
    </form> 

    <hr/> 


    <script type="text/javascript" src="underscore.js"></script> 
    <script type="text/javascript" src="jquery-1.9.0.js"></script> 
    <script type="text/javascript" src="backbone.js"></script> 


    <script type="text/javascript"> 

     (function($) { 
      var Tweet = Backbone.Model.extend({ 
       defaults:function(){ 
        return { 
         author: '', 
         status: '' 
        } 
       } 

      }); 

      var TweetsList = Backbone.Collection.extend({ 
       model: Tweet 
      }); 

      var tweets = new TweetsList(); 

      $(document).ready(function(){ 
       $('#new-tweet').submit(function(ev){ 
        console.log('button pressed'); 
        var tweet = new Tweet({author: $('#author-name').val(), status: $('#status-update').val()}); 
        tweets.add(tweet); 
        console.log(tweets.toJSON()); 
       }); 
      }); 
     })(jQuery); 

    </script> 
</body> 
</html> 

回答

0

您的問題是當您單擊按鈕並重新加載頁面時,表單正在提交。

在submit()方法中,您可以調用ev.preventDefault()來停止提交表單。

+0

是的,就是這樣。謝謝! – 2013-02-11 03:20:22

+0

我還有一個問題。我需要寫 (函數($){ }(jQuery) 我認爲這會給我的變量一個局部範圍,但在進一步閱讀時,它的意思是讓我使用$而不與其他庫衝突。編寫java代碼的最佳做法是什麼? – 2013-02-11 03:44:47

+0

就像你說的,當你的網站有另一個與jQuery衝突的框架(如Prototype)時,你只需要使用(function($){}(JQuery))。在這裏,你不需要使用它,對於變量作用域,你在{}塊內部聲明的任何變量都保持爲local,唯一的例外是當你在全局作用域中聲明一個具有相同名字的變量時。但是,您可以通過在{}塊內使用var thevariable = 18;來解決該問題。 – 2013-02-11 20:07:43