使文本加粗运行时答案

【问题标题】：make text bold runtime使文本加粗运行时
【发布时间】：2013-07-25 19:00:54
【问题描述】：

我正在使用敲除将视图绑定到视图模型。

我的看法是

<table>
   <tr>
      <td  data-bind ="text: ConcenatedData"></td>
   </tr>
</table>

我的视图模型进行 ajax 调用并将数据绑定到可观察数组

function showData() {
    return $.ajax({
        url: "../Service/EmpData",
        type: "PUT",
        contentType: 'application/json',
        processData: false,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        },
        success: function (allData) {
            var Data = $.map(allitems, function (item) {
                return new EmpList(item);
            });
            self.EmployeeData(Data);
        }
    });
}

function EmpList(items) {
    this.EmpName = ko.observable(data.EmpName);
    this.EmpId = ko.observable(data.EmpId);
    this.ConcenatedData = ko.observable(data.ConcenatedData);
}

我在我的 observable 中得到了 <temp>Is this Emp required</temp>in our company 的数据

所以我想让标签<temp> and </temp>.之间的文本加粗，所以输出将是我们公司需要这个Emp`

如何做到这一点？

更新

我已经创建了小提琴 here 我希望标签 <temp> and </temp>. 之间的文本为粗体。

【问题讨论】：

现代浏览器会得到这个css规则：temp{font-weight: bold;}
@Cherniv 你能告诉我怎么做吗？
他刚刚做了，哈哈 xD 你只是把他给的代码放在一对<style> 标签中，就像任何其他 CSS 一样。或者，如果可以通过 <temp style="font-weight:bold"> 将其放入 <temp> 选择器中
等你知道 knockout.js 而不是简单的 CSS？
不，很高兴。如果您有任何问题，请尝试查看并告诉我们。

标签： jquery html knockout.js

【解决方案1】：

这是一个有效的小提琴：http://bit.ly/172W1TG

将<temp> 更改为<span>
将text: 更改为html:
添加.makeBold父<tr>
添加这个css

.makeBold 跨度 { 字体粗细：粗体；边框底部：5px 纯黑色； }

【讨论】：

非常感谢您的解决方案，但我需要接受另一个解决方案，因为他帮了我很多。我为你的努力投了赞成票。

【解决方案2】：

另一种无需更改跨度的解决方案（即使您应该更改为跨度，因为它是一个真正的标签而<temp> 不是）：

http://jsfiddle.net/TaF8W/69/

变化：

<td data-bind="text: display"></td>

收件人：

<td data-bind="html: display"></td>

编辑：

更新以包含<val> - http://jsfiddle.net/TaF8W/70/

【讨论】：

【解决方案3】：

另一种解决方案是使用knockout.js 自定义绑定，它将<temp> 和<val> 标记动态替换为<span> 和"。如果您想在未来使用 knockout.js 进行一些更高级的自定义绑定，这可能会有所帮助

自定义绑定可能如下所示：

ko.bindingHandlers.boldText = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        val = valueAccessor().replace('<temp>', '<span class="makeBold">').replace('</temp>', '</span>').replace('<val>', '"').replace('</val>', '"');

        element.innerHTML = val;
    }
};

然后您将执行以下绑定：

<td data-bind="boldText: display"></td><td >&nbsp;&nbsp;&nbsp;</td>

在此处查看 jsfiddle：http://jsfiddle.net/PC54y/1/

【讨论】：