使用jsRender,如何使用除序数位置之外的其他内容从数组中提取特定项?

时间:2012-08-01 21:34:40

标签: javascript json templates jsrender

我正在尝试使用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]。路径}}

我知道我可以这样做:

{{for ContentMediaTypeList}} {{if MediaTypeName =='Video'}} {{:路径}} {{/如果}} {{/对}}

但第二种方法似乎既麻烦又浪费。我甚至想做什么?谢谢你的帮助。

2 个答案:

答案 0 :(得分: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数据都有一个图像,视频等部分。现在它成为数据输入问题。如果数据录入人员的工作正确,那么就会有数据。我采用的方法确保了正确的数据结构。谢谢你强迫我思考这个问题。

答案 1 :(得分:0)

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

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

<强>示例:

将限制的逻辑保留在视图之外:
- 有关分页溢出的问题列表(限制,偏移,排序)

在视图中强制执行限制:
- 每个问题的附加图像列表。您的移动视图只能在每个问题上显示一个空间。适合桌面的视图有三个空间。

如何构建应用程序以及放置逻辑的位置是一个有很多意见的辩论。这种分离方式是我从经验和同行那里学到的,但我确信那里有许多不同的idéas。

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

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

工作JSFiddlehttp://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);

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