- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 3735
With observables we can automatically update our binding, and CSS binding is to apply CSS or not. Check this code:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/knockout-3.2.0.js"></script> <script type="text/javascript" src="/index.js"></script> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body onload="ko.clearBinding; ko.applyBindings(someModel)"> <button onclick="someModel.makeMeBold(!someModel.makeMeBold()); someModel.someText('frsfd')">CSS test</button> I am another test <strong data-bind="text: someText"></strong> <p data-bind="css: {knockoutTest: makeMeBold()}">Now I want some css to be binded.</p> </body> </html>
JS:
someModel = { someText: ko.observable("I am a test!"), makeMeBold: ko.observable(true) }
CSS:
p.knockoutTest { font-weight: bold; } p.makeMeItalic { font-style: italic; }
Note how I called:
someModel.makeMeBold()
and set "makeMeBold":
someModel.makeMeBold(!someModel.makeMeBold())
We are just setting css visible true or false.
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 760
Just a short note to myself, what we need for options binding, so that it can work properly.
<select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' ,value: myTest "></select>
Where myTest is like:
function CarsView(initialValues) { var self = this; self.myTest = ko.observable(initialValues); }
If we need model to pass, then model should look like:
carsModel = [ { carTypes: ko.observable('Ferrari'), myTest: ko.observable('Ferrari') } ];
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 5867
Just a short note to myself, what we need for options binding, so that it can work properly.
<select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' ,value: myTest "></select>
Where myTest is like:
function CarsView(initialValues) { var self = this; self.myTest = ko.observable(initialValues); }
If we need model to pass, then model should look like:
carsModel = [ { carTypes: ko.observable('Ferrari'), myTest: ko.observable('Ferrari') } ];
Not finished example you can see here.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 3749
If you want to bind attributes, then declare them under the quotes, something like:
attr: {id: 'availableSensorsId' + $index()}
Where $index is binding context