liên kết hai chiều giữa mảng thuộc tính đối tượng (enum trên máy chủ) và nhóm hộp kiểm ember

Question

Tôi đang tìm một giải pháp để liên kết thuộc tính đối tượng có chứa một mảng chuỗi (đại diện cho một enum trên máy chủ) vào danh sách hộp kiểm . Ràng buộc phải là hai chiều.

Trên máy chủ, chúng tôi có một số defumion enum, ví dụ: Vai trò với các giá trị "ADMIN", "GUEST", "USER". Một đối tượng người dùng có thể có một số vai trò như vậy, do đó đối tượng người dùng trong Ember có dạng

App.User = Ember.Object.create({ 
    roles: ["USER", "ADMIN"] 
}); 

Trong quản trị người dùng, sẽ có một nhóm hộp kiểm. Một hộp kiểm cho mỗi vai trò. Vì vậy, nó có thể chọn không có, tất cả, hoặc một số.

Tôi biết rằng có chế độ xem Ember.Checkbox có thể được sử dụng cho việc này. Những gì tôi đang tìm kiếm sẽ là một cái nhìn dễ dàng và chung chung để xử lý bất kỳ loại enums như đã đề cập ở trên.

Như vậy, câu hỏi là:

• có ai đó một giải pháp tốt đẹp cho việc này?
• có ai biết dự án nguồn mở cung cấp các tiện ích mở rộng như vậy cho ember không?

Xin cảm ơn trước. // ph

Answer 1

Cách chung để xử lý liên kết hai chiều giữa đối tượng Ember và hộp kiểm có thể được triển khai bằng cách sử dụng Ember.js đơn giản mà không cần bất kỳ plugin nào nếu bạn sẵn sàng đồng bộ hóa enums trên máy chủ và máy khách thủ công (sử dụng AJAX hoặc WebSockets). Lưu ý rằng Ember có thể tự động cập nhật danh sách tùy chọn với Checkbox sau khi đồng bộ hóa.

Vì vậy, từ nay về sau, tôi sẽ cho rằng bạn có am enum với vai trò như một mảng Ember:

App.Roles = [ "USER", "ADMIN", "GUEST" ]; 

Sau đó chúng tôi sẽ hiển thị các tùy chọn có sẵn cho người dùng trong một CollectionView như thế này (các mẫu được đưa ra dưới đây).

OptionsView = Em.CollectionView.extend({ 
    contentBinding: 'App.Roles', // Show a list of _all_ available roles 
    userBinding: 'App.User',  // This points to the active user 
    tagName: 'ul',    // Shown as a <ul> 
    itemViewClass: Em.View.extend({ 
     userBinding: 'parentView.user', // For convenience 
     templateName: 'user-roles' // Defined later 
    }) 
}); 

Mẫu cho mỗi tùy chọn là:

<script data-template-name="user-roles" type="text/x-handlebars"> 
    <label> {{view App.RoleCheckbox 
      contentBinding="view.content"}} 
    {{view.content}} 
    </label> 
</script> 

Lưu ý rằng việc sử dụng thẻ <label> làm cho chắc chắn rằng sự kiện click của Checkbox được bắn vào cách nhấn vào bất cứ nơi nào trên thẻ.

Cuối cùng App.RoleCheckbox là một phần mở rộng của lớp Ember.Checkbox mà xử lý việc checked tài sản và click kiện để chuyển đổi vai trò:

App.RoleCheckbox = Em.Checkbox.extend({ 
    userRolesBinding: 'parentView.user.roles', // Points to the roles of the user 

    checked: function() { 
     var userRoles = this.get('userRoles'); 
     return userRoles.contains(this.get('content')); 
    }.property('content', 'userRoles.@each'), 

    click: function (evt) { 
     var isPresent = this.get('checked'), 
      userRoles = this.get('userRoles'), 
      role  = this.get('content'); 

     if (!isPresent) { 
      userRoles.pushObject(role); 
     } else { 
      userRoles.removeObject(role); 
     } 
    } 
}); 

Một ví dụ làm việc của điều này là: http://jsfiddle.net/BLQBf/ (Nhìn vào giao diện điều khiển để xem thông điệp tường trình)

Lưu ý rằng đây không phải là hoàn toàn Ember-esque, vì Chế độ xem đang thực hiện một phần công việc có nghĩa là đối với controller. Lý tưởng nhất, sự kiện click sẽ gọi một hàm trên RoleCheckboxController sẽ thực hiện thay đổi đối tượng User.