如何使用 JavaScript 访问注入到 HTML 模板中的值？答案

【问题标题】：How do you access values injected into HTML templates using JavaScript?如何使用 JavaScript 访问注入到 HTML 模板中的值？
【发布时间】：2015-04-27 22:46:50
【问题描述】：

我有一个带有 div 的 HTML 模板，如下所示：

<div id="some_{{model.property}}_{{other.value}}_text"></div>

我想在我的主干视图中使用 JavaScript 来动态格式化这些注入的值，以便 ID 没有空格和斜杠等。问题是我不知道获取它们的正确语法。现在我正在这样做：

var unformatted = "some_{{model.property}}_{{other.value}}_text"

然后使用jquery将id设置为格式化值：

$('.common-class').attr('id', unformatted.formatMe());

当然，它是给我带有大括号和数据路径的文字字符串值。我怎样才能获得这些值？我在后端使用带有 JSP 的骨干网、木偶、require、bootstrap 和 Spring。非常感谢！

【问题讨论】：

您需要在注入值并尝试将无效标记片段添加到 DOM 之前执行此操作。之后再做就太晚了，你不能通过一个带有空格的 ID 来查询一个元素，因为这首先不是一个有效的 ID。在 Backbone 中，您可以在模型的渲染方法中执行此操作。除非您向我们展示您的 render，否则我们无法真正告诉您更多信息。
与其尝试将数据填充到 id 字段中以便稍后解析出来，不如使用其他字段，例如数据字段。
然后使用 $('.common-class').data('whatevermodelproperty ') 和 $('.common-class').data('othervalueproperty')
实际上是在 onrender 函数中进行这些更改。不过，我是从头开始制作的，所以我现在所拥有的正是我上面写的。我是否需要在 onrender 函数的范围内设置这些值？
我同意。但我实际上无法控制这些数据是如何被提取的，因为其他事情（跟踪等）取决于 id 持有的信息。
我不确定，但我们可能会

标签： javascript html backbone.js

【解决方案1】：

@meagar 是正确的。您应该在呈现模板之前创建所需的属性。模板应该引用新值而不是原始模型属性。

<div id="{{newValue}}"></div>

例如，如果您想修改或更改 someProperty 以使其呈现为 newValue，您只需添加 newValue 作为附加模型属性。

render: function() {
    this.model.set('newValue', computeNewValue(someProperty));
    this.$el.html(this.template(this.model.toJSON()))
}

如果您不希望newValue 属性污染您的模型，您可以简单地将其添加到传递给模板的对象中：

render: function() {
    this.$el.html(this.template(
        _(this.model.toJSON()).extend({
            newValue: computeNewValue(someProperty)
        })
    ));
}

在后一种情况下，模型本身没有被修改，但模板能够访问计算值。

【讨论】：