Knockout - odc. 5

Dzisiaj trochę uzupełnień do odcinka nr. 2 o Knockout, który był na temat wbudowanych data bindingów. Prosta refleksja odnośnie składni - umożliwia proste wywoływanie funkcji, definiowanie warunków, składowych styli itd, dzięki czemu w Knockout pewne przypadki można zapisać krócej i prościej nawet niż w … aplikacjach XAML (dotychczas w moich wpisach używałem często sformułowania “aplikacje Silverlight”, ale bardzo często miałem też na myśli WPF oraz aplikacje Metro w XAML dla Windows 8 - dlatego przyjmijmy od tego odcinka zasadę, że jeżeli coś nie będzie dotyczyło stricte wyłącznie Silverlight, to będę używał zawsze bardziej ogólnego sformułowania “aplikacje XAML” do porównań z HTML5 i JavaScript).

Bindingi wbudowane - uzupełnienia

• hasFocus
• optionsText
• optionsValue

Update wartości

• change - domyślnie (po opuszczeniu kontrolki)
• afterkeydown - natychmiastowo
• keyup
• keypress

my.viewModel = {

details:  ko.observable(“<strong><em>Rower niebanalny</em></strong>”),

model:  {

           code: ko.observable(“Rower 1590”),

           name: ko.observable(“Rower Euro 2012”)

}

};

<div data-bind=”html: details”></div>

<span data-bind=”text: model.code”></span>

my.viewModel = {

selectedColor:  ko.observable(),

selectedColors: ko.observableArray([]),

colors:  [{ key: ”OR”,  name: “Orange” },

                { key: ”LI”, name: “Lime” },

                { key: ”YE”, name: “Yellow” } ],

 

textboxHasFocus:  ko.observable(false),

 

detailsAreVisible:  ko.observable(false),

showDetails:  function() {

       this.detailsAreVisible(true);

},

hideDetails: function() {

       this.detailsAreVisible(false);

},

 

total: ko.observable(12),

 

url: ko.observable(“http://marcinkruszynski.blogspot.com”)

};

<div data-bind=”foreach: colors”>

<input type=”radio” data-bind=”value:  key,  checked:  $parent.selectedColor” /><span data-bind=”text: name”></span>

</div>

<select data-bind=”options:  colors, value:  selectedColor,  optionsText: ‘name’,  optionsValue: ‘key’”></select>

<select data-bind=”options: colors,  selectedOptions: selectedColors, optionsText: ‘name’, optionsValue: ‘key’”  multiple=”multiple”></select>

<input type=”text” data-bind=”hasfocus: textboxHasFocus” />

<div data-bind=”text: model.code, event: {mouseover:  showDetails,  mouseout:  hideDetails}” />

<div data-bind=”visible: detailsAreVisible”>

</div>

<input type=”text” data-bind=”value: total, style: {color:  total() < 0 ? ‘red’ : ‘green’ }”/>

<input type=”text” data-bind=”value: total, css: {negative: total() < 0,  positive: !(total() < 0) }”/>

<a data-bind=”attr: {href: url,  title: model.name}, text: model.code”></a>