2014-09-05 76 views
0

我使用findAll()方法使用nodejs从mongodb获取数据。现在在玉模板引擎,我想显示数据(这基本上是一些测验问题),即只有第一个记录(即第一个问题集合)将显示在最初,然后当'NEXT'按钮将被点击时,然后将显示下一个记录,即第二个测验问题,等等。只从Mongodb获取第二行,并使用Jade显示

现在我能够获取并显示第一个测验问题,但是当我点击“下一步”按钮时,我在Chrome的开发者控制台上发现错误,该控制台说"Uncaught ReferenceError: myquiz is not defined"。现在myquiz是我server.j中的一部分(Mongodb中的集合)。如何在Jade中从myquiz获取第二条记录,并且当用户单击“NEXT”按钮时也如此。由于我在取得第一张唱片方面取得成功,但在此之后无法奏效。

doctype html 

html(lang="en") 

    head 
    script(src="/javascripts/jquery-1.8.2.js") 

    h1= title 
    body 
    div#myquestions 
    ul 
     li #{myquiz[0].Question} 
     li #{myquiz[0].Option1} 
     li #{myquiz[0].Option2} 
     li #{myquiz[0].Option3} 
     li #{myquiz[0].Option4} 
     button(class="Button" id="NextButton") Next 

    script(type="text/javascript"). 
    $(document).ready(function(){ 
     $("#NextButton").click(function() { 
     $("#myquestions").html(myquiz[1].Question,myquiz[1].Option1,myquiz[1].Option2,myquiz[1].Option3,myquiz[1].Option4); 
     }); 
     }); 

从quizprovider.js相关的代码如下:

.... 
.... 
QuizProvider.prototype.getCollection = function(callback) { 
    this.db.collection('myquiz', function(error, quiz_collection) { 
    if(error) callback(error); 
    else callback(null, quiz_collection); 
    }); 
}; 

QuizProvider.prototype.findAll = function(callback) { 
    this.getCollection(function(error, quiz_collection) { 
     if(error) callback(error) 
     else { 
     quiz_collection.find().toArray(function(error, results) { 
      if(error) callback(error) 
      else callback(null, results) 
     }); 
     } 
    }); 
}; 

从app.js文件中的相关代码如下:

玉代码如下

var express = require('express') 
    , routes = require('./routes') 
    , user = require('./routes/user') 
    , http = require('http') 
    , path = require('path') 
    , QuizProvider = require('./quizprovider').QuizProvider; 

var app = express(); 

     app.use(express.logger('dev')); 
     app.use(express.bodyParser()); 
     app.use(express.methodOverride()); 
     app.use(app.router); 
     app.use(require('stylus').middleware(__dirname + '/public')); 
     app.use(express.static(path.join(__dirname, 'public'))); 
    }); 

    app.configure('development', function(){ 
     app.use(express.errorHandler()); 
    }); 

    var qProvider= new QuizProvider('localhost', 27017); 
    ..... 
    ..... 

     app.get('/', function(req, res){ 
      qProvider.findAll(function(error, ques){ 
       res.render('index', { 
        title: 'Questions', 
        myquiz:JSON.stringify(ques) 
       });        
      }); 
     }); 

现在我该如何获取并显示集合中的第二条记录,即第二个测验问题wh用户点击“下一步”按钮。我正确的做法,或者有任何其他方式来实现这一点。请帮助家伙。

回答

0

专家我终于找到了解决这一problem.First我上ques执行JSON.stringify操作,然后检索到的记录转换成使用push动作的Javascript数组data,然后所显示的阵列元件使用jQuery(即data元件)。

$("#myquestions").html(data[0]); 
$("#option1").html(data[1]); 
$("#option2").html(data[2]); 
$("#option3").html(data[3]); 
$("#option4").html(data[4]); 

立即获取并从阵列显示第二记录(“下一步”按钮点击)我用计数器的初始counter.The值被存储在文本框(其是隐藏的),然后将计数器为了从数组中逐个提取记录,然后使用Jquery .html()方法显示这些记录。下面的代码给出:

doctype html 
html(lang="en") 
    head 
    script(src="/javascripts/jquery-1.8.2.js") 
    h1= title 
    body 
    div#myquestions 
    div#option1 
    div#option2 
    div#option3 
    div#option4 
    div#myNextbutton 
     button(class="Button" id="NextButton") Next 
    div#mytextbox 
     input(type="hidden" name="TextBox" id="TextBox" value="4")  

    script(type="text/javascript"). 
    $(function() { 
     var availablTags = !{myquiz}; 
     var data = []; 
     for(var i=0;i<availablTags.length;i++){ 
     data.push(availablTags[i]['Question']), 
     data.push(availablTags[i]['Option1']), 
     data.push(availablTags[i]['Option2']), 
     data.push(availablTags[i]['Option3']), 
     data.push(availablTags[i]['Option4']) 
      } 
     console.log(data); 

     $("#myquestions").html(data[0]); 
     $("#option1").html(data[1]); 
     $("#option2").html(data[2]); 
     $("#option3").html(data[3]); 
     $("#option4").html(data[4]); 
     $("#NextButton").click(function(){ 
      var counter = $('#TextBox').val(); 
      counter++ ; 
      $("#myquestions").html(data[counter++]); 
      $("#option1").html(data[counter++]); 
      $("#option2").html(data[counter++]); 
      $("#option3").html(data[counter++]); 
      $("#option4").html(data[counter]); 
      $('#TextBox').val(counter); 
       }); 
     }); 

这是一个逻辑我能想到的,它works.But如果你们有什么更好的建议,请让我know.Hope的解决方案可以帮助别人谁也面临着同类的问题。