剣道のフィールド値の隣に画像を表示MVVM

Question

これはかなり時間がかかっています。私が望むのは、CustomerNameフィールドに各顧客の横にイメージを表示することです。ここで

は私のコードです：

<div id="example"> 

    <div data-role="grid" 
     data-editable="true" 
     data-columns="[ 
         { 'field': 'CustomerID', 'width': 300}, 
         { 'field': 'CustomerAltID', 'width': 300 }, 
         { 'field': 'CustomerName', 'width': 500 }, 
         { 'field': 'Gender', 'width': 200 } 
         ]" 
     data-bind="source: productsSource" 
     style="height: 400px"></div> 
</div> 

のViewModel：

var viewModel = kendo.observable({ 
       productsSource: new kendo.data.DataSource({ 
        transport: { 
         read: { 
          url: 'http://localhost:52738/Default1/KendoDataAjaxHandle', 
          type: "post", 
          dataType: "json" 
         } 
        }, 
        schema: { 
         data: "Data", 
         total: function (response) { 
          return $(response.Data).length; 
         } 
        } 
       }) 


      }); 

kendo.bind($("#example"), viewModel); 

今、私はこれだけのコードで詳細を表示することができていますが、画像を表示するようになっていません。私が欲しいもの

：

私は取得しています何：

は、だから私は、データの列にこのような何かをやってみましたが、私はその正しい方法を考えてはいけません：

data-columns="[ 
         { 'field': 'CustomerID', 'width': 300,template: "<div class='customer-photo'" + 
                  "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" + 
                 "<div class='customer-name'>#: CustomerName #</div>"}, 

私はネット上でそれを検索しようとしたが、いくつかのテンプレートに遭遇したが、私の機能を達成するものを書くことができなかった。

誰かが私を助けてくれるのであれば、私は満足して感謝しています。

Answer 1

あなたのテンプレートアプローチはうまくいきますが、結果のHTMLはありません。 'style：background-image'を使用すると、そのイメージが要素のコンテンツの背景として配置されますが、divには何も表示されないコンテンツはありません。私はあなたの写真にimgタグのようなものが必要で、その後に顧客名が必要だと信じています。名前の代わりにdivを使用すると、画像とテキストを並べて配置する必要があります。テンプレートを調整して、次の行に何かを描画してみてください。

<img src='../Content/Images/customerimg/#:data.CustomerID#.jpg'></img> 
<span>#: CustomerName #</span>