首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在handlebars循环之外将id发送到handlebars内的表单?

在handlebars循环之外将id发送到handlebars内的表单,可以通过以下步骤实现:

  1. 在handlebars模板中,定义一个表单,并在表单中添加一个隐藏的input元素,用于存储id值。例如:
代码语言:txt
复制
<form id="myForm">
  <input type="hidden" name="id" value="{{id}}">
  <!-- 其他表单元素 -->
  <button type="submit">提交</button>
</form>
  1. 在handlebars模板外部,通过JavaScript获取到需要传递的id值,并将其填充到模板中。例如:
代码语言:txt
复制
var id = 123; // 假设获取到的id值为123
var template = Handlebars.compile(templateSource); // 编译handlebars模板
var html = template({ id: id }); // 将id值传递给模板
document.getElementById('myForm').innerHTML = html; // 将生成的HTML填充到表单中
  1. 当表单提交时,可以通过JavaScript获取到隐藏input元素中的id值,并进行相应的处理。例如:
代码语言:txt
复制
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var id = document.getElementById('myForm').elements['id'].value; // 获取隐藏input元素中的id值
  // 进行相应的处理,例如发送请求到服务器等
});

通过以上步骤,就可以在handlebars循环之外将id发送到handlebars内的表单中。请注意,以上代码中的templateSource是handlebars模板的源代码,需要根据实际情况进行替换。另外,具体的表单处理逻辑和发送请求的方式可以根据实际需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个简单粗暴前后端分离方案

之前也有看过淘宝团队实践,利用nodejs做一个中间层,处理页面渲染、路由控制、SEO等事情,前后端分界线进行了重新定义。...页面间参数传递 有时候我们需要给访问页面传参数,比如访问一个设备详细信息页,要把设备id给传过去,detail.html?id=1,这样detail页面可以根据id去请求对应数据。...传统由后端渲染页面,url中参数会发送到服务端,服务端接收后可以再渲染到页面上供js使用。...handlebars内置helperif、each都支持else语句,出错信息可以在else中输出。...总结 本文是我刚刚参加完一个项目后所写,记录一下整个过程遇到问题及处理方式,其他一些细碎点如表单异步提交什么,不是本文重点,不写了。

1.5K10

入门指南:NodeJavaScript中模板引擎

我们还将讨论如何使用 Express.js 框架配置 Handlebars ,以及如何使用内置helpers 创建动态页面。最后,我们将了解如何在需要时开发自定义helper ?。...views文件夹layouts文件夹包含布局或模板包装器。...这些布局包含模板之间共享HTML结构,样式表和脚本。 main.hbs文件是主布局,home.hbs文件是我们要构建示例Handlebars模板。 在我们示例中,我们使用一个脚本来保持简单性。...为了展示一些Handlebars功能,我们构建一个社交媒体类网站。...使用 Handlebars,我们可以创建在服务器端或客户端渲染动态网页。 使用 Handlebars 条件,循环,局部和自定义帮助器功能,我们网页将不仅仅是静态HTML。

