Razor 如何将html中的对象注入jsRender模板

在我的cshtml中，我从一些常规的html/razor语法开始 以表格形式列出

@foreach (var product in Model.Basket.Items
{
 ……
  <div class="itemMessageContent></div>
}

@foreach（Model.Basket.Items中的var产品
{
……
建议在
标记之前添加模板：

<script id="template" type="text/x-jsrender">
    {{:name}}
</script>

更新代码：

@foreach (var product in Model.Basket.Items)
{
  <div data-jsrender='@JsonConvert.SerializeObject(product)' class="itemMessageContent"></div>
}

@foreach (var product in Model.Basket.Items)
{
  <div data-jsrender='@JsonConvert.SerializeObject(product)' class="itemMessageContent"></div>
}

 <div data-jsrender='{name="Apple"}' class="itemMessageContent></div>
 <div data-jsrender='{name="Banana"}' class="itemMessageContent></div>

var template = $('#template');
$('.itemMessageContent').each(function(){
    var element = $(this);
    var data = element.data('jsrender');
    element.html(template.render(data));
})