Question

我想做一些我怀疑很容易的事情，但由于某些原因无法弄清楚如何理解它：

{{#each item in myArray}}
    {{ui-input value=storeMe[@index]}}
{{/each}}

在上面的例子中，我将迭代数组数组，我想使用相同的数字索引存储UI组件的值。

同样，能够做到以下几点会很好：

{{#each item in myArrayOfObjects}}
    {{ui-input value=storeMe[item.id]}}
{{/each}}

存储设备 - storeMe - 是一个字典，其键由对象数组中每个项的id属性确定。

在我的特定用例中，我要求用户输入测量体脂肪的策略。我使用一个选择框：

<div class="clearfix downer">
    {{x-selectize 
        options=measurementStrategies 
        labelField="name" 
        placeholder="measurement strategy" 
        valueObject=measurementPoints 
    }}
</div>

通过绑定到上面的“valueObject”，我得到一个简单的测量点阵列，这些测量点与用户选择的策略相关（例如，胸部，大腿，腰部等）。然后我遍历这些测量点，并希望为每个测量点存储一个值：

<div class="downer">
    {{#each point in measurementPoints}}
        <div class="clearfix">
            {{ui-number-input value=model.measurements[point]}}
        </div>
    {{/each}}

当然，这不起作用，因为显然我无法绑定到偏移属性（aka，measurements[point]）。

在许多情况下，这种类型的问题并不重要，因为如果我想操纵我正在迭代的结构，则每个循环提供间接。当存储属性悬挂在与您迭代的基础不同的基础上时，问题就出现了。所以在我的情况下，如果我实际操纵point或悬挂在point之外的财产，这很容易，因为point 偏移{{1但在我的情况下，我正在迭代measurementPoints并将值保存到measurementPoints。

Answer 1

这对Handlebars来说太过逻辑了。您可以创建一个计算属性，然后将每个item与storeMe中的每个值配对，这样您就可以成对访问它们。

您可以使用自定义帮助程序完成此操作，但对我来说这似乎很糟糕。

这是一个基本的例子，缺乏关于问题域的详细信息：

storeMeItemsByIndex: function() {
  var storeMe = this.get('storeMe');
  return this.get('myArray').map(function(item, index) {
    return storeMe[index];
  });
}.property('myArray', 'storeMe'),

storeMeItemsById: function() {
  var storeMe = this.get('storeMe');
  return this.get('myArray').map(function(item) {
    return storeMe[item.id];
  });
}

这些适合您的示例模板代码。但是，您无法同时访问storeMe的值和项目。如果你想要，你可以构建对象：

storeMeItemsByIndex: function() {
  var storeMe = this.get('storeMe');
  return this.get('myArray').map(function(item, index) {
    return {item: item, value: storeMe[index]};
  });
}.property('myArray', 'storeMe'),

或类似的东西。

通过更具体的示例，您可以执行以下操作：

measurementPointsWithValues: function() {
  var measurements = this.get('model.measurements');
  return this.get('measurementPoints').map(function(point, index) {
    return {point: point, value: measurements.itemAt(index)};
  };
}

然后你就可以在你的模板中使用它了：

{{#each pointAndValue in measurementPointsWithValues}}
  {{! some use of pointAndValue.point, probably}}
  {{ui-number-input value=pointAndValue.value}}
{{/each}}

它很笨重，但它确实有效。我不知道你的对象模型的细节，但你可能会从一些中间对象中受益。

绑定到数组或对象下标

1 个答案: