Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Knockout JS CSS binding

Posted on 2014-02-08
4
Medium Priority
?
768 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

604 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