JsViews 似乎不适用于数字属性

Question

当我尝试传递具有数字属性的 JavaScript 对象时

{ 1: "One", 2: "Two", 3: "Three" }

数据绑定不呈现属性值，仅呈现示例中的数字

$.templates("template", "#template");
$.link.template("#row", { 1: "One", 2: "Two", 3: "Three" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script id="template" type="text/x-jsrender">
  <td>{{:1}}</td>
  <td>{{:2}}</td>
  <td>{{:3}}</td>
</script>

<table>
  <tr id="row">
  </tr>
</table>

但是如果我将对象的属性名称更改为以字母开头的东西，它就可以正常工作

$.templates("template", "#template");
$.link.template("#row", { n1: "One", n2: "Two", n3: "Three" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script id="template" type="text/x-jsrender">
  <td>{{:n1}}</td>
  <td>{{:n2}}</td>
  <td>{{:n3}}</td>
</script>

<table>
  <tr id="row">
  </tr>
</table>

这是错误还是功能？如何在不转换传递的对象的情况下使 jsViews 使用数字属性？

Answer 1

我认为你应该像下面那样使用字符串。

{ "1": "One", "2": "Two", "3": "Three" }

Answer 2

请勾选JSRender/JSView
在这里，如果你看到最后一节 Sample: {{:#index ...}}，它使用 json 对象的索引，当你使用数字作为键时，也会发生同样的情况json 对象并尝试将其映射到模板中，因此模板将其视为索引而不是键。最好使用一些带有数字的静态字母，如 key1、key2 等

$.templates("template", "#template");
$.link.template("#row", {key1: "One", key2: "Two", key3: "Three" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script id="template" type="text/x-jsrender">
  <td>{{:key1}}</td>
  <td>{{:key2}}</td>
  <td>{{:key3}}</td>
</script>

<table>
  <tr id="row">
  </tr>
</table>

Answer 3

如果您为某个整数编写 {{:4}}，则 JsRender 会将其视为表达式并对其求值。（例如 {{:4*12+2}} 将呈现 50）。

在 JavaScript 中，如果对象属性名称（键）不是有效的标识符名称，则必须使用方括号访问器语法。

在JsRender/JsViews模板中，也是如此。（参见 www.jsviews.com/#paths）。

这里有多个例子：

$.templates("template", "#template");
$.link.template("#row",
 { 1: "One", "2": "Two", 3: "Three", other: { 50: "fifty" }, 4: { 5: "five"}, "a b": "AB" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script id="template" type="text/x-jsrender">
  <td>{{:#data[1]}}</td>
  <td>{{:#data[1+1]}}</td>
  <td>{{:#data["3"]}}</td>
  <td>{{:other[50]}}</td>
  <td>{{:~root[1]}}</td>
  <td>{{:#data[4]["5"]}}</td>
  <td>{{:#data["a b"]}}</td>
</script>

<table>
  <tr id="row">
  </tr>
</table>

JsViews 似乎不适用于数字属性

JsViews doesn't seem to work with numeric properties

javascript

jquery

jsviews