2

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

我有我的看法

<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吗？

如何做到这一点？

更新

我在这里创建了小提琴我希望标签之间的文本 <temp> and </temp>.是粗体的。

4

3 回答 3

3

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

  • 更改<temp>为<span>
  • 更改text:为html:
  • 添加.makeBold父级<tr>

  • 添加这个CSS

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

于 2013-07-25T20:21:33.440 回答
1

另一种解决方案是为其使用 knockout.js 自定义绑定，它将<temp>and<val>标记动态替换为<span>and "。如果您想在将来使用 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/

于 2013-07-25T20:47:33.990 回答
1

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

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

改变：

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

至：

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

编辑：

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

于 2013-07-25T20:25:52.053 回答