Question

我有一个使用Polymer的应用程序。在这个应用程序中，我将一个项目数组绑定到UI。用户可以单击按钮。单击该按钮时，将调用与第三方库关联的任务。该任务完成后，将返回状态。我需要将该状态绑定到我的数组中的项的属性。第三方库允许我使用回调函数。出于这个原因，我将使用setTimeout函数中的JavaScript来演示我的挑战。

我-component.html

<dom-module id="view-tests">
    <template>
      <table>
        <tbody>
            <template is="dom-repeat" items="{{ items }}" as="item">              
              <tr>
                <td>[[ item.name ]]</td>
                <td><item-status status="[[ item.status ]]"></item-status></td>
              </tr>
            </template>
        </tbody>
      </table>

      <button on-click="bindClick">Bind</button>
    </template>

    <script>
        Polymer({
          is: "my-component",
          properties: {
            items: {
              type: Array,
              notify: true,
              value: function() {
                return [
                  new Item({ name:'Item 1', status:'In Stock' }),
                  new Item({ name:'Item 2', status:'Sold Out' })
                ];
              }  
            },
          },

          bindClick: function() {
            var items = items; 
            setTimeout(function() {
              this.set('items.1.status', 'In Stock');
            }, 1000);             
          }          
        });
    </script>
</dom-module>

如上面的代码段所示，还有另一个组件item-status。

项-status.html

<dom-module id="test-status">
    <template>
        <span class$="{{ statusClass }}">{{ status }}</span>
    </template>

    <script>
        Polymer({
            is: "item-status",
            properties: {
                status: {
                    type: String,
                    value: '',
                    observer: '_statusChanged'
                }               
            },

            _statusChanged: function(newValue, oldValue) {
                alert(newValue);
                if (newValue === 'In Stock') {
                  this.statusClass = 'green';
                } else if (newValue === 'Sold Out') {
                  this.statusClass = 'red';
                } else {
                  this.statusClass = 'black';
                }
            }
        });
  </script> 
</dom-module>

当用户点击＆＃34; Bind＆＃34;按钮，状态不会在UI中更新。我注意到在视图最初加载时出现了我为调试目的而添加的alert。但是，当＆＃34;绑定＆＃34;时，alert窗口不会出现。单击按钮。这意味着观察者功能没有触发。我的回调实际上看起来像这样：

getStatus(1, function(status) {
  this.set('items.1.status', status);
});

如何从回调中设置数组项的属性？

Answer 1

setTimeout有自己的范围。 '.bind（this）'可用于将Polymer元素范围绑定到回调函数。 bindClick函数下面应该可以工作

      bindClick: function() {
        setTimeout(function() {
          this.set('items.1.status', 'In Stock');
        }.bind(this), 1000);
      }

工作jsbin：http://jsbin.com/mehovu/edit?html,output

在Polymer中的Callback中设置数组项属性值

1 个答案: