在聚合物中的回调中设置数组项属性值

Question

I have an application that is using Polymer. In this application, I am binding an array of items to the UI. The user can click a button. When that button is clicked, a task associated with a third-party library is called. When that task is completed, it returns a status. I need to bind that status to a property of an item in my array. The third-party library allows me to use a callback function. For that reason, I'll demonstrate my challenge using JavaScript's baked in setTimeout function.

my-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>

As shown in the code snippet above, there is another component item-status .

item-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>

When a user clicks the "Bind" button, the status does not get updated in the UI. I noticed the alert that I added for debugging purposes appears when the view initially loads. However, the alert window does not appear when the "Bind" button is clicked. This implies that the observer function is not firing. My callback actually looks something like this:

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

How do I set the property of an array item from a callback?

Answer 1

setTimeout has its own scope. '.bind(this)' can be used to bind the Polymer element scope to the callback function. Below bindClick function should work

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

Working jsbin: http://jsbin.com/mehovu/edit?html,output