Knockout - odc. 3

W tej części notatki nt. własnych rodzajów data bindingów, funkcji narzędziowych oraz trochę uzupełnień.

Własne bindingi

ko.bindingHandlers.myBinding = {

init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

}, //pierwszy raz

update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

} //pierwszy raz i przy każdej zmianie

}

Update wartości

view model:

addOnEnter: function(event) {

var keyCode = (event.which ? event.which : event.keyCode);

if (keyCode == 13) {

       viewModel.addTag();

}

return true;

}

data-bind = ”value:  tagToAdd,  valueUpdate:  ‘afterkeydown’, event: { keypress:  addOnEnter }”

Można zastąpić:

ko.bindingHandlers.executeOnEnter = {

init:  function(element, valueAccessor, allBindingsAccessor, viewModel)  {

         var value = valueAccessor();

        $(element).keypress(function (event) {

                 var keyCode = (event.which ? event.which : event.keyCode);

                 if (keyCode == 13) {

                        value.call(viewModel);

                        return false;

                 }

                  return true;

        });

}

}

data-bind = ”value: tagToAdd, valueUpdate: ‘afterkeydown’, executeOnEnter:  addTag”

Utilities

• ko.utils.arrayFilter
• ko.utils.arrayFirst
• ko.utils. arrayForEach
• ko.utils. arrayIndexOf
• ko.utils.arrayMap
• ko.utils.arrayPushAll
• ko.utils.arrayRemoveItem
• ko.utils.compareArrays
• ko.utils.unwrapObservable

protectedObservable (http://www.knockmeout.net) - observable z  funkcjami commit() i reset()

viewModel.selectedTag().Name.commit();  //trzeba jawnie wyspecyfikować property Name

var data = [

{ Id: 1,  Name: “Szybciej” },

{ Id: 2, Name: “Polska jest ważna”}

];

var tagItems = ko.utils.arrayMap(data, function(item) {

return new tagItem(item.Name, item.Id);

});

tags:  ko.toProtectedObservableItemArray(data);

viewModel.selectedTag().commit();  //nie trzeba specyfikować propercji

Obsługa danych

• ko.toJS()
• ko.toJSON()

$.getJSON(“/tags”, function(data) {

var viewModel = {

       ….

       addTag: function() {

                var newTag = { Name:  this.tagToAdd() };

                ajaxAdd(“/tags”, ko.toJSON(newTag), function (data) {

                          viewModel.tags.push(new ko.protectedObservableItem(data));

                });

       }

};

})

Podgląd zawartości view modelu:

<div data-bind=”text:  ko.toJSON($data)”></div>

Inne

data-bind=”css: {klasa:  warunek logiczny}”   //bindowanie CSS

data-bind=”attr: { href: Url }”   //bindowanie atrybutu href

ko.dependentObservable(function () {  //automatyczne odświeżanie

$.getJSON(“/drills?tagId=” + this.selectedTag().Id(), function (data) {

         viewModel.currentTagDrills(ko.toProtectedObservableItemArray(data));

});

}, viewModel);

http://geekswithblogs.net/michelotti