- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 6390
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: 4270
If you want to bind attributes, then declare them under the quotes, something like:
Â
attr: {id: 'availableSensorsId' + $index()}
Where $index is binding context
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4351
When we want to apply bindings on the particular element using jquery, we should use following code:
ko.applyBindings(new CarsViewModel(), $('#form0')[0]);
Zero ([0]) is important, otherwise it will not work.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 3977
It seems that knockout doesn't like HTML without closing tags. Code like:
<div data-bind="foreach: Cars"> <!-- car value has to exist and has to be under quotes, otherwise it doesn't work --> <select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' "/> <br>test</br> </div>
Will produce something like (notice that "test" is inside select tag):
<select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' "><option value="BMW">BMW</option><option value="Ferrari">Ferrari</option><option value="Fiat">Fiat</option><option value="Ford">Ford</option><option value="Mercedes-Benz">Mercedes-Benz</option> test </select>
Code like:
<div data-bind="foreach: Cars"> <!-- car value has to exist and has to be under quotes, otherwise it doesn't work --> <select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' "></select> <br></br> </div>
Will produce something like:
<div data-bind="foreach: Cars"> <!-- car value has to exist and has to be under quotes, otherwise it doesn't work --> <select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' "><option value="BMW">BMW</option><option value="Ferrari">Ferrari</option><option value="Fiat">Fiat</option><option value="Ford">Ford</option><option value="Mercedes-Benz">Mercedes-Benz</option></select> <br><br> </div>
Notice <br> tag two times
Â
Finally code (notice that br is without closing tag):
<div data-bind="foreach: Cars"> <!-- car value has to exist and has to be under quotes, otherwise it doesn't work --> <select autowidth="true" data-bind=" options: $root.carTypes ,optionsValue: 'carValue' "></select> <br/> </div>
Will work as expected