关于JsViews include标签数据上下文的问题及代码示例

我之前也碰到过JsViews里include标签的上下文坑，结合你给出的代码片段，大概率是子模板没法访问父模板的数据对吧？别急，咱们一步步来解决。

首先先还原一下你可能的完整场景（毕竟你给的代码截断了）：假设你有父模板和子模板，父模板里有个property字段，include子模板后子模板想调用这个字段，但结果是空的。比如代码大概是这样：

<html>
<head>
  <title>Demo 1 JsViews</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
</head>
<body>
<script id="template" type="text/x-jsrender">
  <p>{{:property}}</p>
  {{include "subTemplate"}}
</script>

<script id="subTemplate" type="text/x-jsrender">
  <p>Sub template: {{:property}}</p>
</script>

<script>
  var data = { property: "Hello from parent data" };
  $("#template").link(data);
</script>
</body>
</html>

问题原因 #

默认情况下，JsViews的{{include}}标签不会自动继承父模板的数据上下文——子模板默认是没有数据绑定的，所以你在子模板里调用{{:property}}自然拿不到值。

三种解决方案 #

1. 显式传递当前上下文

最简单的方式就是在include标签里用data="."把当前父级上下文传给子模板：

{{include "subTemplate" data="."}}

如果需要传递根级数据（比如父模板是循环里的项，你想拿到最外层的数据），就用data="~root"：

{{include "subTemplate" data="~root"}}

2. 传递单个属性

如果只需要给子模板传父数据里的某一个属性，直接指定属性名就行：

{{include "subTemplate" data="property"}}

这时候子模板里直接用{{:}}就能访问这个属性值：

<script id="subTemplate" type="text/x-jsrender">
  <p>Sub template: {{:}}</p>
</script>

3. 使用上下文继承修饰符

JsViews提供了一个^修饰符，用来开启include的上下文继承，这样子模板会直接共享父模板的当前数据上下文，不用手动传data：

{{include^ "subTemplate"}}

用这个写法的话，你的子模板就能直接访问父模板里的property字段了，和父模板里的调用方式完全一样。

验证修改后的代码 #

比如用第三种方法的完整代码，运行后子模板就能正确显示父级的property值了：

<html>
<head>
  <title>Demo 1 JsViews</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
</head>
<body>
<script id="template" type="text/x-jsrender">
  <p>{{:property}}</p>
  {{include^ "subTemplate"}}
</script>

<script id="subTemplate" type="text/x-jsrender">
  <p>Sub template: {{:property}}</p>
</script>

<script>
  var data = { property: "Hello from parent data" };
  $("#template").link(data);
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Moises Miret