Polymer：配列内のオブジェクトが外部コードによって変更されたときにdom-repeated要素を更新する

Question

dom-repeatを使用して、配列内のオブジェクトを一覧表示しています。配列は外部コードによって提供されるため、変更はPolymerのArray APIを使用しません。

Here's a fiddle私が働いていることを示しています。これを処理するにはより良い（クリーナー）方法がありますか？

HTML

<base href="https://polygit.org/polymer+:master/components/"> 

<link href="polymer/polymer.html" rel="import"> 

<dom-module id="example-element"> 
    <template> 
     <div style="width:100px;height:100px;background-color: cadetblue" on-tap="onTap">click me</div> 
     <template is="dom-repeat" items="{{items}}" as="item"> 
      <div>[[item.id]]</div> 
     </template> 
    </template> 
</dom-module> 

<example-element></example-element> 

JS

//an array managed by code outside of this component. 
var GLOBAL_ARRAY = [ 
    {id: 1}, 
    {id: 2} 
]; 

Polymer({ 

    is: 'example-element', 

    properties: { 
    items:Array 
    }, 

    ready: function() { 
    this.items = GLOBAL_ARRAY; 
    }, 

    onTap: function(evt) { 
     //hold onto the old value before updating. 
    var oldValue = GLOBAL_ARRAY[0]; 
    //just changing the property doesn't work regardless which notify is used below. 
    //GLOBAL_ARRAY[0].id = Math.round(Math.random() * 50); 

    //replacing the entire object works with notifySplices() below. 
    GLOBAL_ARRAY[0] = {id:Math.round(Math.random() * 50)}; 
     console.log('changed the first items id to ', GLOBAL_ARRAY[0].id); 

    //doesn't work 
    //this.notifyPath('items', GLOBAL_ARRAY); 

    //works 
    this.notifySplices('items', [{ 
     index:0, 
     object:this.items, 
     addedCount:1, 
     removed:[oldValue], 
     type:'splice' 
    }]); 
    } 
}); 

は、私は全く技術的スプライシングじゃないので）（notifySplicesを使用して、ここで間違っていると感じています。私はnotifyPath（）が動作することを期待していましたが、そうではありません。

Answer 1

解決方法は、変更されたオブジェクトプロパティへのフルパスでnotifyPathを呼び出すことです。改訂されたJSコードは以下の通りです。

//an array managed by code outside of this component. 
var GLOBAL_ARRAY = [ 
    {id: 1}, 
    {id: 2} 
]; 

Polymer({ 

    is: 'example-element', 

    properties: { 
    items:Array 
    }, 

    ready: function() { 
    this.items = GLOBAL_ARRAY; 
    }, 

    onTap: function(evt) { 
    GLOBAL_ARRAY[0].id = Math.round(Math.random() * 50); 
    this.notifyPath('items.0.id', GLOBAL_ARRAY[0].id); 
    } 
}); 

working fiddle。