将 @Html.Raw 替换为 Knockout答案

【问题标题】：Replace @Html.Raw with Knockout将 @Html.Raw 替换为 Knockout
【发布时间】：2015-06-23 13:45:45
【问题描述】：

我的观点如下：

<div class="attributes">
                @Html.Raw(item.AttributeInfo)
            </div>

item.Attribute 信息是 C# 视图模型的一部分。现在我用 KO 视图模型替换它，并且只有 AttributeInfo。那么，如何使用 KO 替换视图的指定部分？

【问题讨论】：

什么是 item.AttributeInfo？它输出什么？
您是否已经在客户端应用了 viewModel ？
item.AttributeInfo 它是一个字符串

标签： asp.net-mvc razor knockout.js viewmodel

【解决方案1】：

类似下面的东西应该可以工作...

<div class="attributes" data-bind="html: attributeInfo"></div>

<!-- assume KO is already included -->
<script>
  function ViewModel(attributeInfo){
    this.attributeInfo = ko.observable(attributeInfo || '');
  };
  ko.applyBindings(new ViewModel('@Html.Raw(item.AttributeInfo)'));
</script>

现在仍然需要以某种方式将 HTML 输出到页面（因为 KO 在客户端运行，而模型目前是在服务器端）。我也不会针对 item.AttributeInfo 包含会导致 JS 格式错误的内容（例如值中的 '）执行任何安全防护。

但是，您可以将其清理为位（以及使用 KO 映射）并使其更清洁：

@{
  IHtmlString modelJs = new HtmlString(
    JsonConvert.SerializeObject(
      item,
      Formatting.None,
      new CamelCasePropertyNamesContractResolver()
    )
  );
}
<div class="attribute" data-bind="html:attributeInfo"></div>
<script>
  var viewModel = ko.mapping.fromJS(@modelJs);
  ko.applyBindings(viewModel);
</script>

【讨论】：

谢谢！我想<div class="attributes" data-bind="html: attributeInfo"></div> 就足够了，因为attributeInfo 已经在KO 视图模型中了。