آموزش فرم ها در برنامه نویسی اورلیا

saber

4 سال پیش

امتیاز دهید post

آموزش فرم ها در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فرم ها در برنامه نویسی اورلیا خواهیم پرداخت.

در این درس، شما می آموزید که چگونه از فرم ها در فریم ورک اورلیا استفاده کنید.

ورودی متن

ابتدا نحوه ارسال فرم ورودی را خواهیم دید. این نمای دارای دو فرم ورودی برای نام کاربری و گذرواژه است. برای اتصال داده ها از value.bind استفاده خواهیم کرد.

app.html

&lt;template&gt;  
   &lt;form role = "form" submit.delegate = "signup()"&gt;
      
      &lt;label for = "email"&gt;Email&lt;/label&gt;
      &lt;input type = "text" value.bind = "email" placeholder = "Email"&gt;

      &lt;label for = "password"&gt;Password&lt;/label&gt;
      &lt;input type = "password" value.bind = "password" placeholder = "Password"&gt;

      &lt;button type = "submit"&gt;Signup&lt;/button&gt;
   &lt;/form&gt;
&lt;/template&gt;

<label for = "email">Email</label>

<label for = "password">Password</label>

<button type = "submit">Signup</button>

</form>

</template>

تابع ثبت نام فقط نام کاربری و رمز ورود را از ورودی ها گرفته و در کنسول برنامه نویس وارد می کند.

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

export class App {

email = '';

password = '';

signup() {

var myUser = { email: this.email, password: this.password }

console.log(myUser);

};

}

Aurelia Forms Input

چک باکس

مثال زیر نحوه ارسال کادر تأیید با چارچوب اورلیا را نشان می دهد. ما یک کادر تأیید ایجاد می کنیم و مقدار علامت زده شده را به مدل نمای خود پیوند می دهیم.

app.html

&lt;template&gt;
   &lt;form role = "form" submit.delegate = "submit()"&gt;
   
      &lt;label for = "checkbox"&gt;Checkbox&lt;/label&gt;
      &lt;input type = "checkbox" id = "checkbox" checked.bind = "isChecked"&gt;&lt;br/&gt;
      &lt;button type = "submit"&gt;SUBMIT&lt;/button&gt;
      
   &lt;/form&gt;
&lt;/template&gt;

<label for = "checkbox">Checkbox</label>

<button type = "submit">SUBMIT</button>

</form>

</template>

ارسال فرم فقط مقدار علامت زده شده را در کنسول ثبت می کند.

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

export class App {

constructor() {

this.isChecked = false;

}

submit() {

console.log("isChecked: " + this.isChecked);

}

Aurelia Forms Checkbox

دکمه های رادیو

مثال زیر نحوه ارسال دکمه های رادیویی را نشان می دهد. نحو “repeat.for = “option of options از طریق آرایه ای از اشیا repeat تکرار می شود و برای هر شی دکمه رادیویی ایجاد می کند. این یک روش زیبا برای ایجاد پویا عناصر در چارچوب اورلیا است. استراحت همانند مثالهای قبلی است. ما در حال اتصال مدل و مقادیر بررسی شده هستیم.

app.html

&lt;template&gt;
   &lt;form role = "form" submit.delegate = "submit()"&gt;
    
      &lt;label repeat.for = "option of options"&gt;
         &lt;input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/&gt;
            ${option.text}
      &lt;/label&gt;
      &lt;br/&gt;
        
      &lt;button type = "submit"&gt;SUBMIT&lt;/button&gt;
   &lt;/form&gt;
&lt;/template&gt;

<input type = "radio" name = "myOptions"

model.bind = "option" checked.bind = "$parent.selectedOption"/>

${option.text}

</label>

<br/>

<button type = "submit">SUBMIT</button>

</form>

</template>

در مدل view ما، ما یک آرایه از اشیا this.options ایجاد خواهیم کرد و تعیین می کنیم که اولین دکمه رادیویی علامت گذاری شود. دوباره، دکمه SUBMIT فقط وارد کنسولی می شود که کدام دکمه رادیویی تیک خورده است.

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 

         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

export class PeriodPanel {

options = [];

selectedOption = {};

constructor() {

this.options = [

{id:1, text:'First'},

{id:2, text:'Second'},

{id:3, text:'Third'}

];

this.selectedOption = this.options[0];

}

submit() {

console.log('checked: ' + this.selectedOption.id);

}

اگر دکمه سوم رادیو را بررسی کنیم و فرم خود را ارسال کنیم، کنسول آن را نشان می دهد.

Aurelia Forms Radio

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

امتیاز دهید post

برچسب ها : آموزش اورلیا آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش فرم ها در برنامه نویسی اورلیا

آموزش فرم ها در برنامه نویسی اورلیا

ورودی متن

app.html

چک باکس

app.html

app.js

دکمه های رادیو

app.html

app.js

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

بدون دیدگاه

آموزش فرم ها در برنامه نویسی اورلیا

ورودی متن

app.html

چک باکس

app.html

app.js

دکمه های رادیو

app.html

app.js

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه