javascript - 值不与数组对象绑定(bind)

Question

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

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

这是 route 的设置。现在，在模板中，我有一个与饮料值相关的输入。当他们单击饮料/尺寸组合之一时，它会打开一个包含 detailDrink 对象的 div。 {{input value=detailDrink.price ... }}。

当饮料使用卡布奇诺形式的 DrinkList 时，一切正常。当饮料使用drinksArray["mochas"]形式的drinkList时，当输入发生变化时，会出现各种错误。我不认为这部分的细节很重要，但有时它会删除单元格值，有时它不会反射(reflect)更改，有时它将多个单元格绑定(bind)到相同的值。 问题是，当使用数组中的数据(例如摩卡咖啡)时，存在此错误，而当使用硬编码值(例如卡布奇诺)时，饮料数据可以正确更新。

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

我在设置 Controller 中解决 promise 时遇到了类似的问题。似乎数组中的 promise 无法解析，因此您无法获取模板中的数据。

请尝试下一个并告诉我:

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
    });
}

另外，使用 ember inflector 的 pluralize功能:

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

希望对你有帮助

ps:不要忘记删除controller.setProperties设置