Question

我有一个应用程序来处理订购咖啡。咖啡店有一张桌子，按尺寸显示饮品类型，他们可以点击给定的饮料/尺寸，并编辑有关该饮料/尺寸组合的数据，例如价格。

之前，有一套咖啡饮料（摩卡咖啡，卡布奇诺咖啡等），我能够喘气对饮料进行硬编码并得到这个错误。然而，情况发生了变化，现在商店可以添加自定义饮料，这意味着我不能再对饮料进行硬编码，而是需要从API中获取商店饮料。

这个项目正在使用Ember 1.13，我正在设置路线中setupController的饮料。在这个例子中，我不会展示自定义饮料，只需使用默认饮品就可以重现问题。

model: function() {
    let myStoreId = this.controllerFor('application').get('myStore.id');

    return Ember.RSVP.hash({
      myStore: this.store.find('store', myStoreId),
      storeDrinks: this.store.find('store-drink', {'store':myStoreId}),
      ...
    });
},
setupController: function(controller, model) {

    // we have some set drinks that will be for every store, although they can set inactive
    let defaultDrinks = [
      "Americano", "Capuccino", "Drip", "Espresso", "Latte", "Mocha", "Tea"
    ];
    let drinksArray = [];
    let drinkType, keyName;

    let pluralize = function(string){
      // return plural and lower case for a drink type
      let lower = string.toLowerCase();
      let plural = lower + "s";
      return plural;
    };

    for (let i = 0; i < defaultDrinks.length; i++) {
      drinkType = defaultDrinks[i];
      keyName = pluralize(drinkType);

      // when we define like this, there are bugs editing in the template. But we 
      // can loop though all the drinks by type. I can get a list of custom drinks
      // from the API and add those into the loop.

      drinksArray[keyName] = this.store.filter('store-drink', function(drink) {
        return drink.get('type') === drinkType;
      });
    }

    // when we define like this (hardcode), it works fine in template but we
    // can't keep doing this because with custom drinks we don't know the type
    // when we get the above loop working, this code will be gone, but it shows
    // what works in the template to edit drinks.

    let cappuccinos = this.store.filter('store-drink', function(drink) {
      return drink.get('type') === "Cappuccino";
    });

    ...

    console.log(drinksArray["mochas"], cappuccinos);

    controller.setProperties({
      'mochas': drinksArray["mochas"],
      'cappuccinos': cappuccinos,
      ...

      'myStore': model.myStore,
    });
}

路线中有设置。现在在模板中，我有一个与饮料值相关的输入。当他们点击其中一个drink / size组合时，会打开一个包含detailDrink对象的div。 {{input value=detailDrink.price ... }}。

当饮料以cappuccino的形式使用drinkList时，一切正常。当饮料以drinksArray["mochas"]的形式使用drinkList时，当输入改变时，存在各种错误。我不相信这部分的细节是重要的，但有时它会删除单元格值，有时它不会反映变化，有时它会将多个单元格绑定到相同的值。 问题在于，当使用数组中的数据（例如mochas）时，会出现此错误，并且当使用硬编码值（例如使用cappuccinos）时，可以正确更新饮料数据。 < / p>

另外需要注意的是，在上面的console.log(drinksArray["mochas"], cappuccinos);中，两个对象看起来都是一样的，除了一个是卡布奇诺的列表，另一个是莫卡斯的列表。

我几乎连续几个月都被困在这个问题上，并尝试了很多东西并将其分离出来。

编辑添加： 您可能会想“这将如何帮助您解决问题”？我的想法是拥有一系列对象，例如：

[{
  'drinkSet': cappuccinos,
  'drinkType': 'Cappuccino',
}, {
  'drinkSet': mochas,
  'drinkType': 'Mocha',  
},
{
  'drinkSet': myCustomWhiteChocolateThunder,
  'drinkType': 'White Chocolate Thunder',  
},
...
]

然后使用每种饮品类型

遍历我的模板表行

    <table class="table table-striped menu__drink-table hidden-xs">
      <thead>
        <tr>
          <th>Drink</th>
          <th>8oz</th>
          <th>12oz</th>
          <th>16oz</th>
          <th>20oz</th>
          <th>24oz</th>
          <th>32oz</th>
        </tr>
      </thead>
      <tbody>
        {{#each drinkSetObject in drinkSets}}
          {{joe-menu-row drinkSet=drinkSetObject.drinkSet type=drinkSetObject.drinkType detailDrink=detailDrink}}
        {{/each}}
      </tbody>
    </table>

之前我曾经有过这个问题，但是将问题分解为这样一个事实，即由于某种原因，当饮料是数组中的值时，它们不能像直接声明变量那样工作。

Answer 1

我在设置控制器中遇到类似的问题解决承诺。似乎数组中的承诺无法解析，因此您无法获取模板中的数据。

请尝试下一个让我知道：

for (let i = 0; i < defaultDrinks.length; i++) {
    // can't be method variables since will be used in the promise
    let drinkType = defaultDrinks[i];
    let keyName = pluralize(drinkType);

    this.store.filter('store-drink', function(drink) {
        return drink.get('type') === drinkType;
    }).then(function(result) {
        controller.set(keyName, result);
    }, function(error) {
        //TODO: handle error
    });
}

另外，使用余烬变形器的pluralize功能：

const { Inflector: { inflector } } = Ember
let keyName = inflector.pluralize(drinkType);

希望有所帮助

ps：别忘了删除controller.setProperties设置

值不与数组对象

1 个答案: