This repository has been archived by the owner on Jan 30, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Bileşen Geliştirme (Taslak)
Alper Kürşat edited this page Mar 18, 2018
·
2 revisions
#Otağ Bileşenleri
Bileşenler bir Öge'nin belirli işleri yapabilmesi için özelleştirilmiş ve geliştirilmiş halidir.
'₺Bileşen'.init(Girdi,Girdi2);
'₺Bileşen:Girdi,Girdi2'.init()
'#Resimler'.extend('₺Bediz');
Bileşenler yukarıdaki biçimlerde çağrılabilmektedir.
Bu yüzden bir Bileşen this ile başlamalıdır .
O.UI.Bileşen=function(girdiler){
return this.init();
}
Otağ'da Ögelerin veri arayüzü vardır, Bileşenlerin de aynı şekilde veri arayüzü olmalıdır.
O.UI.Bileşen=function(girdiler){
return this.has({
a:'a',
b:'input[type="text"]'
});
}
var Öge='₺Bileşen'.init();
console.log(Öge.val); //{a: null, b: null}
O.ready.then(b=>b.append(Öge)); //Sayfaya ekle
Bir value özelliği tanımlayarak öntanımlı arayüzün üstüne çıkabilirsiniz.
O.UI.Bileşen=function(girdiler){
return this.has({
a:'a'.set('Adınız:'),
b:'input[type="text"]'
}).prop({
value:function(){
return this.V('b').value;
}
});
}
var Öge='₺Bileşen'.init();
console.log(Öge.val); // null
O.ready.then(b=>b.append(Öge)); //Sayfaya ekle
Yukarıdaki örnekte bir value yöntemi tanımlayarak Öge'nin arayüzünü yalnızca b adlı alt ögesinin değeri olacak şekilde ayarlamış olduk. Ancak bu tek yönlü olduğu için yeterli değildir. Bileşenin değeri dışarıdan da değiştirilebilmelidir. Bunun için bir .set yöntemi tanımlanmalıdır.
O.UI.Bileşen=function(girdiler){
return this.has({
a:'a'.set('Adınız:'),
b:'input[type="text"]'
}).prop({
value:function(){
return this.V('b').value;
},
set:function(value){
this.V('b').value=value;
return this; // ! Bunu yazmak önemli
}
});
}
var Öge='₺Bileşen'.init();
console.log(Öge.val); // null
O.ready.then(b=>b.append(Öge)); //Sayfaya ekle
©️ Copyright | 2018 | |
---|---|---|
Otağ™ JS | ilgilenio® ⚙️ açık kaynak |