Javascript - 如何在 Kendo 模板上转义双引号和单引号

Posted 2023-05-07

【中文标题】Javascript - 如何在 Kendo 模板上转义双引号和单引号

【英文标题】：Javascript - How to escape double and single quotes on Kendo template

【发布时间】：2013-12-26 22:37:09

【问题描述】：

我在我的视图页面（剃须刀）上使用 kendolistview。在剑道模板里面我有这个代码。它只是打开引导弹出窗口。问题是“内容”数据有一些“和”值。所以链接无法引用js函数并且弹出窗口没有打开。

我尝试替换数据层中的引号：

          Content = rss.CONTENT.Replace(@"\""", "\"").Replace("'", @"\'")
          Summary = rss.SUMMARY.Replace(@"\""", "\"").Replace("'", @"\'")

查看

    @model AIS.UI.WebService.Proxy.DSrvAllService.NewsItem
    @using Kendo.Mvc.UI      

        @(html.Kendo().ListView<AIS.UI.WebService.Proxy.DSrvAllService.NewsItem>()
  .Name("listView")
  .TagName("div")
  .ClientTemplateId("template")
  .DataSource(dataSource => dataSource        
     .Model(model =>model.Id("ID"))
     .ServerOperation(true)

     .PageSize(2)
    .Events(events => events.Error("onError"))             
    .Read(read => read.Action("GetNewsList", "News"))

    )
.Pageable()


)  



        <script type="text/x-kendo-template" id="template">
      ....
      <a                
   href="javascript:openNewsPopup('#:Title1#','#:Summary#','#:Content#','#:ImageURL#','#:AddTime#
  ','#:AddDate#','#:AddYear#','#:SubmitedBy#')" class="btn pull-right"><span style="font-  
   weight:normal" rel="tooltip" title="Read more about the announcement">Read More</span></a>

  <script>

Js(视图模型)

var OpenNewsPopupViewModel = function() 
    var self = this;

    self.Title = ko.observable("");
    self.Summary = ko.observable("");
    self.Content = ko.observable("");
    self.ImageURL = ko.observable("");
    self.AddTime = ko.observable("");
    self.AddDate = ko.observable("");
    self.AddYear = ko.observable("");
    self.SubmitedBy = ko.observable("");
    self.ImageURLFull = ko.observable("");
;

  var openNewsPopupViewModel = null;

function openNewsPopup(pTitle, pSummary, pContent, pImageURL, pAddTime, pAddDate, pAddYear, pSubmitedBy) 


    var imageRootPath = '@Url.Content("~/Images/Announcements/NewsTypes/NewsType")';

    var isNewViewModel = (openNewsPopupViewModel == null);

    var newsPopup = $("#newsPopup");

    if (isNewViewModel) 
    
        openNewsPopupViewModel = new OpenNewsPopupViewModel();

        var newsPopupTag = newsPopup.get()[0];
        ko.applyBindings(openNewsPopupViewModel, newsPopupTag);
    

   // pContent = str.replace(/\"/g, "\\\"");
    openNewsPopupViewModel.Title(pTitle);
    openNewsPopupViewModel.Summary(pSummary);
    openNewsPopupViewModel.Content(pContent);
    openNewsPopupViewModel.ImageURL(pImageURL);
    openNewsPopupViewModel.AddTime(pAddTime);
    openNewsPopupViewModel.AddDate(pAddDate);
    openNewsPopupViewModel.AddYear(pAddYear);
    openNewsPopupViewModel.SubmitedBy(pSubmitedBy);
    openNewsPopupViewModel.ImageURLFull("");
    openNewsPopupViewModel.ImageURLFull(imageRootPath + '.' +  openNewsPopupViewModel.ImageURL() + '.jpg');


    newsPopup.modal('show');

示例数据（应替换双引号）

  <a href="javascript:openNewsPopup(' Version 1  is Released','Version 1.0 
   is now available on web. You can download the new version of the  
  client program from the website" http:="" 255.255.255.0="" test"="" or="" 
  installed="" program="" can="" automatically="" download="" it="" for="" 
  you.','news="" context="" will="" be="" placed="" here.="" news="" .="" 
  ','update','12:04',="" '01.01','2013','admin')"="" class="btn pull-right"><span 
  style="font-weight:normal" rel="tooltip" title="Read more about the 
  announcement">Read More</span></a>

【参考方案1】：

在将字符串发送到客户端之前，您需要对其进行编码。如果在 Razor 视图中设置字符串，您只需调用 @Html.Encode(string)。要对 Razor 视图之外的内容（例如在您的数据访问代码中）进行编码，只需直接调用 System.Web.HttpUtility.HtmlEncode(string)。

HttpUtility.HtmlEncode("A simple 'encoded' \"string.\"");
// A simple 'encoded' "string."

【讨论】：

还有一个问题，就是#（锐利）没有为剑道模板转义，这会导致渲染错误。

【参考方案2】：

每个不属于模板表达式的 # 符号（#: #、## 或 #= #）都必须转义 \#。

Link to docs