如何将我的 html 中的对象注入到 jsRender 模板中答案

【问题标题】：how do I inject an object from my html into the jsRender template如何将我的 html 中的对象注入到 jsRender 模板中
【发布时间】：2020-02-17 08:51:33
【问题描述】：

在我的 cshtml 中，我从一些常规的 html/razor 语法开始形式为

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

div 是我的模板的目标。

那么如何将产品注入到模板中呢？还是基于我的 foreach 中的 div 已经可以使用它？

【问题讨论】：

标签： razor jsrender

【解决方案1】：

建议在</body>标签前添加模板：

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

数据属性方式

最明显且有些错误的决定。

添加到您的项目中Newtonsoft.Json

Install-Package Newtonsoft.Json

更新代码：

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

下面的 html 应该变成：

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

【讨论】：