Biến toàn cầu trong Ember

Question

Phương pháp thích hợp để lưu trữ biến toàn cầu trong Ember là gì? Ví dụ, tôi có một mô hình người dùng trong Ember, nhưng tôi luôn muốn biết ví dụ cụ thể nào của mô hình đó (bao gồm id, tên, email, v.v.) của nó tương ứng với người dùng hiện đang đăng nhập.

Tôi có nên lưu trữ nội dung này trong Ember bằng cách nào đó không? Hoặc tốt hơn là chỉ cần đính kèm biến JS vào đối tượng window (ví dụ: window.currentUserId = 1;) và sử dụng nó?

Answer 1

Tuyên bố từ chối trách nhiệm: Tất cả các kỹ thuật được trình bày dưới đây là trải nghiệm của tôi với EmberJS trong vài tháng qua, cộng với một số cuộc thảo luận với đồng nghiệp của tôi. Bất cứ điều gì không chính xác, xin vui lòng nâng cao giọng nói của bạn. Tất cả chúng ta đều đang trong giai đoạn học tập (và tài liệu ember.js hút vào maxxx, vì vậy hãy tử tế;)

Hiện tại có hai nhà phát triển ở nơi làm việc của tôi đang sử dụng Ember.js. Chúng tôi đã đi đến kết luận rằng việc lưu trữ các biến toàn cầu trong toàn cầu ApplicationController là tốt hơn nhiều so với lưu trữ trong không gian tên ứng dụng. Điều này là do việc thu hồi giá trị này có thể rất lộn xộn nếu nó được lưu trữ trong không gian tên ứng dụng. Và điều này hoạt động tốt trong việc đóng cửa quá, và do đó làm cho không gian tên toàn cầu sạch (và tương đối hack miễn phí). Bạn không muốn người dùng của mình làm App.set để gây nhầm lẫn với biến phải không?

Điều này dựa trên 1.0.0 trước 4.

Xét bạn có điều này currentUserId biến toàn cầu

1. Lưu trữ trong không gian tên. jsFiddle demo

   (function() { 
   
       function r() { 
        return Math.round(Math.random()*999); 
       } 
   
       var MyApp = Ember.Application.create({ 
        currentUserId: null, 
        ready: function() { 
         //demo purpose. 
         this.set('currentUserId', r()); 
        }, 
        rootElement: '#demo' 
       }); 
       MyApp.ApplicationView = Ember.View.extend({ 
        templateName: 'application-view', 
   
        //Direct child view 
        innerView: Ember.View.extend({ 
         templateName: 'inner-view', 
         setValue: function() { 
          this.set('controller.namespace.currentUserId', r()); 
         } 
        }), 
   
        //Direct child view, but with a controller attached 
        innerViewWithController: Ember.View.extend({ 
         controller: Ember.Controller.create(), 
         templateName: 'inner-view-with-controller', 
         setValue: function() { 
          this.set('parentView.controller.namespace.currentUserId', r()); 
         } 
        }), 
        getValue: function() { 
         alert(this.get('controller.namespace.currentUserId')); 
        }, 
        setValue: function() { 
         this.set('controller.namespace.currentUserId', r()); 
        } 
       }); 
   })(); 
   

2. vs Lưu trữ trong toàn cầu ApplicationControllerjsFiddle demo

   (function() { 
   
       function r() { 
        return Math.round(Math.random()*999); 
       } 
   
       var MyApp = Ember.Application.create({ 
        ApplicationController: Ember.Controller.extend({ 
         currentUserId: null, 
         init: function() { 
          //demo purpose 
          this.set('currentUserId', r()); 
         } 
        }), 
        rootElement: '#demo' 
       }); 
       MyApp.ApplicationView = Ember.View.extend({ 
        templateName: 'application-view', 
   
        //Direct child view 
        innerView: Ember.View.extend({ 
         templateName: 'inner-view', 
         setValue: function() { 
          this.set('controller.currentUserId', r()); 
         } 
        }), 
   
        //Direct child view, but with a controller attached 
        innerViewWithController: Ember.View.extend({ 
         controller: Ember.Controller.create(), 
         templateName: 'inner-view-with-controller', 
         setValue: function() { 
          this.set('parentView.controller.currentUserId', r()); 
         } 
        }), 
        getValue: function() { 
         alert(this.get('controller.currentUserId')); 
        }, 
        setValue: function() { 
         this.set('controller.currentUserId', r()); 
        } 
       }); 
   })(); 
   

Lưu ý rằng:

1. Nếu bạn chọn để lưu trữ trong không gian tên, bạn sẽ cần phải truy cập nó qua bộ điều khiển gốc tất cả thời gian, vì vậy nó thực sự giống như lưu trữ trong applicationController có thêm từ khóa namespace.

2. Nếu bạn chọn để lưu trữ nó trong thư mục gốc applicationController, vì bất cứ quan điểm rằng xuống từ applicationView, bạn có thể dễ dàng truy cập các biến trong các mẫu của bạn với {{variableName}} mà không cần bất kỳ traversals chấm. Theo mặc định, Ember.Js tìm kiếm các biến thông qua bộ điều khiển. Trong trường hợp xấu nhất, nếu chế độ xem nội bộ của bạn cần có bộ điều khiển riêng, truy cập biến toàn cục thông qua bộ điều khiển gốc (hoặc không gian tên) hơi đau hơn vì bộ điều khiển không được liên kết, bạn sẽ cần phải duyệt qua các chế độ xem của mình cho đến khi bạn thấy bộ điều khiển gốc. Trong Ember.JS, tất cả các khung nhìn, theo mặc định, sẽ có một bộ điều khiển, và theo mặc định, bộ điều khiển của cha mẹ. Có nghĩa là nếu bạn không bao giờ chỉ định bất kỳ bộ điều khiển nào, tất cả các khung nhìn con cháu thực sự được liên kết với bộ điều khiển gốc. Để khắc phục vấn đề này, bạn có thể thực hiện ràng buộc biến trong bộ điều khiển để dễ dàng giải quyết tình trạng xấu đi ngang qua.

Tôi không khuyên bạn nên đặt một biến quan trọng như vậy trong đối tượng window toàn cầu vì nó sẽ được dễ dàng sửa đổi bởi người sử dụng (và làm tăng bất kỳ vấn đề tiềm năng). Đưa nó trong không gian tên toàn cầu trong không gian tên ứng dụng ember làm giảm các vấn đề tiềm năng nhưng không nếu bạn thực hiện nó trên toàn cầu

My 2 cents;)