Question

我正在尝试使用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而不是序数位置拉出不同的图像。我知道我可以这样做：

我知道我可以这样做：

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

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

Answer 2

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

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

<强>示例：

将限制的逻辑保留在视图之外：
- 有关分页溢出的问题列表（限制，偏移，排序）

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

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

这是使用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/

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

2 个答案: