Question

我目前在使用Knockout构建的多选列表中的optionsText有一个奇怪的问题。

我注意到我从控制器检索的一些文本数据是HTML编码的，我希望在我的选择列表中正确显示它。

简单示例

来自我的控制器的字符串（以及它当前显示的方式）

戴夫＆amp; amp;克星

我希望如何显示

戴夫＆amp;克星

我尝试在optionsText中使用函数来执行解码而不创建计算，但由于某种原因，解码根本不起作用。

$scope.$on('$destroy', function() {
  $interval.cancel(intervalPromise);
});

我目前正在使用Knockout Mapping插件填充我的视图模型，所以这是我没有使用计算器来解决这个问题的一个重要原因。这样，只要模型获得其他属性，我就不必混淆映射设置。

我尝试将html-data-bind="options: ViewModel.AvailableItems, optionsText: function(item) { return decodeURI(item.Label()) }, optionsValue: 'Value', selectedOptions: ViewModel.ItemsSelected"绑定与以下代码（Fiddle I found it from和the question I found it from）

一起使用

optionsAfterRender

但是，当呈现ViewModel.setOptionHTML = function(option, html) { ko.applyBindingsToNode(option, { html: html }) }时，它会显示为 [object] [object] 。

为了让我的文字在我的选择列表中正确显示，我缺少什么？

以下是显示问题的示例：

optionText

var vm = {
    ViewModel: { 
        AvailableItems: [
            {
                Label: ko.observable("Dave &amp; Buster"),
                Value: 1
            }
        ],
        ItemSelected: ko.observable()
    }
};

ko.applyBindings(vm);

Answer 1

这是一种方法。唯一的问题是它不包含那里的每个转义字符，所以你要么必须添加每一个，要么只有你接受的有限集

编辑：请参阅下面的代码片段，它应该对所有内容进行解码：）

var vm = {
    ViewModel: { 
        AvailableItems: [
            {
                Label: ko.observable("Dave &amp; Buster"),
                Value: 1
            }
        ],
        ItemSelected: ko.observable()
    }
};

deEncode = function(raw){
 	return raw.replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: ViewModel.AvailableItems, 
   optionsText: function(item) { return deEncode(item.Label()) }, 
   optionsValue: 'Value', 
   selectedOptions: ViewModel.ItemsSelected">
</select>

编辑：做了一些搜索互联网并找到了这个宝石：

我会说这更好：

var vm = {
    ViewModel: { 
        AvailableItems: [
            {
                Label: ko.observable("Dave &amp; Buster"),
                Value: 1
            }
        ],
        ItemSelected: ko.observable()
    }
};

deEncode = function(raw){
 	return $("<div/>").html(raw).text()
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>


<select data-bind="options: ViewModel.AvailableItems, 
   optionsText: function(item) { return deEncode(item.Label()) }, 
   optionsValue: 'Value', 
   selectedOptions: ViewModel.ItemsSelected">
</select>

很酷的jquery代码的来源：How to decode HTML entities using jQuery?

无法解码HTML Decode Knockout optionsText

1 个答案: