StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A generic way to handle a two way binding between an Ember object and Checkboxes can be implemented using plain Ember.js without the need of any plugins if you are willing to sync the enums on the server and the client manually (using AJAX or WebSockets). Note that Ember can update the list of options with Checkbox automatically after a sync.</p> <p>So henceforth, I will assume that you have am enum with roles as an Ember Array:</p> <pre class="lang-js prettyprint-override"><code>App.Roles = [ "USER", "ADMIN", "GUEST" ]; </code></pre> <p>Then we will show the options available to the user in a <a href="http://emberjs.com/api/classes/Ember.CollectionView.html" rel="nofollow">CollectionView</a> like this (the template is given below).</p> <pre class="lang-js prettyprint-override"><code>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 }) }); </code></pre> <p>The template for each option is:</p> <pre class="lang-html prettyprint-override"><code><script data-template-name="user-roles" type="text/x-handlebars"> <label> {{view App.RoleCheckbox contentBinding="view.content"}} {{view.content}} </label> </script> </code></pre> <p>Note that the use of <code><label></code> tag makes sure that the Checkbox's <code>click</code> event is fired on clicking anywhere on the tag.</p> <p>Finally the <code>App.RoleCheckbox</code> is an extension of the <code>Ember.Checkbox</code> class which handles the <code>checked</code> property and <code>click</code> event to toggle the role:</p> <pre class="lang-js prettyprint-override"><code>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); } } }); </code></pre> <p>An working example of this is: <a href="http://jsfiddle.net/BLQBf/" rel="nofollow">http://jsfiddle.net/BLQBf/</a> (Look at the console to see the log messages)</p> <p>Note that this is not completely Ember-esque, since the View is doing part of the job meant for the <code>controller</code>. Ideally, the <code>click</code> event would call a function on the <code>RoleCheckboxController</code> which would make changes to the <code>User</code> object.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload