Instantly share code, notes, and snippets.

Embed
What would you like to do?
A single-select version of andriybuday's multiple-select Ember Chosen.js component
App.InputChosenComponent = Ember.Component.extend(
init: ->
@_super()
return
# view properties
labelClasses: (->
@get("labelClass") + " control-label"
).property("labelClass")
inputContainerClasses: (->
@get("inputContainerClass") + " input-group"
).property("inputContainerClass")
inputClasses: (->
@get("inputClass") + " form-control chosen-select"
).property("inputClass")
disabledFixer: (->
chosenSelect = @$(".chosen-select")
chosenSelect.prop("disabled", @get("intputDisabled")).trigger "chosen:updated"
chosenSelect.trigger "chosen:updated"
return
).observes("intputDisabled")
# dom stuff
setup: (->
chosenSelect = $(".chosen-select")
chosenSelect.find("script").remove()
chosenSelect.chosen()
# styling setup
chosenSelect.attr "data-placeholder", @get("dataPlaceholder")
$(".chosen-choices").addClass @get("inputContainerClass")
$(".search-field > input").addClass "form-control"
# initial values
optionValueName = @get("optionValuePath").replace("content.", "")
currentSelection = @get("chosenSelection").get optionValueName
chosenSelect.val currentSelection
chosenSelect.prop("disabled", @get("intputDisabled")).trigger "chosen:updated"
chosenSelect.trigger "chosen:updated"
# handling changes
self = this
chosenSelect.chosen().change (event, item) ->
if item.selected
val = parseInt(item.selected)
selectedItem = self.get("content").findBy(optionValueName, val)
self.set "chosenSelection", selectedItem
return
return
).on("didInsertElement")
teardown: (->
).on("willDestroyElement")
)
<label {{bind-attr class="labelClasses"}} {{bind-attr for="inputField.elementId"}}>{{label}}</label>
<div {{bind-attr class="inputContainerClasses"}}>
{{view Ember.Select
class=inputClasses
prompt=prompt
content=content
value=value
multiple=multiple
selection=selection
chosenSelection=chosenSelection
dataPlaceholder=dataPlaceholder
optionLabelPath=optionLabelPath
optionValuePath=optionValuePath
intputDisabled=intputDisabled
viewName="inputField"}}
</div>
<div class="form-group">
{{input-chosen label="My Team" multiple="true" labelClass="col-sm-1" inputContainerClass="col-sm-5"
contentBinding="allPlayers" chosenSelectionBinding="myTeamPlayers"
optionLabelPath="content.fullName" optionValuePath="content.playerId
dataPlaceholder="Choose team..."}}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment