使用 jquery 模板的多维数组

2024-01-03

我有以下 JavaScript 对象

var arr = [
    [
        { "id": 1, "name": "one" },
        { "id": 2, "name": "two" },
        { "id": 3, "name": "three" }
    ],
    [
        { "id": 4, "name": "four" },
        { "id": 5, "name": "five" },
        { "id": 6, "name": "six" }
    ],
]

I'm trying to use jquery 模板 http://api.jquery.com/category/plugins/templates/创建以下 HTML

<div class="row">
    <div class="cell">
        <span>1</span> : <span>one</span>
    </div>
    <div class="cell">
        <span>2</span> : <span>two</span>
    </div>
    <div class="cell">
        <span>3</span> : <span>three</span>
    </div>
</div>
<div class="row">
    <div class="cell">
        <span>4</span> : <span>four</span>
    </div>
    <div class="cell">
        <span>5</span> : <span>five</span>
    </div>
    <div class="cell">
        <span>6</span> : <span>six</span>
    </div>
</div>

我正在使用以下模板,但没有运气:(

<script id="rowTemplate" type="text/x-jQuery-tmpl">
    <div class="row">
        {{tmpl "#cellTemplate"}}
    </div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
    <div class="cell">
        <span>${id}</span> : <span>${name}</span>
    </div>
</script>

调用模板的行如下:

$("#rowTemplate").tmpl(arr).replaceAll("#somediv");

我只得到一行,其中一个单元格没有数据......

<div class="row">
    <div class="cell">
        <span></span> : <span></span>
    </div>
</div>

我究竟做错了什么?


我认为问题在于使用了 ReplaceAll 以及模板中缺少 tmpl 参数。 试试这个(对#someDiv使用replaceWith并传递$data作为子模板的tmpl参数):

<script type="text/javascript">  
    var arr = 
    [
        [
            {
                    "id": 1,
                    "name": "one"
            },
            {
                    "id": 2,
                    "name": "two"
            },
            {
                    "id": 3,
                    "name": "three"
            }
        ],
        [
            {
                    "id": 4,
                    "name": "four"
            },
            {
                    "id": 5,
                    "name": "five"
            },
            {
                    "id": 6,
                    "name": "six"
            }
        ]
    ];

    $(function(){
         $("#somediv").replaceWith($("#rowTemplate").tmpl(arr)); 
    });
</script>    
<script id="rowTemplate" type="text/x-jQuery-tmpl">
            <div class="row">
                {{tmpl($data) "#cellTemplate"}}
            </div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
        <div class = "cell"><span>${id}</span>:<span>${name}</span></div>
</script>   
<div id="somediv"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jquery 模板的多维数组 的相关文章

  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • 水平和垂直居中 div 位于页面中间,页眉和页脚粘在页面顶部和底部

    我正在尝试制作一个具有固定高度页眉和页脚的页面 页眉位于屏幕顶部 100 宽度 页脚位于底部 100 宽度 我想将一个具有可变高度内容的 div 居中放置在页眉和页脚之间的空间中 在下面的 jsfiddle 中 如果内容比空格短 它会起作用
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum
  • vb.net HtmlAgilityPack 在 div 之后插入字符串

    我试图在 div 末尾直接插入一些我自己的 html 这个 div 里面有其他 div Dim HtmlNode As HtmlNode HtmlNode CreateNode span class Those were the frien
  • 如何修复 IE6 上的不透明度

    如何修复 IE6 上的不透明度 此代码不适用于 IE6 filter alpha opacity 50 moz opacity 0 5 khtml opacity 0 5 opacity 0 5 还有这段代码 description ani
  • 选中复选框时如何向文本区域添加值

    我正在使用我刚刚在 SO 上找到的以下函数 该函数可以解决我的问题 只有一个问题是 我有一长串选择列表 当用户选中超过 3 4 个复选框时 某些文本或添加到文本区域的值不再可见 有没有什么方法可以让每次选中一个框时添加到文本区域的文本始终可
  • html 空格引起的非常奇怪的错误

    我在 Firefox 中遇到了一个非常奇怪的错误 我在外部文件中有一个 javascript 函数 可以在常规复杂性网站上完美运行 然而 我一直在整理一些演示示例并遇到一些奇怪的事情 html 格式如下 在编辑器中 div p Q Wher
  • 根据复选框和数据元素隐藏/显示表格行

    我想隐藏表中的行 因为我选中了复选框并且该数据元素在表中不正确 另一个实验 我还可以使用数据元素进行排序并按下拉列表排序 查看 tr 标签 价格 名称 评级 吗 div class filter list div
  • 如何向我的网站添加 Google 搜索框?

    我正在尝试将 Google 搜索框添加到我自己的网站 我希望它搜索谷歌本身 而不是我的网站 我曾经有一些代码可以工作 但现在不再工作
  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • Jquery 在 DIV 中进行多重加载

    这是我的代码 right load textes html nicolas right load textes html antoine 问题是内容divantoine覆盖了右边div nicolas加载的内容div div right l
  • 获取点击的的DOM路径

    HTML div class lol a class rightArrow href a div 伪代码 rightArrow click function rightArrowParents this dom dom is the pse
  • 如何在html中制作多行类型的文本框?

随机推荐

  • 特定计划任务运行失败时如何发送电子邮件

    我有一个 exe 文件 每天由 Windows 2008 上的任务计划程序执行 如果该脚本无法启动 或者脚本在执行过程中失败 我希望收到电子邮件通知 有许多让任务计划根据事件日志条目发送电子邮件的示例 但是 我只想在我的特定计划任务失败时收
  • 异步等待与elasticsearch搜索/滚动

    我在用着await作为我搜索的一部分 但作为我必须使用的 30000 项scroll 问题是搜索的初始部分在scroll是这样的await火灾和功能继续进行 我应该做什么来阻止这种情况 var allTitles try await cli
  • 错误:必须是数据库的所有者

    我想删除一个名为 mysitedb 的特定数据库 所以我所做的是打开终端并输入命令 dropdb mysitedb 然后弹出错误 错误 必须是数据库 mysitedb 的所有者 我知道特定数据库的用户名和密码 但不知道删除它 我是 post
  • 将图像写入本地服务器

    Update 去年接受的答案很好 但今天我会使用其他人都使用的包 https github com mikeal request https github com mikeal request Original 我正在尝试获取 google
  • Swift 3 UIView 动画

    自从将我的项目升级到 swift 3 以来 我的自动布局约束动画不起作用 更具体地说 它们是捕捉到新位置而不是动画 UIView animate withDuration 0 1 delay 0 1 options UIViewAnimat
  • 如何在Eclipse中创建多个同名的项目?

    我是 Eclipse 新手 正在使用 Eclipse Indigo JAVA EE IDE 版本学习 Eclipse 我想在同一个工作区中创建多个同名的项目 可以吗 如果是 如何创建多个同名项目 谢谢 约格什 不 这对于 Eclipse I
  • Delphi XE2 VCL 样式、从 TLabel 删除样式或禁用类换肤

    使用 XE2 VCL 样式 我想禁用 TLabel 或属性 sfTextLabelNormal 的换肤 我已经尝试了其他问题的各种解决方案 例如使用 Engine UnRegisterStyleHook 但它没有效果 The TLabel
  • Go 如何对常量进行算术运算?

    我一直在读这个关于 Go 中常量的帖子 https blog golang org constants 我试图了解它们如何在内存中存储和使用 您可以在 Go 中对非常大的常量执行操作 只要结果适合内存 您就可以将该结果强制为某种类型 例如
  • PHP - 使用 MySQL 数据库中的记录作为值创建复选框

    我是 php 编程的新手 我不知道我哪里出了问题 因为我的 php 代码无法执行 正如标题所说 我正在尝试在我的网站中创建复选框 但是这些值将来自 mysql 数据库 我在 MySQL 数据库中有一个名为 campus 的表 它有 2 列呼
  • Maven 安全问题

    使用 Maven 是否存在安全问题 我今天在我的主项目中使用 Ant 但在我编写程序尖峰的 示例 项目中确实使用 Maven 我确实喜欢 Maven 的某些部分 但对通过该工具下载 jar 感到担忧 这是毫无根据的担忧吗 http repo
  • 如何按定义的顺序编写 Java 属性?

    我正在使用 java util Properties 的 store Writer String 方法来存储属性 在生成的文本文件中 属性以随意的顺序存储 这就是我正在做的 Properties properties createPrope
  • RTK 查询结果不可解析 JSON

    我这样做是为了学习 React toolkit import createApi fetchBaseQuery from reduxjs toolkit query react export const getIPv4AddressApi
  • 添加 .so 作为 php 扩展名

    我有一个使用 SWIG 生成的 so 文件 我想使用那里定义的函数作为 php 扩展 如何将它们添加为 php 扩展 我将 so添加到扩展目录中 并在php ini中添加一行 extension example so 然后重新启动apach
  • “命名颜色在 iOS 11.0 之前不起作用。”即使部署目标 >= iOS 11.0

    我不断收到 Xcode 编译器错误 命名颜色在 iOS 11 0 之前不起作用 即使 Xcode 中的部署目标是 iOS 11 0 我尝试将部署目标更改为 12 2 并清理构建文件夹 但错误仍然存 在 我的项目部署设置是 Targeted
  • CSS3 中漂亮的插入边框

    我真的很喜欢最近在管子上看到的这种边框样式 如果您只是在网站上查看它可能看起来会更好 http markdotto com bootstrap http markdotto com bootstrap 我对他们如何创建这种效果特别感兴趣 似
  • 点击 UITextField 时防止键盘出现

    我正在使用一个UI文本字段显示计算结果 但我don t希望当用户点击时显示键盘UI文本字段 我使用 UITextField 是因为我仍然希望用户能够将计算复制并粘贴回 UITextField 但我不希望显示键盘 UI键盘将隐藏仅在显示键盘后
  • 用于具有多重分派的数组数组的 Julia 参数函数

    我正在尝试编写两个同名的函数 它们可以利用 Julia 的多重调度功能 并涉及数组和数组数组 假设有这三个输入变量 typeof a gt Array Array T N 1 a Array 1 2 3 4 5 6 typeof b gt
  • 以编程方式将程序集安装到 GAC 中

    我需要使用 C 在 GAC 中安装程序集 下面是我的代码 new System EnterpriseServices Internal Publish GacInstall MyAssembly dll 上面的代码给出了错误 需要绝对路径
  • Objective-C 和 Core Data 中的正则表达式

    有在 Objective C 中使用正则表达式的指南吗 具体要在 Reg Ex 中输入什么内容 核心数据属性中的字段 特别是 如何将输入限制为仅限一定数量的数字 字母以及英国邮政编码 Thanks 根据 Apple 文档 NSPredica
  • 使用 jquery 模板的多维数组

    我有以下 JavaScript 对象 var arr id 1 name one id 2 name two id 3 name three id 4 name four id 5 name five id 6 name six I m t