CODEWITHSUNDEEP
aurelia
Boris Dedejski
Boris Dedejski

Reputation: 316

How to bind from view to model in aurelia

I want upgrade the variable in my contact.ts by getting from my contact.html

contact.ts

@autoinject
export class ContactList {

  @bindable page;
  pageslist:any[];
  constructor(private httpClient: HttpClient, ea: EventAggregator) 
  { 
    this.page=1; //default page 
    this.pageslist=[1,2,3,4];

  }

   async attached() {
    console.log(this.apiGet+'page='+this.page+'count='+this.count)
   }
}

contact.html

<ul class="pagination" repeat.for="p of pageslist" bindable="page">
  <li>
    <a href="#" value.bind="p" click.delegate="go()">${p} </a>
  </li>
</ul>

I want to change the page value based on what item of pagesList is clicked. For example if I click on the pageList of 2, I want to append the page value in the contact.ts to 2.

Anyone know how to bind the page when link is clicked?

Upvotes: 2

Views: 495

Answers (1)

Jesse
Jesse

Reputation: 3612

You can do the following:

<ul class="pagination" repeat.for="p of pageslist">
  <li>
    <a href="#" click.delegate="select(p)">${p} </a>
  </li>
</ul>

And then in your viewmodel:

public select(pagenumber) {
  this.page = pagenumber;
}

I'm assuming this is a page-selection component which requires styling, but if you need a similar functionality without the need for specific styling, you should use a <select> component like so:

<select value.bind="page">
  <option repeat.for="p of pageslist" model.bind="p">
    ${p}
  </option>
</select>

I would recommend this option if you don't need the styling since it uses a native HTML <select> element, which is exactly the behaviour you're trying to achieve.

Upvotes: 1

Related Questions