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}}

しかし、2番目のアプローチは面倒で無駄に思えます。私がやりたいことは可能ですか？ご協力いただきありがとうございます。

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

ビューでそのようなロジックを実行することは想定されていないため、簡単な方法はありません。レンダリングする前に、フィルターをモデルまたはコントローラーに配置します。

この場合に考えられる唯一の例外は、表示するアイテムの数を制限したい場合です。状況に応じて、それがビューに適したタスクである場合とそうでない場合があります。

例：

制限のロジックを表示しないようにします
。-ページングを使用したスタックオーバーフローに関する質問のリスト（制限、オフセット、並べ替え）

ビューに制限を適用します。-
各質問に添付された画像のリスト。モバイルビューには、質問ごとに1つだけ表示する余地があります。デスクトップに適したビューには、3つのスペースがあります。

ただし、アプリケーションをどのように構成し、ロジックをどこに配置するかについては、多くの意見があります。この分離のスタイルは、私が経験や仲間から教えられてきたものですが、さまざまなアイデアを持つ人がたくさんいると確信しています。

underscore.jsを使用してデータをフィルタリングする簡単な方法は次のとおりです。

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

動作中： httpJSFiddle：//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 に答える