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

Question

我想通过 contact.html

升级我 contact.ts 中的变量

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>

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

谁知道点击link时如何绑定页面？

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

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

How to bind from view to model in aurelia

aurelia

contact.ts

contact.html