knockout.js
Пользовательские привязки
Поиск…
Регистрация привязки
Связывание Cusom должно регистрироваться путем расширения текущего объекта привязки нокаута.
Это делается путем добавления нового свойства к объекту.
ko.bindingHandlers.newBinding = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
}
};
Пользовательский режим fade in / fade out visibility binding
В этом примере реализована настраиваемая привязка, которая переключает видимость (аналогично существующей видимой привязке ), но будет использовать API затухания jQuery для анимирования перехода от видимого к невидимому.
Определение пользовательского привязки:
//Add a custom binding called "fadeVisible" by adding it as a property of ko.bindingHandlers
ko.bindingHandlers.fadeVisible = {
//On initialization, check to see if bound element should be hidden by default
'init': function(element, valueAccessor, allBindings, viewModel, bindingContext){
var show = ko.utils.unwrapObservable(valueAccessor());
if(!show){
element.style.display = 'none';
}
},
//On update, see if fade in/fade out should be triggered. Factor in current visibility
'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var show = ko.utils.unwrapObservable(valueAccessor());
var isVisible = !(element.style.display == "none");
if (show && !isVisible){
$(element).fadeIn(750);
}else if(!show && isVisible){
$(element).fadeOut(750);
}
}
}
Образец разметки с привязкой fadeVisible:
<div data-bind="fadeVisible: showHidden()">
Field 1: <input type="text" name="value1" />
<br />
Field 2: <input type="text" name="value2" />
</div>
<input data-bind="checked: showHidden" type="checkbox"/> Show hidden
Пример модели:
var ViewModel = function(){
var self = this;
self.showHidden = ko.observable(false);
}
ko.applyBindings(new ViewModel());
Пользовательский текст заменяет привязку
Этот пример является настраиваемой привязкой, которая заменяет текст всякий раз, когда обновляется входное значение. В этом случае пробелы будут заменены на «+». Он предназначен для использования наряду с существующим связыванием значений и показывает привязку к литералу объекта.
Пример разметки с заменой replaceText:
<input type="text" data-bind="value: myField, replaceText: {value: myField, find:' ', replace:'+'}" />
Определение пользовательского привязки:
ko.bindingHandlers.replaceText = {
//On update, grab the current value and replace text
'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
//Get the current value of the input
var val = ko.utils.unwrapObservable(valueAccessor().value());
//Replace text using passed in values obtained from valueAccessor()
//Note - Consider using something like string.js to do the find and replace
var replacedValue = val.split(valueAccessor().find).join(valueAccessor().replace);
//Set new value
valueAccessor().value(replacedValue);
}
}
Пример модели:
var ViewModel = function(){
var self = this;
self.myField = ko.observable("this is a simple test");
}
ko.applyBindings(new ViewModel());
Заменить с помощью регулярного выражения
Определение пользовательской привязки
function regExReplace(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var observable = valueAccessor();
var textToReplace = allBindingsAccessor().textToReplace || '';
var pattern = allBindingsAccessor().pattern || '';
var flags = allBindingsAccessor().flags;
var text = ko.utils.unwrapObservable(valueAccessor());
if (!text) return;
var textReplaced = text.replace(new RegExp(pattern, flags), textToReplace);
observable(textReplaced);
}
ko.bindingHandlers.regExReplace = {
init: regExReplace,
update: regExReplace
}
использование
ViewModel
ko.applyBindings({
name: ko.observable(),
num: ko.observable()
});
Посмотреть
<input type="text" data-bind="textInput : name, regExReplace:name, pattern:'(^[^a-zA-Z]*)|(\\W)',flags:'g'" placeholder="Enter a valid name" />
<span data-bind="text : name"></span>
<br/>
<input class=" form-control " type="text " data-bind="textInput : num, regExReplace:num, pattern: '[^0-9]',flags: 'g' " placeholder="Enter a number " />
<span data-bind="text : num"></span>