jsRender如何将子索引传递给父

时间:2019-11-08 11:29:27

标签: jsrender

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

我可以从数组长度中得到'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 { …..

1 个答案:

答案 0 :(得分:0)

如果要输出数组数组,可以执行以下操作:

  {{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}}
     ...
相关问题