在 JsRender 中检查道具长度答案

【问题标题】：Check for props length in JsRender在 JsRender 中检查道具长度
【发布时间】：2015-07-24 13:16:11
【问题描述】：

我想在迭代对象的属性（如果有的话）之前显示一些文本。我尝试检查它的长度，但这不起作用。我该怎么做？

如下所示，tmpl1 和 json1 是带有 props 的正常循环，我需要的是 tmpl2 和 json1，但 value.data 像 json2 一样

那个键总是被定义的，有时它有内容（json1），有时是空的（json2）

HTML

<script type="text/x-jsrender" id="tmpl1">
  {{props value.data}}
    <span>{{:key}}</span>
    <div>
    {{for prop}}
      <div>
        {{:#data.name}} - {{:#data.phone}}
      </div>
    {{/for}}
    </div>
  {{/props}}
</script>

<script type="text/x-jsrender" id="tmpl2">
{{if value.data.length}}
  <h1>This is the content:</h1>
  {{props value.data}}
    <span>{{:key}}</span>
    <div>
    {{for prop}}
      <div>
        {{:#data.name}} - {{:#data.phone}}
      </div>
    {{/for}}
    </div>
  {{/props}}   
{{/if}}
</script>

<div id="result1"></div>
<div id="result2"></div>

var json1 = {
    "value": {
        "data": {
            "keyA": [
                {
                    "name": "foo",
                    "phone": 123
                }
            ],
            "keyB": [
                {
                    "name": "bar",
                    "phone": 456
                }
            ]
        }
    }
};

var json2 = {
    "value": {
        "data": []
    }
};


var tmpl1 = $.templates("#tmpl1");
$("#result1").html(tmpl1.render(json1));

var tmpl2 = $.templates("#tmpl2");
$("#result2").html(tmpl2.render(json1));

JSFIDDLE

【问题讨论】：

你说“但是 value.data 就像 json2”。 - 那么 value.data 是一个数组 [] 还是一个对象 {}？
根据某些条件（在服务器端）我会得到其中一个，有时像 json1 ({}) 有时像 json2 ([])
所以你想要 data.length 即使它是一个 {}，就对象的属性数量而言 - 或者仅当它是一个数组时？我仍然不清楚您的问题/困难。
我想提前知道我是否有需要循环的内容。我知道我可以只是 {{props}} 并且它会注意它是否有循环的东西。我需要在循环之前打印一些东西。我不知道如何检查。我如果做 {{if value.data}} 它将始终验证，因为它已定义，无论内容如何

标签： jsrender

【解决方案1】：

一种方法是使用助手： http://www.jsviews.com/#helpers

{{if ~hasContent(value.data)}}
   <h1>This is the content:</h1>

与

function testForContent(data){
    for (var key in data) { 
        return true;
    };
    return false;
}

tmpl2.render(json1, {hasContent: testForContent}));

【讨论】：

【解决方案2】：

以 Boris 为例，我在这里留下一个 jQuery 实现和更新的小提琴

模板

{{if !~isEmptyObject(value.data)}}
  <h1>This is the content:</h1>
  {{props value.data}}
    <span>{{:key}}</span>
    <div>
    {{for prop}}
      <div>
        {{:#data.name}} - {{:#data.phone}}
      </div>
    {{/for}}
    </div>
  {{/props}}  
{{/if}}

帮手

$.views.helpers({
    isEmptyObject: function(obj)
    {
        return $.isEmptyObject(obj);
    }
});

JSFIDDLE

【讨论】：

其实可以简单写成：.views.helpers("isEmptyObject", $.isEmptyObject);。另外顺便说一句，您可以将 {{:#data.name}} 简化为 {{:name}} - 电话类似...