Merhaba bu yazımda size alpacajs den bahsedeceğim. Bazı projelerde form elementlerini statik olarak koda gömmek yerine elinizdeki Json data ya göre bu form içeriğini de güncellemek istersiniz. İşte bu durumlarda alpacajs sizlere kolay bir çözüm sunmakta.
Siz formun nereye geleceğini ve hangi elemanlardan oluşacağını JSON formatında alpaca'ya veriyorsunuz o sizin yerinize formu oluşturuyor. Nasıl mı diyorsanız yazının devamını inceleyin..
Alpaca Jquery ve bootstrap tabanlı bir proje olduğu için öncelikle jquery ve bootstrap bağımlılıklarını projenize ekleyin.
1-) Bootstrap ve Jquery dependency lerini sayfaya eke
|
<!-- dependencies (jquery, handlebars
and bootstrap) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"
></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
|
2-) Alpaca'yı da aynı şekilde sayfaya ekle.
|
<!-- alpaca -->
<link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
|
3) body tagları arasında html form'un oluşturulacağı(çıktı) bir alan belirle. Form içeriği buraya gelecek.
|
<div
id="form1"></div>
|
Burada oluşturacağımız form "form1" id sine sahip DIV'in içerisinde olacak.
4-) Html formun içinde oluşturmak istediğimiz elementleri JSON formatında ekliyoruz.
|
"schema": {
"title": "Sample Alpaca Form1",
"type": "object",
"properties": {
"name": {
"type": "integer",
"title": "İsim"
},
"age": {
"type": "integer",
"title": "Yaş"
}
}
}
|
"JSON" fomatında "Schema" objesini oluşturduk. içinde yaş ve isim gireceğimiz html elementlerini tanımladık. Bu elementlerin tipini belirttik(integer,string).
5-) Form1'de html çıktısı almak için Alpaca'yı çağırıp Json datayı bu fonksiyona input olarak veriyoruz
|
<script
type="text/javascript">
$("#form1").alpaca({
"schema": {
"title": "Sample Alpaca Form1",
"type": "object",
"properties": {
"name": {
"type": "integer",
"title": "isim"
},
"age": {
"type": "integer",
"title": "Yaş"
}
}
}
});
</script>
|
Yukarıki işlemleri uyguladığımızda alapacajs belirttiğiniz JSON içindeki elementleri sizin yerinize oluşturacaktır.
6-) bazı önemli property ler aşağıdadır:
|
"name": {//input[type='text']
"type":"string",
"title":"Name"
},
"ranking": {//radio group
"type":"string",
"title":"Ranking",
"enum":['excellent','ok','so so']
},
"feedback" : {//Textarea
"type": "textarea",
"rows": 5,
"cols": 40,
"helper": "Please enter your feedback."
},
"ranking": {//listbox(select option)
"type": "select",
"helper": "Select your ranking.",
"optionLabels":
["Awesome!", "It's Ok", "Hmm..."]
},
"name": {//required(input[type='text'])
"type":"string",
"title":"Name",
"required":true
},
"name": {//max character(input[type='text'])
"size": 20,
"helper": "Please enter your name."
},
|
Kaynak:
Hiç yorum yok:
Yorum Gönder