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

Если ты пишешь {{:4}} для некоторого целого числа JsRender обрабатывает это как выражение и оценивает его. (Например {{:4*12+2}} окажет 50).

В JavaScript, если имя свойства объекта (ключ) не является допустимым именем идентификатора, необходимо использовать синтаксис метода доступа в квадратных скобках.

В шаблонах JsRender/JsViews то же самое верно. (См. https://www.jsviews.com/).

Вот несколько примеров:

$.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>

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

Я думаю, что вы должны использовать строку, как показано ниже.

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