Backbone - 从视图中的 DOM 读取模板数据答案

【问题标题】：Backbone - reading template data from DOM in ViewBackbone - 从视图中的 DOM 读取模板数据
【发布时间】：2023-04-01 10:10:02
【问题描述】：

我正在尝试找出让主干视图读取模板数据的最佳方式。我正在使用下划线模板。

我在页面上的脚本块中定义了一个模板：

<script id="template" type="text/html">
        This is my template
</script>

但是，在视图的某些部分中，我在阅读模板时遇到了问题（我认为这与 el 范围界定有关）。例如：

var SomeView = Backbone.View.extend({

    tagName: 'div',
    className: 'someClassName',

    t1 : $('#template').html(),

    initialize: function() {

        var t1 = this.t1;
        var t2 = $('#template').html();

        ...
    },
    ...

t1 包含正确的模板 html，而 t2 为空。

这是为什么呢？以及从 DOM 中读取此模板的正确视图位置在哪里？

【问题讨论】：

我总是在渲染过程中读入模板。你能做一个小提琴吗？您是否尝试过在初始化中设置断点并手动运行 jQuery HTML 方法以查看结果？
如果我在 render() 中读到 $('#template').html()，我会得到 null/not defined :(
如果你在初始化方法的脚本中设置断点怎么办（你可以通过在代码中输入debugger; 命令或在firebug/webkit中手动添加其他脚本选项卡来做到这一点） .这将允许您在运行时查看执行上下文的状态。
@tkone - 关于我应该检查的内容，关于此时的上下文有什么建议吗？我真的不知道要检查什么才能知道为什么 jquery 选择器不起作用...
你在调试器中检查了吗？我已经问了好几次了，还没有听到你回答。

标签： backbone.js underscore.js

【解决方案1】：

我正在尝试找出让主干视图读取模板数据的最佳方式。我正在使用下划线模板。

回答您问题的特定部分。我可以建议在 requirejs 中使用插件吗？

由于您运行的是 app.js，我猜您可能正在使用 requirejs。我在这里测试我的运气。我的猜测可能完全错误。但是，如果您是，为什么不尝试使用文本！来自 requirejs 的插件，它像这样将文件作为字符串（您的模板）读取？

define(
['text!templates/template.html'], function(myTemplate){
});

到目前为止，就我的模板而言，这工作得很好。这种方法从来没有遇到过任何问题。

您可以在“模块化主干视图”部分的 here 下找到此内容

【讨论】：

使用 require.js 或 curl.js 来加载模板作为依赖项更加简洁和有趣。为这种方法 +1。

【解决方案2】：

对象字面量的值会立即计算，因此模板的 jQuery 选择器返回空。您需要等到 DOM 准备好选择模板。

【讨论】：

谢谢。也许我误解了，但它是功能之外的功能。在初始化函数中（大概是延迟执行）我无法正确读取 DOM 元素。
是的，这就是令人困惑的部分。当我开始使用主干时，第一个困扰我的错误是在 DOM 准备好之前创建我的视图并尝试在那里设置模板。因此将其设置为渲染！
并确保在 DOM 准备好之前没有创建视图实例。即使你在render 中有选择器，如果你在 DOM 准备好之前有一个视图实例，你也不会得到任何东西。
@DerickBailey 所有实例化都是通过“应用”视图完成的，该视图本身是在$(document).ready(function() { 中实例化的，所以我不认为是这样 :(
根据您所说的，我可能看到的唯一其他答案是，当您运行选择器时，页面中不存在“#template”...正在删除或以其他方式删除它？