Ember, mẫu của tôi không cập nhật về thay đổi thuộc tính

Question

Tại sao mẫu của tôi không được cập nhật khi tôi thay đổi thuộc tính hiển thị? Các trạng thái documentation cho biết rằng {{each}} là sự ràng buộc, nhưng rõ ràng là có điều gì đó mà tôi không biết.

Giống như mọi thứ trong Handlebars, trình trợ giúp {{#each}} là sự ràng buộc. Nếu ứng dụng của bạn thêm mục mới vào mảng hoặc xóa một mục, DOM sẽ được cập nhật mà không cần phải viết bất kỳ mã nào.

Dưới đây là bộ điều khiển của tôi

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
      this.alist.push('xpto'); 
      console.log(this.alist); 
    } 
    } 
}); 

Trong mẫu của tôi, tôi có đoạn mã sau.

{{#each alist}} 
    <li>{{.}}</li> 
{{/each}} 
<button {{action 'addel'}}>Add element</button> 

Dữ liệu được hiển thị chính xác và khi tôi nhấp vào nút, nó thêm phần tử vào thuộc tính, nhưng mẫu không làm mới. Tại sao? Làm thế nào để giữ nó đồng bộ với dữ liệu của tôi?

Answer 1

Mẫu của bạn hiện không cập nhật vì bạn đang sử dụng javascript vanilla thuần túy .push thay vì bằng cách cung cấp bởi ember cung cấp .pushObject và .removeObject tương ứng. Ember theo mặc định mở rộng nguyên mẫu mảng để làm cho nó phát độc đáo trong môi trường nhận thức ràng buộc.

Vì vậy, để thực hiện cập nhật mẫu của bạn, bạn nên làm:

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
     this.get('alist').pushObject('xpto'); 
     console.log(this.get('alist')); 
    } 
    } 
}); 

Điểm mấu quan trọng ở đây là this.get('alist').pushObject('xpto'); Hơn nữa, bạn nên luôn luôn sử dụng .get() và .set() để truy cập các đối tượng trong ember nếu không thì cơ chế ràng buộc sẽ không được nhận thức của thay đổi được thực hiện cho đối tượng.

Hy vọng điều đó sẽ hữu ích.