2016-07-16 96 views
0

我正在尋找先行者待辦教程(http://www.forerunnerdb.com/tutorial/todoList.html),並且難以重複其結果。我知道該教程可能在Node上運行,因此jsviews和jquery等依賴項可能不一定會顯示在索引示例頁面上。但是,有些問題領域我不明白。例如,本節:瞭解先行者教程?

<!-- Create a DB instance and store it globally --> 
    <script type="application/javascript"> 
     window.fdb = new ForerunnerDB(); 
     db = fdb.db('test'); 

     // Ask forerunner to load any persistent data previously 
     // saved for this collection 
     db.collection('todo').load(); 
    </script> 

導致錯誤的發生,其中fdb不是一個函數,而不是定義db。確保在加載依賴關係後放置此JavaScript代碼,即fdb-all.min.js,但仍然出現錯誤。

目前我正在複製成品部分上的代碼,但在主要fdb-all.min.js中添加了jsviews和jquery依賴關係。因此,我的代碼看起來與本教程中的示例相同,但無法運行。

我也在非HTTP環境中運行它,這應該不是問題,因爲我有一個單獨的示例,可在我的桌面上運行時運行。

編輯

如果有幫助,這是我的代碼逐字。

<html> 
    <head> 
     <title>My First ForerunnerDB Todo App</title> 
    </head> 
    <body> 
     <!-- Include the whole forerunner system, bells, whistles and kitchen sink --> 
<script src='http://www.forerunnerdb.com/js/forerunnerdb/dist/fdb-all.min.js'></script> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='http://www.jsviews.com/download/jsviews.min.js'></script> 
<script src='http://www.forerunnerdb.com/js/forerunnerdb/dist/fdb-autobind.min.js'></script> 

     <!-- Create a DB instance and store it globally --> 
     <script type="application/javascript"> 
      window.fdb = new ForerunnerDB(); 
      db = fdb.db('test'); 

      // Ask forerunner to load any persistent data previously 
      // saved for this collection 
      db.collection('todo').load(); 
     </script> 

     <!-- Define a todo item template --> 
     <script type="text/x-jsrender" id="todoItem"> 
      <li data-link="id{:_id}"> 
       <span>{^{:text}}</span> 
      </li> 
     </script> 

     <!-- Create an element where our todo items will be output --> 
     <ul id="todoList"></ul> 

     <!-- Create our item entry form --> 
     <form id="todoForm"> 
      <input id="todoText" type="text" placeholder="Enter todo item" /> 
      <input type="submit" value="Add Item" /> 
     </form> 

     <!-- Use jQuery to hook the onsubmit of our form --> 
     <script type="application/javascript"> 
      $('#todoForm').on('submit', function (e) { 
       e.preventDefault(); 

       // Get the form's todo item text 
       var itemText = $('#todoText').val(); 

       // Add the new item to ForerunnerDB's todo collection 
       db.collection('todo').insert({ 
        text: itemText 
       }); 

       // Now we've added the item to the collection, tell 
       // forerunner to persist the data 
       db.collection('todo').save(); 
      }); 

      $('body').on('click', '#todoList li', function() { 
       // Get the item id for the todo item clicked on 
       db.collection('todo').remove({_id: $(this).attr('id')}); 
       db.collection('todo').save(); 
      }); 
     </script> 

     <!-- Finally we tell forerunner to data-bind the collection to the todo list --> 
     <script type="application/javascript"> 
      db.collection('todo').link('#todoList', '#todoItem'); 
     </script> 
    </body> 
</html> 
+1

這將有助於你如何顯示你是如何加載依賴關係。錯誤'fdb不是函數'不能從這段代碼中看到,因爲'fdb'不是作爲函數的任何地方被調用的。你可以從檢查'typeof ForerunnerDB'開始,看它是否確實定義和可訪問。 – Schlaus

回答

1

我試過你的代碼,問題是你包括來自遠程服務器(這不是一個CDN)的腳本。下載Forerunner腳本並將它們包括在本地使所有的工作。

+0

你可以上傳你的網頁嗎?我用本地代替了Forerunner腳本,現在得到'db.collection.link()'不是一個函數。編輯:沒有必要。得到它了。非常感謝你們! –