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

Question

我想通过获取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。

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

Answer 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>元素，而这正是您要实现的行为。