Question

我有以下代码来填充和显示另一个组件视图：

Welcome.js

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';

  appleNum = 10; <-- Set value of apple num

  buyApples(){
      console.log("Buy Apples");
      console.log(this.appleNum)
  }
}

Welcome.html

<form role="form" submit.delegate="buyApples()">

    <shop shop-data.bind="appleNum"></shop>

    <button type="submit" class="btn btn-default">Submit</button>
    <p>Number of apples: ${appleNum}</p>
</form>

Shop.js

import {bindable} from 'aurelia-framework';

export class Shop {
  @bindable shopData;
}

Shop.html

<template>
    <div class="form-group">                        
        <label class="control-label">Number of Apples
            <input id="apple-number" name="apple-number" type="number" class="form-control" value.bind="appleNum">
        </label>
    </div>
</template>

这适用于获取/设置appleNum。

的值

我遇到的问题是我想在shop.js内设置appleNum的值（例如，当shop在某处显示为元素时，它会查看获取自己的数据）。我下面的内容是我想要做的一个例子，但它不起作用：

Shop.js

import {bindable} from 'aurelia-framework';

export class Shop {
  @bindable shopData;

  constructor(){
      //Set intial values of apples
      this.appleNum = 1;
  }
}

初始值已设置但无法更新：

有人知道我怎么能让组件设置自己的值吗？

修改

我有以下哪些可以做我想要的但是感觉有点hacky ..

店铺info.js

export class ShopInfo {
  constructor() {
      this.appleNum = 10;
  }

  resetBasket() {
      this.appleNum = 10;
  }
}

welcome.js

import {inject} from 'aurelia-framework';
import {ShopInfo} from "./shop-info"

@inject(ShopInfo)
export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';

  constructor(shopInfo){
      this.shopInfo = shopInfo;
  }  

  buyApples(){
      this.shopInfo.resetBasket();
  }
}

welcome.html

<template>
  <require from="./shop"></require>
  <section class="au-animate">

    <form role="form" submit.delegate="buyApples()">
        <shop shop-data.bind="shopInfo.appleNum"></shop>
        <button type="submit" class="btn btn-default">Submit</button>
        <p>Number of apples: ${shopInfo.appleNum}</p>
    </form>
  </section>
</template>

Answer 1

在this.appleNum内修改shop.js的值时，welcome.html和welcome.js无法了解该更改，因为this.appleNum shop.js不是@bindable。要解决此问题，您可以执行以下操作：

welcome.js

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';

  this.welcomeAppleNum = 10;

  buyApples(){
      console.log("Buy Apples");
      console.log(this.welcomeAppleNum)
  }
}

welcome.html

<template>
    <require from="./shop"></require>
    <form role="form" submit.delegate="buyApples()">

        <shop shop-apple-num.two-way="welcomeAppleNum"></shop>

        <button type="submit" class="btn btn-default">Submit</button>
        <p>Number of apples: ${welcomeAppleNum}</p>
    </form>
</template>

shop.js

import {bindable} from 'aurelia-framework';

export class Shop {
  @bindable shopAppleNum;

  constructor(){
      this.shopAppleNum = 1;
  }
}

shop.html

<template>
    <div class="form-group">                        
        <label class="control-label">Number of Apples
            <input id="apple-number" name="apple-number" type="number" class="form-control" value.bind="shopAppleNum">
        </label>
    </div>
</template>

现在welcomeAppleNum和shopAppleNum应保持同步，因为它们已被绑定。

Answer 2

这是你想要达到的结果吗？ http://plnkr.co/edit/dF1MPs3TiMZ443gYRhEK?p=preview

如果是这样的话：首先，您需要appleNum设置shop的双向数据绑定：

<shop shop-data.two-way="appleNum"></shop>

或者，在shop.js：

import {bindable, bindingMode} from 'aurelia-framework';

export class Shop {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) shopData;
  ...
}

然后，在shopData方法中设置attached()的值：

import {bindable} from 'aurelia-framework';

export class Shop {
  @bindable shopData;

  attached() {
    this.shopData = 2;
  }
}

constructor中设置的值会被您在welcome.js中设置的值覆盖。

使用自己的值设置组件视图

2 个答案: