Cakephp中使用JavaScriptHelper来引入js文件

页面的head部分的内容在Cakephp中主要是有htmlhelper来进行控制的,而js部分则是由JavaScripthelper来进行控制的,在controller里面设置好:var $helpers = array(’Html’,‘Javascript’);就可以在ctp文件中使用JavaScripthelper对象:$javascript了。具体见正文。

前提是js文件都放在了 webroot/js  目录下面了,下面是范例。

1、$javascript->link($JsName,0); echo $script_for_layout;

在  views/controllers/方法名.ctp文件里面,用$javascript->link($JsName,0);来把 webroot/js/jsname.js 文件加载到 views/layouts/default.ctp 的 $script_for_layout 里面去。

2、echo $javascript->link($JsName,1);

这句话是直接在views/layouts/default.ctp里面用的,放在head区就可以了,或者放置在 views/controllers/方法名.ctp文件 里面也是可以的。

3、echo $javascript->includeScript();

这条语句很牛X,直接把所有的 webroot/js/ 所有js文件 全部读取出来,并打印出来。和php的include函数是一样的感觉,别的语句是生成 <script src=””></script>,这个生成的是<script>js1的内容,js2的内容….< /script>,放在layout的head区域很合适。

4、echo $javascript->includeScript($JsName);

这个是上边语句很类似,只是把某个特定的js文件的内容打印出来而已。

让我们来理解 Blog 例子中的代码(不使用 $scaffold)

  • 按照命名约定, 数据库表 posts 对应有 Post 模型类, 定义在 app/models/post.php 中
  • 在 app/controllers/posts_controller.php 中建立控制类 PostsController 使用 Post 模型类
  • 控制类 PostsController 中如果定义 index 动作, 其输出在 app/views/posts/index.thtml 中定义
  • 目录结构

    app

    于是, 请求 http://.../posts/index 使用 app/controllers/ 中(注意此两目录名不出现在请求路径里)控制类 PostsController 的动作 index 来处理, 用 app/views/posts/index.thtml 响应返回显示

    • models

      • post.php
    • controllers
      • posts_controller.php
    • views
      • posts

        • index.thtml
        • view.thtml
        • edit.thtml
        • add.thtml
        • ...
      • layouts
        • default.thtml
  • 在动作 index 结束时会自动调用 render 方法用默认的布局 default.thtml 显示 index.thtml 视图
    • 而布局 default.thtml 除了定义页头页尾等, 其中的 echo $content_for_layout 是实际显示 index.thtml 的地方
    • 在 app/views/layouts/default.thtml 中可以自定义布局以代替默认的布局
  • 动作 index 中的关键代码 $this->set(‘posts‘, $this->Post->findAll());这样, 视图 index.thtml 中的数组型变量 $posts 通过模型类 Post 拿到了数据库表 posts 的所有记录
    • 是设定 index.thtml 视图中的变量其名为 posts 的值
    • 而其中 $this->Post 按照命名约定是 Post 模型类
  • 同样, 请求 http://.../posts/view/3 会找到控制类 PostsController 的动作 view 来处理, 用 app/views/posts/view.thtml 响应返回显示, 不过还带有动作参数 $id 值为 3
    • 动作 view 中的代码 $this->set(‘posts‘, $this->Post->read(null, $id)); 设定 view.thtml 视图中的变量 $posts
    • 视图 view.thtml 中的代码如 echo $posts[‘Post‘][‘title‘] 显示表 posts 中记录的 id 为 3 的字段 title 的值(温馨提醒中间 Post 是大写的 P)
  • 动作 edit 和 add 都要用到代码 $this->Post->save($this->data) 通过模型类 Post 保存控制类的参量 $this->params 所拥有的数据
    • $this->data 是 $this->params[‘data‘] 的别名, 指表单(form) 通过提交方式 POST 上来的数据

.:: $html ::.

举例

  • 或许超链接更简单了 echo $html->link(‘超链接文字‘, ‘超链接地址‘)

    • 如果当前视图在 app/views/posts/ 目录中, ‘超链接地址‘是这个当前视图目录的相对地址
  • 插入图片不难 echo $html->image(‘图片地址‘, array(‘alt‘=>"", ‘border‘=>"0"))用图片作为超链接稍复杂点, 详细方法参数说明请查 Cake 手册 echo $html->link($html->image(‘图片地址‘), ‘超链接地址‘, null, null, false)
    • 图片放在 app/webroot/img/ 目录中, ‘图片地址‘是这个图片存放目录的相对地址
    • 在数组里放图片链接的属性
时间: 2024-10-03 17:36:30

Cakephp中使用JavaScriptHelper来引入js文件的相关文章

jsp文件引入js文件的方式(项目部署于web容器中)

在页面中引入javascript文件的方式是多种多样的,本文介绍一种. 1.在eclipse中新建一个web项目(project3),目录结构如下: 二:在jsp页面的最开始,获取项目的根路径. <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort

动态引入Js文件

var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + src + "'><\/script>").appendTo("head"); //动态加载 TestAlert123123(); //调用Test.js中的函数 二.顺序添加(QQ) <img src="1.jpg" width

jsp引入js文件

转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当前页面中能够正常运行,但当引入时不能正常运行,则有两种可能    A:引入Js的路径有问题    B:引入的Js的编码格式与当前页面不匹配: 3)引入Js的路径问题    js的引入不外乎两种,相对路

防止多次引入js文件导致的重复注册点击事件

前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的,那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册,造成不必要的麻烦,所以需要在每次注册之前将先前的事件进行取消,下面以按钮的注册点击事件为例进行说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

为什么很多网页里不直接用script标签引入JS文件,而是通过函数新建script,然后添加属性,再来引入呢?

最近在做毕业的项目,发现很多网页里都是通过构建函数的方式来引入JS文件,代码如下: function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://***"; document.body.appendChild(script); } 在我看来,<scrip

JSP中引入js文件

1. 引入的js文件代码执行出错        排查方法:将引入的js文件中的代码直接放到jsp中<script></script>标签内,使用浏览器访问,如果出错,则为js 代码存在问题 2. 如果步骤一中未出错,但引入时报错,则有两种可能 引入Js的指令有错误 引入的Js的编码格式与当前页面不匹配 1) 引入Js的指令有错误     |-source     |    |     |    ---js     |      |     |      ---base.js    

【JSP中引入文件】JSP中获取根路径+引用js文件

在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.get

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

php ci框架中加载css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,加载css和js失败.原因是ci框架是入口的框架 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 在控制器中需要先载入url相关的类 public function test() { $this->load->helper('url'); $this->load->view('admin/test'); } 在test.php的view视图中.