使文本加粗运行时

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用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); 
}

我在观察到的得到的数据为<temp>Is this Emp required</temp>in our company

所以我想在标签<temp> and </temp>.之间制作文字加粗所以输出将是我们公司是否需要

如何做到这一点？

我已经创建了小提琴here更新我想标签<temp> and </temp>.之间的文本要大胆。

回答：

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

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

变化：

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

收件人：

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

编辑：

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

回答：

这里是工作提琴：http://bit.ly/172W1TG

  • 变化<temp>到<span>

  • 变化text:到html:

  • 添加.makeBold的父<tr>

  • 添加这个CSS

    .makeBold跨度{ font-weight：bold; border-bottom：5px纯黑色; }

回答：

另一种解决方案是使用knockout.js它定义绑定，动态地取代了<temp>和<val>标签<span>和"。如果您想在未来使用淘汰赛进行更高级的自定义绑定，这可能会有所帮助。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/

以上是 使文本加粗运行时 的全部内容， 来源链接： utcz.com/qa/258912.html

回到顶部