1

我正在尝试使用 jsRender 呈现一些 JSON 数据。下面是我的示例 JSON 数据

"PageContentList": [
    {
        "ContentId": 51, 
        "Title": "60 seconds with Rick", 
        "ContentMediaTypeList": [
            {
                "MimeType": "image/png", 
                "MediaTypeName": "Image", 
                "Path": "http://local.admin.solutiaconsulting.com/uploads/4a906d8e-983a-4b54-a627-0e8d48145620.png"
            }, 
            {
                "MimeType": "video/webm", 
                "MediaTypeName": "Video", 
                "Path": "http://local.admin.solutiaconsulting.com/uploads/3a6c56c3-0ef9-4f57-9c84-9caa48a09044.webm"
            }
        ]
    }
]

我想根据 MediaTypeName 而不是序号位置提取不同的图像。我知道我可以这样做：

{{:ContentMediaTypeList[1].Path}}

我知道我可以做到这一点：

{{for ContentMediaTypeList}} {{if MediaTypeName == 'Video'}} {{:Path}} {{/if}} {{/for}}

但第二种方法似乎繁琐且浪费。我想做的甚至可能吗？谢谢你的帮助。

4

2 回答 2

1

谢谢查理的回复。我最终将 JSON 的结构更改为：

"PageContentList": [
    {
        "ContentId": 44, 
        "Title": "Company Name", 
        "Gallery": {
            "Images": [
                {
                    "Path": "http://local.admin.solutiaconsulting.com/uploads/9b577ef7-ea8a-42a1-b967-89debbc634c0.jpg", 
                    "MimeType": "image/jpeg", 
                    "ImageWidth": 0, 
                    "ImageHeight": 0, 
                    "AltText": null
                }
            ], 
            "Videos": [ ]
        }
    },
   .... 
]

然后对于我的模板：

{{for PageContentList}}
<video id="whatIsSolutiaVideo" class="video-js vjs-default-skin" controls width="{{:Gallery.Images[0].ImageWidth}}" height="{{:Gallery.Images[0].ImageHeight}}" poster={{:Gallery.Images[0].Path}}" preload="auto">
{{for Gallery.Videos}}
<source type="{{:MimeType}}" src="{{:Path}}">
 {{/for}}
 </video>
 {{/for}}

我知道每个 JSON 数据都会有一个图像、视频等部分。现在它变成了一个数据输入问题。如果数据输入人员的工作做得对，那么就会有数据。我采用的方法确保了正确的数据结构。谢谢你强迫我思考这个问题。

于 2012-08-02T21:27:11.087 回答
0

没有简单的方法可以做到这一点，因为您不应该在视图中执行那种逻辑。在渲染之前将过滤器放置在模型或控制器中。

在这种情况下，我能想到的一个例外是，如果您想限制要显示的项目数量。根据情况，这可能是也可能不是适合视图的任务。

例子：

将限制的逻辑排除在视图之外：
- 堆栈溢出问题列表与分页（限制、偏移、排序）

在视图中实施限制：
- 每个问题的附加图像列表。您的移动视图只有空间可以显示每个问题。适合桌面的视图有三个空间。

但是，如何构建您的应用程序以及在何处放置您的逻辑是一个有很多意见的争论。这种分离方式是我从经验和同龄人那里学到的，但我相信有很多人有不同的想法。

这是使用 underscore.js 过滤数据的简单方法。

 var videoContent = _.filter(contentMediaTypeList, function(mediaType) {
      return mediaType.mediaTypeName == "video"; 
 });

工作JSFiddle：http: //jsfiddle.net/n98yW/

或从中创建一个closure以实现可重用性

var mediaTypeFilter = function(mediaTypeName) {
     return function(contentMediaTypeList) {
           return _.filter(contentMediaTypeList, function(currMediaType) {
                return currMediaType.MediaTypeName == mediaTypeName;
           });
     }
};

并像这样使用它

var videoFilter = mediaTypeFilter("video");    
var videoContent = videoFilter(contentMediaTypeList);

这是使用闭包的另一个JSFiddle解决方案：http: //jsfiddle.net/GA55g/2/

于 2012-08-01T21:39:33.997 回答