Cách quan sát thêm phần tử vào mảng

Question

Tôi muốn quan sát phần tử thêm vào mảng. bên dưới là chương trình thử nghiệm.

<!-- library load --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script> 
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script> 

<script type="text/x-handlebars"> 
    {{#each App.ArrayController.array}} 
    {{foo}} 
    {{/each}} 
    <button onclick="App.ArrayController.addElement();">add</button> 
</script> 
<script type="text/javascript"> 
    var App = Em.Application.create(); 
    App.ArrayController = Em.Object.create({ 
    array: [{foo:1}, {foo:2}, {foo:3}], 
    addElement: function() { 
     this.array.pushObject({foo:4}); 
    }, 
    elementAdded: function() { 
     alert('ok'); // not invoked... 
    }.observes('array') 
    }) 
</script> 

Nhưng khi gọi addElement, elementAdded không được gọi ... Làm cách nào để quan sát thêm yếu tố? Thay vào đó,

Answer 1

sử dụng các quan sát ('mảng. @ Each'). mã jsfiddle là here

Answer 2

Bạn có thể sử dụng Ember.ArrayController và ghi đè lên hàm arrayDidChange Và tùy chọn gọi các phương thức khác từ ther.

<!-- library load --> 
<script type="text/x-handlebars"> 
    {{#each App.ArrayController.array}} 
    {{foo}} 
    {{/each}} 
    <button onclick="App.ArrayController.addElement();">add</button> 
</script> 
<script type="text/javascript"> 
    var App = Em.Application.create(); 
    App.arrayController = Ember.ArrayController.create({ 
    content: [{foo:1}, {foo:2}, {foo:3}], 
    addElement: function() { 
     console.log(this); 
     var array = this.get('content') 
     array.pushObject({foo:4}); 
     // this.set('array', array); 
    }, 
    elementAdded: function() { 
     console.log('ok'); // not invoked... 
    }.observes('array'), 

    arrayDidChange: function(item, idx, removedCnt, addedCnt) { 
     this.elementAdded(); 
     this._super(item, idx, removedCnt, addedCnt); 
    } 
    }); 
</script> 

Và bạn có thể sử dụng Observers

Answer 3

Check out this fiddle để xem làm thế nào để biết chính xác những gì đối tượng đã được thêm vào hoặc ra khỏi mảng sử dụng ArrayController.