值未与数组对象绑定

我有一个处理点咖啡的应用程序。咖啡店有一个按大小显示饮料类型的表格，他们可以点击给定的饮料/大小，并编辑有关该饮料/大小组合的数据，例如价格。

以前，有一个咖啡饮料（摩卡、卡布奇诺等）的固定列表，我能够对饮料进行硬编码，并克服这个错误。然而，情况发生了变化，现在商店可以添加定制饮料，这意味着我不能再对饮料进行硬编码，我需要从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,
    });
}

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

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

另一件需要注意的事情是，在上面的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>

我以前也遇到过这种情况，但将问题归结为这样一个事实，即当饮料由于某种原因成为数组中的一个值时，它们不会像直接声明变量时那样工作。