make text bold runtime

2
votes

I am using knockout to bind view to viewmodel.

I have my view as 

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

My view model makes ajax call and binds data to observable array

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);
}

I get Data in my observable as <temp>Is this Emp required</temp>in our company

So i want to make text bold between tag <temp> and </temp>.So output will be Is this Emp required in our company`

How to achieve this?

Update

I have created fiddle here I want the text between tag <temp> and </temp>. to be bold.

3
jqueryhtmlknockout.js
Modern browsers will get this css rule: temp{font-weight: bold;} – Ivan Chernykh
@Cherniv can you please show me how? – James
He just did, haha xD You just put the code he gave in a pair of <style> tags like any other CSS. Or you could put it in the <temp> selector if you're able to by doing <temp style="font-weight:bold"> – Zach Saucier
Wait you know knockout.js but not simple CSS? – user1477388
No, Happy. Please try and see and let us know if you have any issues. – user1477388

3 Answers

3
votes

Here is a working fiddle: http://bit.ly/172W1TG

  • Change <temp> to <span>
  • Change text: to html:
  • Add .makeBold the the parent <tr>

  • Add this css

    .makeBold span { font-weight: bold; border-bottom: 5px solid black; }

1
votes

Another solution without having to change span (even though you should change to span since it's a real tag and <temp> is not):

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

Change:

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

To:

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

Edit:

Update to include <val> - http://jsfiddle.net/TaF8W/70/

1
votes

Alternative solution is to use the knockout.js custom binding for it, which replaces the <temp> and <val> tags dynamically to <span> and ". This might be helpful if you want to do some more advanced custom bindings in the future with knockout.js

The custom binding could look like:

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;
    }
};

And then you would do the following binding:

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

See a jsfiddle here: http://jsfiddle.net/PC54y/1/