Knockout 绑定需要解析 JSON (&quot)答案

【问题标题】：Knockout binding need to parse JSON (&quot)Knockout 绑定需要解析 JSON (&quot)
【发布时间】：2015-05-26 17:53:25
【问题描述】：

我正在将一些标准的 jquery 动态选择菜单重写为淘汰赛。在痛苦的 jquery 中，它通过以下方式向选择菜单添加选项：

 $.each(data.DropDownOptions, function() {
     if (this.ID != undefined) {
          $(".SelectDDL").append($("<option value='" + this.ID + "'></option>").html(this.Option));
           }
      });

选项中经常有 " 符号，在点 "this.Option" 显示为 &quot 因为它的 JSON。但在实际下拉列表中它们显示为 "（实际符号）。

我使用几乎相同的逻辑并使用这样的模板将其重写为淘汰赛。

function CarOptionMenu(data) {
    return {
        CarOptions: ko.observableArray(data),
        selection: ko.observable()
    }
}
function KnockoutModel() {
    var self = this;
    self.menuWrapper = ko.observableArray([]);
}

var list = new KnockoutModel();
ko.applyBindings(list );

并在上面的 jQuery 函数中添加了如下选项：

  list.menuWrapper.push(new CarOptionMenu(data.DropDownOptions));

除了 &quot 仍然是 &quot 并且永远不会被解析为 " 符号之外，哪个工作正常。关于如何解决这个问题的任何想法？

--编辑-- 这是选择元素和模板：

    <script type="text/html" id="car-option-menu-template">
        <select data-bind='options:CarOptions, optionsText:"Option",optionsValue:"ID",value: selection' style="width: 100% !important; margin-top: 5px;"></select>
    </script>
    <div data-bind="template: { name: 'car-option-menu-template', foreach: menuWrapper}"></div>

【问题讨论】：

data-bind 在<select> 元素中的外观如何？
@haim770 将其添加到我的帖子底部
我敢打赌，optionsText 使用textContent 或类似的函数而不是innerHTML 来执行一个函数。您还没有揭示最重要的难题：构建单个选项（例如data.dropDownOptions 中的所有项目）的函数是什么？另一方面，是什么阻止您在传递 JSON 之前将其转换为纯 JS？没有包含 JSON 字符串的选项有点奇怪？

标签： jquery json knockout.js

【解决方案1】：

有一些内置函数可以对 json 字符串进行编码和解码，例如 ko.toJSON 和 ko.utils.parseJson，但听起来您的 json 中混合了一些 html 实体编码。

当您将数据推送到 CarOptionMenu 时，您可以添加一个函数来解码 html 编码位。 html编码参考这个问题：HTML Entity Decode

我建议首先看看为什么你的 json 中有 html 实体编码。引号在 json 字符串中用斜杠 (\") 转义，而不是 &quot.

【讨论】：