Question

我有一个简单的Riot标记，我注意到我得到了一些呈现为空的HTML标记，而其他包含opts相同属性的HTML标记使得该值正常。

<sample>
  <p>Full name: { opts.full_name }</p> // <--works
  <p>{ opts.full_name }</p> // <-- renders empty <p></p>
</sample>

如果我在HTML标记中只添加一个带有opts属性的空格，那么它可以正常工作：

<sample>
  <p>{ opts.full_name } </p> // <-- Add a space, and it works
</sample>

这似乎只发生在opts，因为当我将本地属性设置为HTML标记的唯一内容时，它可以工作：

<sample>
  <p>{ foo }</p>
  this.foo = "bar"
</sample>

当我将本地属性分配给opts的值时，这也是如此：

<sample>
  <p>{ full_name }</p>
  this.full_name = opts.full_name
</sample>

我应该添加我在Chrome扩展程序中使用riot.csp.js和内容脚本进行此操作。

这是我的清单content_scripts规则：

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "css": ["content.css"],
      "js": ["libs/jquery.js", "libs/underscore.js", "libs/riot.csp.js", "build/tags.js", "content.js"]
    }

预编译的标签文件：

<sample>
  <p>Full name: { opts.full_name }</p>
  <p>{ opts.full_name }</p>
  <p>This is the data: { JSON.stringify(opts, null, 2) }</p>
  <p>{ foo }</p>
  this.foo = "bar"
</sample>

tags.js文件（已编译）：

riot.tag2('sample', '<p>Full name: {opts.full_name}</p> <p>{opts.full_name}</p> <p>This is the data: {JSON.stringify(opts, null, 2)}</p> <p>{foo}</p>', '', '', function(opts) {
  this.foo = "bar"
});

content.js：

$("body).append("<sample></sample>");
riot.mount('*', data);

传递的数据对象：

{ "full_name" : "Homer Simpson" }

总而言之，我的HTML呈现出来了：

<sample>
  <p>Full name: Homer Simpson</p>
  <p></p> <-- troublesome bit: why is this empty?
  <p>This is the data: {
    "full_name": "Homer Simpson"
  }</p>
  <p>bar</p>
</sample>

虽然我有上述解决方法，但这不是主意。发生了什么事？

在Riot JS中，opts值不会在HTML标记内部呈现，除非有一个静态字符

0 个答案: