.has - OtagJS/Otag GitHub Wiki

.has( ViewMap Object )

let ViewMap={
    name:'a.name'.init(), //[[Element]] <a class="name"></a>
    lastname:'a.lastname'.init() //[[Element]] <a class="lastname"></a>
}

ViewMap is a JS Object which has connections as keys and Elements or Element descriptors as values.

.has method creates connections between parent Element and children (which defined in ViewMap) To append elements without creating connection; use one of the .layout and .append methods.

let Parent='Parent'.has({
    younger:'Child'.init(),
    older:'Child'.init()
});
O.ready.then(b=>b.append(Parent)); //Append Elem to document body

The code above generates the HTML output below

<div class="Parent">
    <div class="Child"></div>
    <div class="Child"></div>
</div>

Access

.children ( Parent.children ) -Existent dynamic property in JavaScript- is useless because it doesn't work when the element is out of the document. .has method allows you to access to Child'ren even when Parent Element is not on the page or document hasn't loaded yet.

let Parent='Parent'.has({
    younger:'#younger.Child'.init(),
    older:'#older.Child'.init()
});

Parent.View.younger //<div id="younger" class="Child"></div>
// we can access without putting Element to document


Parent.View.younger.parent //<div class="Parent"></div>
// There's also a connection from child to parent


Parent.children[0]                  // X Doesn't work before DOMContentLoad
Parent.View.younger.parentElement   // X Doesn't work before DOMContentLoad

O.ready.then(b=>b.append(Parent)); //Append to document.body

Access (.V)

By the increase of the inheritence depth, syntax is going to be a mess - like View.sub.View.sub...-

To avoid this, method .V(sub:sub..) is developed.

let UralAltay='LangFamily'.has({
    Altay:'Altay Branch'.has({
        Turkish:'Turkish Languages'.has({
            Oguz:'Oguz Group'.has({
                Turkiye:'Turkiye Turkish Language'
            }),
        }),
        Mongol:'Mongol Languages',
        Tunguz:'Tunguz Languages'
    })
    Ural:'Ural Branch'.has({
        Fin:'Fin Language',
        Eston:'Eston Language',
        Magyar:'Magyar Language'
    })
});
UralAltay.View.Altay.View.Turkish.View.Oguz.View.Turkiye;  
// <div class="Turkiye Tuskish Language"></div>

UralAltay.V('Altay:Turkish:Oguz:Turkiye');                 
// <div class="Turkiye Turkish Language"></div>

O.ready.then(b=>b.append(UralAltay)); //Append to document body

Kısa Yazımlı BağNesnesi

Bağ nesnesinde sadece öge oluşturuyor ve üzerinde işlem yapmıyorsanız ( .prop vs. gibi ) .init yazmanıza gerek yoktur. Yöntem; verdiğiniz Yazı değeriyle Element oluşturur.

let Parent='Parent'.has({
    younger:'Child',       // .init() yazmamıza gerek yok
    older:'Child'         //
});
O.ready.then(b=>b.append(Parent)); //Append to doc body

Model conversion of a View(an Element) ( .val )

Otağ Felsefesinde Elementler Verilerin görsel Modelleri olduklarından belirli verilere sahip olmaları, değer atandıkları zaman bu değere göre kendini güncellemesi beklenir. Element .val komutu ile .has ile bağlanan alt ögelerin değerine erişmeyi sağlar

    let Property={
        onkeyup:function(){
            console.log(this.parent.val); // {name:'..',lastname:'..'}
        }
    }
    
    let Edit='Edit'.has({
        name:'input.name'.prop(Property),
        last:'input.last'.prop(Property)
    });
    Edit.val                           //{name:'',lastname:''}
    
    O.ready.then(b=>b.append(Edit));   //Sayfaya ekle

Örnekteki yiv; name ve last golderşleri değiştikçe Edit Elementsinin değerini söylüyor.

Preventing model appearance of a sub view

Bir alt ögenin veri karşılığında gözükmesini engellemek için başına _ konulabilir.

let Edit='Edit'.has({
    name:'input.name'.prop(Property),
    last:'input.last'.prop(Property),
    _save:'input[type="button"]'   // We prevented model appearance with _ 
            .set('Save')              
});
Edit.View.kayıt                  // <input type="button"/>   // [[Element]] erişilebilir
Edit.val                         // {name:'',lastname:''}         // Veride gözükmedi

O.ready.then(b=>b.append(Edit));   //Append to doc body