ndoojs文档

入门示例

从一个示例介绍ndoojs的使用。示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>started-ndoojs</title>
  </head>
  <body>
    <p id="container"></p>
    <div id="scriptArea" data-page-id="home/index">
      <script src="lib/underscore-min.js"></script>
      <script src="lib/jquery-2.1.1.min.js"></script>
      <script src="js/ndoo_all.js"></script>
      <script>
      (function() {
        var $, _n;
        $ = this['jQuery'] || this['Zepto'];
        _n = this.ndoo;
        _n.app('home', {
          indexAction: function() {
            return $('#container').html('hello ndoojs!');
          }
        });
        _n.init();
      }).call(this);
      </script>
    </div>
  </body>
</html>

查看started.html

1.定义页面id

ndoojs需要为页面分配一个id，每个id有一个对应的入口函数，在入口函数内初始化该页面的所有逻辑。给id为scriptArea的标签设置data-page-id属性分配id。

<div id="scriptArea" data-page-id="home/index">...</div>

2.引入ndoo脚本及依赖

ndoojs依赖underscore，使用jQuery的ready函数(可使用zepto替代)。为了整齐美观，一般将脚本放到页面底部scriptArea下面加载。

<script src="lib/underscore-min.js"></script>
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="js/ndoo_all.js"></script>

3.编写对应脚本

为home/index编写对应的入口函数，定义home下名为indexAction的入口函数。

_n.app('home', {
  indexAction: function() {
    return $('#container').html('hello ndoojs!');
  }
});

4.启动脚本

_n.init()