nytimes / backbone.stickit

Backbone data binding, model binding plugin. The real logic-less templates.
MIT License
1.64k stars 176 forks source link

[Suggestion] "name=" selector #293

Closed jeffijoe closed 9 years ago

jeffijoe commented 9 years ago

I am using Stickit in conjunction with thedersen/backbone-validation, and so I often do something like this with Stickit:

{
  '[name=password]': 'password',
  '[name=password-again]': 'passwordAgain'
}

because Backbone.Validation uses the name attribute.

I am suggesting a =[name] syntax, so the above would become:

{
  '=password': 'password',
  '=password-again': 'passwordAgain'
}

Thoughts? I would be willing to implement this.

aeksco commented 9 years ago

I think this would be an excellent addition - I too am using Backbone.Validation and the '[name=attribute]': 'attribute' feels repetitive.

I'm looking into extending the Backbone.Stickit view.bindings = {} object to leverage the familiar Backbone.Marionette @ui.selector syntax to eliminate repeated magic-string selectors:

class MyForm extends Marionette.LayoutView

  ui:
    age:    '[name=age]'
    race:   '[name=race]'
    cancel: '[data-click=cancel]'
    submit: '[data-click=submit]'
    region: '[data-region=form]'

  regions:
    formRegion: '@ui.region'

  triggers:
    'click @ui.cancel': 'cancel:event'

  events:
    'click @ui.submit': 'submitCallback'

  bindings:
    '@ui.age':  'age' # this would be so nice
    '@ui.race': 'race'

  onShow: ->
    @ui.race.select2() # https://select2.github.io

The Marionette.normalizeUIKeys(hash,ui) helper method should make this a pretty trivial addition - considering that Marionette already uses it for @regions, @triggers, @events, and Marionette.Behaviors.

However given that the @ui.selector syntax is exclusive to Marionette it's an unlikely candidate for addition to Backbone.Stickit.

In lieu of @ui.selector syntax I would love short-hand like '=attribute': 'attribute'.

:+1:

Edit: Evidently in Marionette it is as simple as:

class MyForm extends Marionette.ItemView

  ui:
    race: '[name=race]'

  bindings:
    '@ui.race': 'race'

  initialize: ->
    @_stickitBindings = _.clone @bindings # Maintain copy of original bindings
    @bindings = Marionette.normalizeUIKeys @bindings, @ui # Replaces '@ui.race' with '[name=race]'
    BackboneValidation.bind(@) # Backbone.Validation view binding
jeffijoe commented 9 years ago

@aeksco if Stickit added a hook for us to plug this special selector handling in ourselves, that'd solve all our problems.

And I use Marionette as well, always hoping the @ui syntax will work :P

akre54 commented 9 years ago

This gets into a bit of "string programming" territory. I think it's much cleaner if it's obvious the keys fall through to real jQuery / qsa selectors.

What would such a hook look like?

vendethiel commented 9 years ago

also seems a bit "it's cute right now, but..."

akre54 commented 9 years ago

Agreed. You can always pre-process your bindings before passing them to stickit. This isn't something we should be encouraging.