Question

（抱歉我的英文）

我是新的Sails，我正在尝试使用jquery。按照此Tutorial of YouTube中的步骤操作。但是我完成了，因为教程是0.9版本，我正在研究0.10，其中链接器不存在，无法使用jquery实现。

在我的loyout.ejs之前

<script src="/js/jquery.min.js"></script>

在视图中我有这个结构

的观点
- 用户
  - new.ejs

我正在尝试这样做：

<script type="text/javascript"> 
 $(document).ready(function(){
  $('#test').text('hello world'); 
 } 
</script> 

<p id="test"> aaa </p>

在控制器UsersController.js中我有这个：

module.exports = {
 new: function(req, res) {
  res.view(); 
 } 
};

我尝试实现的是使用“hello world”更改p元素

加载页面，以了解jQuery已在运行。

我得到的典型错误是jQuery无效。

感谢您的帮助。谢谢！

loyout.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="images/favicon.ico">

    <title>App sails</title>

    <!-- Bootstrap core CSS -->
    <link href="/styles/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="/styles/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/styles/theme.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!--<script src="/js/ie-emulation-modes-warning.js"></script>-->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!--<script src="/js/ie10-viewport-bug-workaround.js"></script>-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <script>
    $( document ).ready(function() {
      alert('hola');
    }
    </script>

    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrap theme</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

      <%- body %>

    <!--SCRIPTS-->
<!--
<script src="/js/jquery.min.js"></script>
<script src="/js/dependencies/sails.io.js"></script>

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/customValidate.js"></script>
<script src="/js/docs.min.js"></script>
<script src="/js/ie-emulation-modes-warning.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>-->
<!--SCRIPTS END-->

  </body>
</html>

Answer 1

首先，确保将jQuery源存储到assets/js/jquery.min.js中。

如果有，请确保在layouts.ejs的顶部加载jQuery（至少，之前你的jQuery脚本是使用过，特别是如果您在其他视图文件（即正文）中使用jQuery代码：

<head>
  ...
  <script src="/js/jquery.min.js"></script> 
</head>

<body>
  ..
  /** your jQuery script use **/
</body>

Answer 2

谢谢大家的回复和评论。我和我注意到有两件事要解决我的问题。

默认情况下在loyout.ejs jQuery结尾处执行的sails因此不起作用，但必须在开头。
我不得不删除导致冲突的其他插件。

Jquery在0.10风帆中不起作用

2 个答案: