gpt4 book ai didi

javascript - 计算属性未在 aurelia 中更新

转载 作者:行者123 更新时间:2023-12-03 16:37:25 25 4
gpt4 key购买 nike

目前我尝试重新评估我的“已启用”属性,但在我更改页面或 pageIndex 后它没有重新计算。

page.js

export class Test {
pageIndex = 0;
pages = 2;

constructor() {
this.items = [
{title:"Prev.", enabled:this.prevAvailable},
{title:"Next", enabled:this.nextAvailable}
];
}

get prevAvailable() {
return this.pageIndex > 0;
}

get nextAvailable}() {
return this.pageIndex < this.pages;
}
}

page.html

<template>
<ul>
<li repeat.for="item of items">
<button if.bind="item.enabled">
${item.title}
</button>
</li>
</ul>
</template>

标准分页控件实现此行为的正常方法是什么?如果在最后一页,我会尝试禁用“下一步”按钮。

感谢任何帮助。

最佳答案

这是我在 this project 中使用的寻呼机自定义元素(滚动到底部以查看寻呼机)。

pager

pager.html

<template>
<ul class="pagination" show.bind="pageCount > 1">
<li class="${pageIndex === 0 ? 'disabled' : 'waves-effect'}">
<a href="#" click.delegate="setPage(0)"><i class="mdi-navigation-chevron-left"></i></a>
</li>
<li repeat.for="p of pageCount" class="${p === $parent.pageIndex ? 'active' : 'waves-effect'}">
<a href="#" click.delegate="$parent.setPage(p)">${p + 1}</a>
</li>
<li class="${pageIndex === pageCount - 1 ? 'disabled' : 'waves-effect'}">
<a href="#" click.delegate="setPage(pageCount - 1)"><i class="mdi-navigation-chevron-right"></i></a>
</li>
</ul>
</template>

pager.js

import {bindable} from 'aurelia-framework';

export class Pager {
@bindable pageIndex;
@bindable pageCount;
@bindable setPage;
}

分页器元素的使用方式如下:

order-list.html

<pager page-count.bind="pageCount"
page-index.bind="pageIndex"
set-page.call="setPage($event)">
</pager>

编辑 2015 年 10 月 14 日

这是一个引导寻呼机 - 工作方式略有不同,但用法相同,不需要 View 模型:

<template bindable="pageCount, pageIndex, setPage">
<ul ref="pager" class="pagination" if.bind="pageCount > 1"
offset.bind="pageIndex + 5 > pageCount && pageCount > 5 ? (pageCount - 5) : (3 * (pageIndex - 1 - (pageIndex - 1) % 3) / 3)">
<li class="${pageIndex === 0 ? 'disabled' : ''}">
<a href="#" aria-label="Previous" click.delegate="setPage(0)">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li repeat.for="p of pageCount > 5 ? 5 : pageCount" class="${p + $parent.pager.offset === $parent.pageIndex ? 'active' : ''}">
<a href="#" click.delegate="$parent.setPage(p + $parent.pager.offset)">${p + $parent.pager.offset + 1}</a>
</li>
<li class="${pageIndex === pageCount - 1 ? 'disabled' : ''}">
<a href="#" aria-label="Previous" click.delegate="setPage(pageCount - 1)">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</template>

关于javascript - 计算属性未在 aurelia 中更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32159450/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com