Question

基于Aurelia doc的示例。

网页代码：

export class MyPage {
    products = [
        { id: 0, name: 'Motherboard' },
        { id: 1, name: 'CPU' },
        { id: 2, name: 'Memory' },
    ];

    selectedProduct = null;    
}

页面HTML：

<label>
    Select product:<br/>
    <select value.bind="selectedProduct">
        <option model.bind="null">Choose...</option>
        <option repeat.for="product of products"
                model.bind="product">
            ${product.id} - ${product.name}
        </option>
    </select>
</label>

<div if.bind="selectedProduct">
    Selected product 1: ${selectedProduct.id} - ${selectedProduct.name}

    <div if.bind="selectedProduct.id > 0">
        Selected product 2: ${selectedProduct.id} - ${selectedProduct.name}
    </div>
</div>

选择CPU，然后选择空值，然后选择内存，所选产品1 使用select元素中的值正确更新，但选定产品2 卡住了使用 CPU 值。

如何在内部div中正确绑定所选值？

在我的应用程序中，我希望能够显示所选项目的内容。根据项目类型，我有几个<div if.bind="item.type === N">...</div>元素，以便为每种类型的项目显示不同的HTML。

注意：绑定不适用于最新的软件包，但是当我将特定版本分配给package.json中的以下软件包时可以正常工作：

“aurelia-templating”：“1.4.2”
“aurelia-templating-binding”：“1.3.0”
“aurelia-templating-resources”：“1.4.0”
“aurelia-templating-router”：“1.1.0”

当对象为空时，Aurelia绑定损坏

0 个答案: