CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
Rayudu
Rayudu

Reputation: 1816

Knockout HTML binding and length of HTML in terms of string

I have one string which is having html code. So I am binding in view like

<div data-bind="html : Notes()"></div>

Now I want add one class to div based on length of Notes with out Html elements.

Suppose Notes = "<b>Hello</b>" , then Notes.length = 12 (With <b> and </b>)

But I need to replace all html elements and I need to get length as 5(Hello).

How can I achieve this below line.

<div data-bind="html : Notes(), css:{myclass : Notes().length > 5}"></div>

Upvotes: 0

Views: 229

Answers (2)

Sankar Krishnamoorthy
Sankar Krishnamoorthy

Reputation: 1335

You can add dynamic class by css property and then add static class by attr. property. Details are available in the below link. Do let me know if this does not help.

combine dynamic and static classes through css binding, knockout.js

Upvotes: 0

user3297291
user3297291

Reputation: 23372

You could make a computed that creates a virtual element and returns its text length like so: 

var noteLength = ko.computed(function() {
  var tempElement = document.createElement("div");
  tempElement.innerHTML = Notes();

  return tempElement.innerText.length;
});

Upvotes: 2

Related Questions