1.9K20
  • HTML语义化:HTML5新标签——template

    一、前言                                 当我们使用String-base模板引擎(Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR...由于模板文本中出现标签情况较少,而出现表单元素标签几率较大,而xmp标签已被废弃,因此还是通过script标签存放模板文本方式较为常见。...而它基本使用方式与之前3种方式无太大差别: // 模板文本 </template...因此我们需要复制模板元素,然后再将元素副本添加到当前文档中。实现手段有很多种,大家可以自行了解一下。    ...那么怎样整个template提供DocumentFragment导出到当前document呢?答案就是采用IE9+才有的document.importNode方法了。

    1.9K90

    使用 tide、handlebars、graphql 开发 Rust web 前端(2)- 获取并解析 GraphQL 数据

    另外,还完成了最基本 handlebars 模板开发,这是 Rust web 开发骨架工作。...让我们直接将它们添加到依赖项,不需要做额外特征启用方面的设定: cargo add surf graphql_client 如果你想使用 reqwest 做为 HTTP 客户端,替换仅为一行代码(发送...我们数据内容为用户列表或者项目列表,很显然是一个迭代体,我们需要通过要给循环控制体来获取数据——handlebars 模板语法我们不做详述(请参阅 handlebars 中文文档)。...,获取用户列表,使用 handlebars 模板 #each 语法: all users {{#each allUsers as |u|}}...好方法应该是使用组合概念,模板分为 head、header、footer,以及其它各自内容部分,然后在父级页面中嵌入组合。 所以,实际应用中,这些不会显得啰嗦,反而会很简洁。

    1.5K30

    使用 rhai、handlebars、graphql 开发 Rust web 前端(3)- rhai 脚本、资源文件、环境变量等

    通过外部作用域, Rust 变量/常量无损传递到脚本中,无需实现任何特殊特性。 从 Rust 代码,轻松调用脚本定义函数。 很少依赖项,实际必须具有的仅 2 个第三方 Rust crate。...Rust web 项目中对 rhai 使用,主要是在模板渲染过程中。作为模板内嵌助手脚本,对获取到 API 数据进行计算。...>{{ u.email }} {{/each}} 现在,编译和运行后,你可以看到用户列表页面,用户名括号,显示了用户名称字符长度...: app.at("/static").serve_dir("....至此,《使用 tide、handlebars、rhai、graphql 开发 Rust web 前端》第一阶段就结束了;第二阶段,专注于 cookie/session、rhai、jwt-auth,以及复杂

    56620

    前端XSS相关整理

    + #符号 以及字符十进制数字,”<”实体编号为< 或以&开头 + #x符号 以及字符十六进制数字,”<”实体编号为< 字符都是有实体编号但有些字符没有实体名称。...1.4.3 前端Handlebars模板中安全问题 后端有Smarty模板,前端也可以有Handlebars模板,使用模板有利于开发维护代码。...在编辑器直接输入这串内容,不会执行。点击查看源码,可以看到已经经过转义 ? 我们可以直接在这里修改源码 ? 再切换回去,一个XSS漏洞就产生了,如果稍加不注意就会被利用。...,这种攻击方式失效 然鹅当输出数据不在引号当中时,防范难度加大。...符号与 \ 转义符 \ 第一个分号转义为字符串 & 与运算前后分离 b参数加上 = 号构造处bool运算 为了防止b未定义,在后面用函数提升特性来定义 最后注释符防止报错 为了攻击也是蛮拼...

    4.6K32

    奇怪知识又增加了,梳理一遍都有哪些loader

    前情回顾 上篇文章简单介绍了一下loader API,那么除了我们常用css-loader,sass-loader,style-loader,url-loader,vue-loader之外,还有哪些loader...Loaders webpack支持使用loader对文件进行处理,我们可以构建处理js之外任何文件,甚至可以用Node.js编写自己loader。 处理文件 raw-loader。...用于手动建立文件之间依赖关系 处理JSON cson-loader 加载并转换 CSON 文件 什么是CSON 我们都知道JSON文件,: { "name":"terrence", "age...使用 markdown-parse 解析器 Markdown 编译为 React 组件 posthtml-loader 使用 PostHTML 加载并转换 HTML 文件 handlebars-loader... Handlebars 文件编译为 HTML markup-inline-loader SVG/MathML 文件内嵌到 HTML 中。

    1.4K20

    浅入vue脚手架 手把手教你撸一个简单脚手架

    前端同学想必都使用过vue脚手架(vue-cli),一条简单命令vue init 就可以一个简单单页面应用包括webpack简单配置全部搭建好并且你只用关注开发层面的东西(如果没有什么特殊要求的话...你可以常用组件、工具类、样式等全部抽离出来放在git或者其他模板库里,再用脚手架进行拉取,这样开发类似风格新业务时候就不需要复制其他代码。...除此之外,还使用了nodejs几个内置模块:fs、path、child_process 直接一条命令解决: npm install commander download-git-repo inquirer.../usr/bin/env node这种用法是为了防止操作系统用户没有node装在默认/usr/bin路径里。...const handlebars = require('handlebars');// handlebars.js,模板引擎,将用户提交信息动态填充到文件中。

    1.4K30

    开发前端 CLI 脚手架思路解析

    上述代码有两处加了 process.exit(),意味着强制进程尽快退出(有点类似 return 作用,只不过 process.exit() 结束是整个进程),哪怕还有未完全完成异步操作。...初始化项目的命令是 js-plugin-cli init 项目名,所以我们需要把 项目名 作为文件夹名称,也是项目 package.json name 名称(只能小写,所以需要转换)。...完成交互后,脚手架会把用户输入内容替换到模板内容,整个完整逻辑导图如下: 打开 lib/init.js 文件,添加以下代码: // 请求 fs-extra 库,用于文件操作 const fse...handlebars 模板字符设置说明 我们事先需要把模板文件要修改字符串改成 {{ 定义名称 }} 形式,然后才能用 handlebars.compile 进行替换,为了保证代码可读性,我们把模板字符整成...,改成后面对应模板字符。

    77711

    动图展示 60+ 个前端常用插件库合集

    函数库,目的是强化表格操作(搜索、排序),并自动加入组件引入表格中,使用非常灵活简便。...jquery-validation 官网:jQuery Validation Github:jquery-validation jQuery Validation插件让用户端检查表单变得更容易,并提供大量定制化设定...Handlebars.js 官网:Handlebars.js Github:handlebars.js Handlebars主要是让你在做语义化模板时更有效率、且不容易受挫,并且兼容Mustache模板...List.js-资料排序 官网:List.js Github:list.js List.js对表格、清单、各式各样对象,增加搜索、排序、过滤和灵活性,无形地建立在HTML,极简易也易于使用。...对于移动设备支持度高。 Shave-截断文字 官网:Shave Shave根据内容最大高度文字截断,是一个没有任何依赖性JavaScript插件。

    6.6K40

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    JavaScript框架,Angular.js,Ember.js或React.js,给你代码带来结构,并保持其有序化,从而使您你app更灵活,更具可扩展性,并更容易开发。 ?...React集成到传统MVC框架,Rails中需要一些配置。...可以同时更新多个绑定,而不需要耗时DOM更新。 直截了当地状态直接链接到UI。状态参数作为对象传递,并合并到React组件内部参考状态。 使用Handlebars默认模板引擎。...你必须在模型上使用特定setter方法来更新绑定到UI值,在Handlebars渲染页面的时候。...这需要深入了解所考虑每个框架优点和缺点,以及它们如何在不同用例下竞争。所有框架都有很多共同点:开源,在许可证下发布,并创建具有MVC设计模式SPA。它们都有视图,事件,数据模块和路由。

    12.7K60

    前端CLI脚手架思路解析并从0到1搭建

    初始化项目的命令是 js-plugin-cli init 项目名 ,所以我们需要把 项目名 作为文件夹名称,也是项目 package.json name 名称(只能小写,所以需要转换)。...完成交互后,脚手架会把用户输入内容替换到模板内容,整个完整逻辑导图如下: ?...handlebars模板字符设置说明 我们事先需要把模板文件要修改字符串改成 {{ 定义名称 }} 形式,然后才能用 handlebars.compile 进行替换,为了保证代码可读性,我们把模板字符整成...,当被替换时,改成后面对应模板字符。...来都来了,走啥走,留个言呗~ IT大咖说 | 关于版权 由“IT大咖说(ID:itdakashuo)”原创文章,转载时请注明作者、出处及微信公众号。

    1.5K31

    angular入门教程_初学者织围巾简单教程慢动作

    除了组件、路由、模块这 3 个核心小节具有很强关联性之外,其它内容都是完全独立,您可以在用到时候再翻阅。...长期以来,我发现有很多朋友学习方式存在误区。比如:有一些人上来就去研究“变更检测”原理,还有 RxJS 原理,这种方式除了打击你自己自信心之外并不能得到任何好处。...这种担忧是合理,但是 Handlebars 是一款非常优秀模板引擎,它在内部做了各种优化和缓存处理。...()}} public getVal():any{ return 65535;} 模板局部变量 { {heroInput.value}...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站立刻删除。

    3.3K20

    Express 使用详情

    本文详细介绍 Express 使用方法,包括安装、基本概念、路由、中间件、模板引擎等,并给出相应代码示例。 1. 安装 首先,确保你已经安装了 Node.js。...在 Express 中,可以通过各种 HTTP 方法( GET、POST、PUT、DELETE 等)和 URL 路径来定义路由。...中间件功能包括: 执行任何代码。 修改请求和响应对象。 结束请求-响应循环。 调用堆栈中下一个中间件。...模板引擎 Express 支持多种模板引擎, Pug、EJS、Handlebars 等。以下是使用 EJS 作为模板引擎示例。...错误处理中间件函数接收到这个错误对象,并将其打印到响应中。 6. 总结 通过本文介绍,你已经了解了 Express 基本使用方法和概念,包括安装、路由、中间件、模板引擎等。

    15410
    领券