Solved

Knockout JS CSS binding

Posted on 2014-02-08
4
734 Views
Last Modified: 2014-02-09
I am trying knockout css binding for the first time...  In a table, I want to set the Status element label to the Bootstrap class 'label-success' or 'label-important' based on the string value returned by the observable Status()  

<tbody data-bind="foreach: PurchaseRequests" >
        <tr>
            <td data-bind="text: Date"></td>
            <td data-bind="text: Reference"></td>
             <td>
                    <span data-bind="text: Status, 
                     css: {'label' :  true,
                             'label-success' :  Status() == 'Draft',
                             'label-important': Status() == 'Approved'}">
                    </span>
            </td>
         </tr>
         </tbody>

Open in new window


However, at runtime I get a:  JavaScript runtime error: Function expected

Is it even possible to do css binding on strings or does it expect to evaluate boolean or numeric values?
0
Comment
Question by:ccravenbartle
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39844748
What about :
<span data-bind="text: Status, 
                     css: {'label' :  true,
                             'label-success' :  DraftStatus(),
                             'label-important': ApprovedStatus() }">

Open in new window

And :
self.DraftStatus = ko.observable(false); // class Draft will be not set by default
self.ApprovedStatus = ko.observable(true); // class Approved will be set by default

Open in new window

0
 

Author Comment

by:ccravenbartle
ID: 39845186
Leakim: thank you for your response.  However, I'm not sure how to get this to work as Status() is a string and can be 'Draft', 'Sent For Approval', 'Approved' or 'Posted'.   I imagine I would need a new observable for each.  The PurchaseRequests observable array is being created via the Ajax call below.  Would I need loop through each element of the observable array to set up these new observables for each Purchase Request?

vm.PurchaseRequests.getPurchaseRequests = function () {
            $.ajax({
                url: '@Url.Action("GetOutstandingRequest", "ControlPanel")',
                type: 'GET',
                contentType: 'application/json',
                dataType: 'json',
                success: function (result) { vm.PurchaseRequests(result); }
            });
        }

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39845204
yes, you right

so somewhere (not sure about your code) but I hope you get the idea :

vm.DraftStatus( result.Status == "Draft" );
vm.ApprovedStatus( result.Status == "ApprovedStatus" );
...

Open in new window

0
 

Author Comment

by:ccravenbartle
ID: 39845702
Leakim: Thank you - your approach worked
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now