CODEWITHSUNDEEP
knockout.jsknockout-3.0
Cylon Cat
Cylon Cat

Reputation: 7201

knockoutjs style is not binding

I have the following template for knockout.js:

        <script type="text/html" id="feed-template">
            <li data-bind="style: { backgroundColor: BackColor, backgroundImage: 'none' }"   >
                <a style="text-shadow: none" href="#" data-bind="click: ItemClicked">
                    <h1 style="WHITE-SPACE: normal; FONT-WEIGHT: bold" data-bind="text: PatientName"></h1>
                    <p style='white-space: normal;' data-bind="text: Description"></p>
                    <p style='white-space: normal;' data-bind="text: FeedEvent"></p>
                    <p style='white-space: normal;' data-bind="text: FeedTimeString"></p>
                    <span class="ui-li-count" data-bind="text: DisplayCount"></span>
                </a>
                <!-- ko if: ShowDelete -->
                    <a style="background: none; text-shadow: none;" href="#ConfirmUnfollowPopup" data-transition="pop" data-rel="popup" data-position-to="window" data-icon="delete" data-role="button"  data-inline="true" data-theme="b" data-bind="click: UnfollowClicked"></a>
                <!-- /ko -->
            </li>
        </script>

The template is being bound to an ObservableArray of plain javascript objects, using a foreach: binding. All of the object properties are binding correctly except BackColor. BackColor is a property, not a function, and it's value is always a correct CSS color (e.g., #556677); however, it is bound in the DOM simply as BackColor, not its value.

This template and binding worked in knockout.js 2.1, but I'm migrating it to knockout.js 3.0, where it does not work.

I've tried adding a function to the javascript object that returns the CSS color, and binding to ShowBackColor() but this generates a javascript error deep in knockout.

Any suggestions on getting this background style color to bind correctly?

Upvotes: 1

Views: 1015

Answers (2)

Spook
Spook

Reputation: 25927

You can cheat by using attr binding. This is a workaround, not a solution (I have the same problem):

data-bind="attr: { style: 'background-color: ' + BackColor() + '; background-image: none' }"

Upvotes: 0

Chuck Schneider
Chuck Schneider

Reputation: 344

Try putting quotes around backgroundColor. 

data-bind="style: { 'backgroundColor': BackColor, 'backgroundImage': 'none' }"

Upvotes: 0

Related Questions