Question

我正在使用knockout将视图绑定到viewmodel。

我的观点是

<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>.之间加粗文字，因此我们公司的输出将是否需要此

如何实现这一目标？

更新

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

Answer 1

这是一个工作小提琴：http://bit.ly/172W1TG

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

.makeBold span { font-weight：bold; 边框底部：5px纯黑色; }

Answer 2

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

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

变化：

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

要：

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

修改

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

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

使文本加粗运行时

3 个答案: