时间戳

首页 > 解决方案 > 如何定义一个变量并在 jsviews 模板上使用它？

javascript - 如何定义一个变量并在 jsviews 模板上使用它？

问题描述

我想为 html 元素定义一个唯一的 id，我必须将其作为辅助函数的参数传递。

唯一 ID 是使用另一个辅助函数 (genearteUniqueId) 正确生成的，但我无法将其存储在变量中以重用它并将其传递给另一个函数。有人在使用 Jsviews 时遇到过这个挑战吗？

我尝试将 generateUniqueId() 结果分配给 {{:uniqueId=~generateUniqueId()}} 中的定义变量，然后将 uniqueId 变量作为参数传递 {{:~decorator(uniqueId}} 但它不起作用。

<div class="graph-row">
   <span class="bar-graph" id="{{:~generateUniqueId()}}" {{:~decorator(outOfPockets[0].paid, outOfPockets[0].total, ~generateUniqueId())}}></span>
</div>

标签： javascriptjsviews

解决方案

好吧，您可以定义自己的 getUniqueId() 来获取最后生成的 id，如下所示

var cnt = 0, lastId;

var myTmpl = $.templates("#myTmpl"),
  data = {},
  helpers = {
    generateUniqueId: function() {return (lastId = cnt++);},
    getUniqueId: function() {return lastId;},
    decorator: function(id) {return "title=YES" + id;}
  };

myTmpl.link("#page", data, helpers);

和写

<span id="{{:~generateUniqueId()}}" {{:~decorator(~getUniqueId())}}></span>

或者，（尽管如果您使用 JsViews 数据链接，而不仅仅是 JsRender 渲染，最好避免这种情况），您可以使用以下方法将allowCode设置为 true：

$.views.settings.allowCode(true);
var cnt = 0;
function genId() {return cnt++;}
function dec(id) {return "title=YES" + id }

和写：

<span id="{{*:(theid=genId())}}" {{*:dec(theid)}}>c</span>

推荐阅读