Replace @Html.Raw with Knockout

Question

I have the following in my view:

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

item.Attribute info was a part of C# view model. Now i'm replacing it with KO view model, and just have AttributeInfo. So, how can i replace specified part of view using KO?

Answer 1

Something like the following should work...

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

Now the HTML still needs to be output to the page somehow (as KO runs client-side and the model, as it stands, is server-side). I also don't perform any safe-guard against item.AttributeInfo containing something that will malform the JS (such as ' within the value).

However, you could clean this up as bit (as well as use the KO mapping) and make it a bit cleaner:

@{
  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>