Knockoutjs abbreviation KO
Ko's dynamic properties refer to ViewModel properties that are not determined, and those that are later required.
What is an indeterminate attribute, such as Listmodel if you edit an item, you want to change the status of this item to edit. The data does not include the edit attribute, and when MVVM is tied, an error is found.
Then it is necessary to expand KO to achieve our goal.
The first is to recognize the value attribute binding, and the value-free attribute binding:
one, a value attribute binding：
JS Model:
Copy Code code as follows:
$ (function () {
var ViewModel = function () {
var self = this;
Self.text = ko.observable (1);
};
Ko.applybindings (New ViewModel ());
});
UI bindings:
Copy Code code as follows:
<div data-bind= ' Text:text ' ></div>
Present:
non-value attribute binding：
JS Model:
Copy Code code as follows:
$ (function () {
var ViewModel = function () {
var self = this;
Self.text = Ko.observable ();
};
Ko.applybindings (New ViewModel ());
});
Of course text is a generic value type, as is the case with a value attribute binding, if the value type is an object, and a property is used with:
UI bindings:
Copy Code code as follows:
<div data-bind= ' With:text ' >
<div data-bind= "Text:property" ></div>
</div>
Three, dynamic property binding:
Dynamic property binding, then the property itself is not sure, the method of using Ko is difficult to implement, so need to expand.
JS Expansion:
Copy Code code as follows:
Smoke and mirrors q:397386036
Ko.bindingHandlers.ext = {
Update:function (element, Valueaccessor, Allbindingsaccessor, ViewModel, BindingContext) {
var value = ko.utils.unwrapObservable (Valueaccessor ());
For (var handler in value) {
if (Value.hasownproperty (handler)) {
if (typeof Viewmodel[value[handler]] = = ' undefined ') {
Viewmodel[value[handler]] = ko.observable ();
}
Ko.bindinghandlers[handler].update (element, function () {return viewmodel[value[handler]];
}
}
}
};
JS Model:
Copy Code code as follows:
$ (function () {
var ViewModel = function () {
};
Ko.applybindings (New ViewModel ());
});
UI bindings:
Copy Code code as follows:
<div data-bind= "ext:{text: ' Text '}" ></div>
<!--events for easy testing-->
<a href= "javascript:void (0)" data-bind= "Click:function () {$data. Text (1);}" > Change text value </a>
EXT, the first text is the Ko text method, the second text must be a string, is the Context/viewmodel property. So the dynamic properties of ext can be used in any Ko method, such as Ext:{text: ' Text ', Value: ' Text '}
Present:
