Làm cách nào để sửa đổi các phần tử trong một mảng được quản lý bởi Bộ điều khiển Ember?

Question

Tôi có thể thiếu một cái gì đó thực sự ngớ ngẩn, (Ember newbie) nhưng tôi không thể tìm ra cách sửa đổi một mảng nằm dưới sự quản lý của Bộ điều khiển Ember của tôi, ngoài việc thiết lập một mảng hoàn toàn mới.

Ví dụ: Tôi có chức năng kiểm tra sau đây trong bộ điều khiển của tôi. Khi người dùng nhấp chuột, tôi muốn sửa đổi từng phần tử của mảng được kiểm soát (hoặc nó có thể là một phần tử riêng lẻ) với một giá trị mới.

Tôi hiểu rằng bạn đang phải trải qua "thiết lập" để làm cho những thay đổi được biết đến với Ember, vì vậy tôi nghĩ rằng điều này sẽ làm việc:

clickHandler:function(e){ 
    var temp = this.get("itemList").copy(); // copy it 
    for (var i = 0; i < temp.length; i++) { 
     temp[i].desc = "CANCELLED";  // change it 
    } 
    this.set('itemList', temp); // put it back 
} 

tôi tạo một bản sao của mảng, sửa đổi nó, và sau đó đặt lại. Nhưng bằng cách nào đó Ember than phiền về dòng thứ 4, nơi tôi sửa đổi nội dung của temp [i] .desc, nói rằng tôi phải sử dụng Ember.Set. Tôi cho rằng tôi có thể sửa đổi bản sao "ngoại tuyến" và sau đó thiết lập lại, nhưng không đi và tôi không thể hiểu tại sao. Các hoạt động mảng khác, như shift/unshift/pop dường như hoạt động.

Answer 1

Phương pháp tiếp cận của bạn không trông rất kém. Mã này sẽ làm việc:

clickHandler:function(e){ 
    var itemList = this.get("itemList"); 
    itemList.forEach(function(item){ // for iterating over an array, always use the forEach function 
     item.set("desc", "CANCELLED"); // you have to call this set()-function to make changes to an Ember Object 
    }); 
} 

Tại sao bạn cần phải gọi set() - Phương pháp và không thể sử dụng phương pháp tiếp cận trực tiếp của bạn?

Phương thức set() cho phép Ember thực hiện phép tự động liên kết của nó. Khi phương thức này được gọi, nó lên lịch cho tất cả các công cụ cần được thực hiện trên các đối tượng phụ thuộc vào thuộc tính đã sửa đổi. Ví dụ đơn giản nhất là một mẫu hiển thị thuộc tính đã cho cần cập nhật.

Dưới đây là một cải tiến có thể trên mã trên để làm emberish thậm chí nhiều hơn: Bạn có thể sử dụng một ArrayController để quản lý itemList của bạn. Trong trường hợp này, bạn sẽ đặt itemList của bạn làm thuộc tính nội dung của bộ điều khiển. Bạn sẽ nhận thấy rằng rất nhiều hướng dẫn tận dụng bộ điều khiển này nếu giao dịch với một mảng.

App.ItemListController = Ember.ArrayController.extend({ 
    content : null, //set your itemList into this property 
    clickHandler:function(e){ 
     this.get("content").setEach("desc", "CANCELLED"); 
    } 
});