stuart-d2
11/10/2014 - 8:00 PM

Computed Value Observable Duplicate String Eliminator. in order to run in jsFiddle, select External Resources and add the knockout URI (ht

Computed Value Observable Duplicate String Eliminator.
in order to run in jsFiddle, select External Resources and add the knockout URI (http://knockoutjs.com/downloads/knockout-3.2.0.js) If string A contains a instance of String B, it will only return String A. Else, If string A does not contain an instance of String B, it will return both String A and String B. • Use Case : This is a solution to the problem where for UI display purposes, I want to reduce duplicates. For example, we have UI cosmetic issues where seriesName is 'Scion-tC' and grade level is 'tC'. Thus when they were concatenated in the UI, would display 'Scion-tC tC'. Now, the secondary instance of 'tC' will be suppressed for a clean look. If grade level is something else, like 'Premium', the entire string will display 'Scion-tC Premium'.

Computed Value Observable Duplicate String Eliminator.js
content_copyfile_download
// Here's my data model
 function viewModel() {
    var self = this;
    self.seriesName = ko.observable('scion-tc');
    self.gradeLevel = ko.observable('TC');
     
self.computedName = ko.computed(function() {
var result;
if (self.seriesName().indexOf(self.gradeLevel().toLowerCase()) >= 0) {
        var result = self.seriesName();
} else {
      var result = self.seriesName() + " " + self.gradeLevel();
}
return result;
    }, this);
}

ko.applyBindings(new viewModel());
Computed Value Observable Duplicate String Eliminator.html
content_copyfile_download
<div class='liveExample'>   
    <p>series :  <span data-bind='text: seriesName'></span></p> 
    <p>grade : <span data-bind='text: gradeLevel'> </span></p> 
    <h2>Displays : <span data-bind='text: computedName'> </span></h2>  
</div>
Computed Value Observable Duplicate String Eliminator.css
content_copyfile_download
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }