jsRender如何将子索引传递给父级

Question

我有一个页眉需要在页面上显示 (1 of X)。

我可以从数组长度中得到“X”。

所以我有一个循环：

<div class="modal-dialog" role="document">
                    <div class="modal__content modal-outerContent">
                        <div class="modal-title">
                            <h3 class="giftMessage__title">
                                add a gift message
                                {{if GiftMessages ~Count > 1 }}
                                <span class="giftMessage__highlight">
                                    ({{:#getIndex() + 1}} of {{:GiftMessages.length}})
                                </span>
                                {{/if}}
                                <button type="button" class=" modal__close" title="Close modal" data-dismiss="modal">
                                    <span class="icon icon-close"></span>
                                    <span class="hide">Close Modal</span>
                                </button>
                            </h3>
                        </div>
                        <div class="modal-innerContent">

                            {{for GiftMessages ~Count=GiftMessages.length}}
                            <div class="js-basket-message-form hide form" data-step="{{:#index + 1}}">
                                {{include tmpl="#giftMessageTemplate" /}}
                            </div>
                            {{/for}}

因此，当我循环我的 for 循环时，如何将当前子索引值传递回父级。这样带有 data-step = "{{:#index + 1 }}" 的行将返回到我当前拥有 {{:getIndex() + 1}}

的父级

我的数据集：

 item {
   message {
      to
      from
      messageContent
    }
   message {
      to
      from
      messageContent
    }
 }
 item { …..

Answer 1

如果要输出一个数组数组可以这样做：

  {{for item itemVar="~item"}}
    {{for ~item itemVar="~inner"}}
    .....
    {{/for}}
  {{/for}}

为你的数据集：

var data = {
    item: [
    [
        {to: "a", from: "b", messageContent: "foo"},
      {to: "b", from: "a", messageContent: "bla"}
    ],
    [
        {to: "a1", from: "b1", messageContent: "foo1"},
      {to: "b1", from: "a1", messageContent: "bla1"},
      {to: "b2", from: "a2", messageContent: "bla2"},
    ]
  ]
};

模板如下所示：

  {{for item itemVar="~item"}}
    <div>item {{:#index}} </div>
    {{for ~item itemVar="~message"}}
       <div> 
         -- message {{:#index}} 
         <b>from:</b> {{:~message.from}};
         <b>to:</b> {{:~message.to}};
         <b>content:</b> {{:~message.messageContent}};
       </div>
    {{/for}}
  {{/for}}

example on jsfiddle

---

更新
您不能在父周期中使用子周期索引。它不是那样工作的。假设我们使用 c JavaScript 解决这个问题，有一个父索引 i 和子索引 j 在最开始声明它们以避免可见性问题。

var i,j;

现在试试：

  		
        var i = 0, j = 0;
		for (var i; i < 2; i++) {
			console.log("p:" + i);
			for (var j; j < 3; j++) {
				console.log("ic" + j); // j = current index
			}
			console.log("c:" + j); // j = 3 (last index)
		}

你怎么看是没用的。

---

更新 2

您可以从上面将变量推入循环

{{for ~item itemVar="~message" ~parent_index=#index}}
   <div>
     -- item {{:~parent_index}}
     ...