如何在Aurelia中从视图绑定到模型

时间:2018-07-10 08:10:22

标签: aurelia aurelia-binding aurelia-router

我想通过获取contact.ts来升级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>

我想根据单击page的哪个项来更改pagesList的值。  例如,如果我单击pageList中的2,我想将page中的contact.ts值附加到2

有人知道单击链接时如何绑定页面吗?

1 个答案:

答案 0 :(得分:1)

您可以执行以下操作:

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

然后在您的视图模型中:

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

我假设这是一个需要样式的页面选择组件,但是如果您需要类似的功能而不需要特定的样式,则应使用<select>组件,如下所示:

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

如果您不需要样式,则建议使用此选项,因为它使用本机HTML <select>元素,而这正是您要实现的行为。