- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在编写一个不依赖 jQuery 的组件,我希望找到一种无需 jQuery 即可加载外部 Mustache.js 模板的方法。使用 jQuery 的 $.get
方法 appears to work ,但我正尝试在 vanilla JS 中执行此操作。
我尝试使用 XMLHttpRequest
并将模板附加到正文,然后然后用我的 JSON 对其进行补水,但是当我的 JS 尝试将 JSON 放入模板中时, 模板不在那里被水合 (cannot read property innerHTML of null
)。这是我的代码(在 CoffeeScript 中,test.js
是 mustache 模板):
req2 = new XMLHttpRequest()
req2.onload = ->
foo = document.getElementById('thatsmyjam')
templ = document.createTextNode(this.responseText)
foo.insertAdjacentHTML('beforeEnd', templ)
req2.open('GET', 'test.js', { async: false})
req2.responseType = 'document'
req2.send()
这会在 DOM 中添加文字文本 [object Text]
而不是将其视为 HTML,因此它似乎是在评估 HTML 字符串而不是将其渲染成这样。
可能有更好的方法。我基本上是在尝试将我的应用程序(获取 JSON)、mustache.js 和模板组合成一个串联的缩小文件,以便作为 UI 小部件进行分发。
我还调查了类似 Hogan.js 的内容预编译模板,但感觉很复杂,我无法在这个项目中使用 Node。
如果我将上面的 CoffeeScript 更新为:
req2 = new XMLHttpRequest()
req2.onload = ->
foo = document.getElementById('thatsmyjam')
window.templ = document.createTextNode(this.responseText)
foo.insertAdjacentHTML('beforeEnd', templ)
req2.open('GET', 'test.js', { async: false})
req2.send()
然后在我尝试呈现模板的应用程序的相关部分将其视为字符串:
populateDom: =>
self = @
@request.addEventListener 'loadend', ->
if @status is 200 && @response
resp = self.responseAsJSON(@response)
# here, window.templ is a string returned from the XMLHttpRequest above,
# as opposed to an actual "template", so Mustache can't call render with it.
rendered = Mustache.render(window.templ, resp)
document.getElementById('thatsmyjam').innerHTML = rendered
self.reformatDate(resp)
所以 Mustache 对待字符串的方式与脚本标签内的模板不同。有没有办法让 Mustache 将该字符串识别为合法模板?
最佳答案
我想出了如何使用受 this SO answer 启发的实现来使用核心 JavaScript 检索外部模板.该过程实质上是创建一个新的 div
,使用 XMLHttpRequest
检索模板,并填充创建的 div
的 innerHTML
与模板字符串。这是 CoffeeScript 中的实现:
class TemplateManager
templateUrl: '/path/to/template.mustache'
retrieveTemplate: ->
req = new XMLHttpRequest()
req.onload = ->
div = document.createElement('div')
div.innerHTML = this.responseText
window.mustacheTemplate = div
req.open('GET', @templateUrl, { async: false})
req.send()
然后你可以调用
rendered = Mustache.render(window.mustacheTemplate.innerHTML, resp)
document.getElementById('YOURDIV').innerHTML = rendered
使用您的 JSON 数据 resp
呈现模板。
关于javascript - Mustache.js 外部模板(没有 jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30960225/
如何指示 webpack 排除所有 d3 模块? // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
这是一个简单的循环,我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
问题+概述 下面是两个片段,其中包含最初隐藏的 div,然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
我有一个 HTML 页面和一个单独的 .js 文件,该文件包含在带有 的页面中标签。 这是我的 .js 文件: element = document.getElementById("test");
我在 linux 静态库项目中有 3 个文件,我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
我正在尝试将颜色背景更改为默认背景颜色,当我点击输入框外 我尝试使用“null”或“none”但没有用? window.addEventListener('click', outsideClick);
我正在编写一个应用程序,要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
在 android 中,不可移动(内部)的外部存储和内部存储有什么区别?我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据 谢谢 最佳答案 在许多较新的设备中,将不再有物理区别,
在 C++ 中,假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别? 实现A namespace Ada { extern "C" { int getN
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。 想象一下我们有这样的东西: Hello World 如果我们这样
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
我们正在使用 SVN 试水,并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块 模块一 模块二 模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务? 我在裸机上运行 Kubernetes。 谢谢 最佳答案 使用 nodePort 类型的服务,它会将您的服务绑定(bind)到所有节
是否有可能在 Controller 之外使用 generateUrl() 方法? 我尝试在带有 $this->get('router') 的自定义存储库类中使用它,但它没有用。 更新 我在这里找到了一
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止,我已经为 React 和其他小库实现了这一目标。 如果我只是移动 '@angular/compil
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项,或者得到了: 您不能更改处于未解析状态的
我是R包的创建者EnvStats . 有一个我经常使用的函数,叫做 stripChart .我刚开始学习ggplot2 ,并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack
我是一名优秀的程序员,十分优秀!