nytimes / backbone.stickit

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

bind the model with backbone variable #301

Open kdbusiness90 opened 8 years ago

kdbusiness90 commented 8 years ago

Hi All,

How do i bind the model with backbone variable like

var RepeatModal = Backbone.Model.extend({
     defaults: {
        "uRepeateverybyweek": true,
        "uRepeateverybyday": false,
        "uRepeaton": true,
        "uRepeatby": false
     }
 });

In Html:

 <% if(elements.attributes.uRepeateverybyweek == true) { %>
                <select id="uRepeateverybyweek" class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
 <% } %>

elements.attributes.uRepeateverybyweek is not working ? with backbone.stickit

misantronic commented 8 years ago

You would rather control this in your View. Something like:

bindings: {
    '#uRepeateverybyweek': {
        observe: 'uRepeateverybyweek',
        onGet: function(val) {
            var displayMode = val ? 'inline-block' : 'none';

            this.$('#uRepeateverybyweek').css('display', displayMode);
        }
    }
}
kdbusiness90 commented 8 years ago

Hi David,

i have tried above code with below HTML but is giving me.

weeks

Resultant:

true

On Sat, Dec 26, 2015 at 9:45 PM, David Skx notifications@github.com wrote:

You would rather control this in your View. Something like:

bindings: { '#uRepeateverybyweek': { observe: 'uRepeateverybyweek', onGet: function(val) { var displayMode = val ? 'inline-block' : 'none';

        this.$('#uRepeateverybyweek').css('display', displayMode);
    }
}

}

— Reply to this email directly or view it on GitHub https://github.com/NYTimes/backbone.stickit/issues/301#issuecomment-167338589 .

KartikPython | Django | AngularJS Developer [image: Skype] kdbusiness90 kdbusiness90@gmail.com | kdbusiness90@gmail.com

StevenLangbroek commented 8 years ago

@kdbusiness90 you can remove your if statement. Also a small note, this is highly dependent on how you supply your model to your template. Marionette standardizes this heavily, and underscore templates really don't scale as well as something like Handlebars. All that being said, I wouldn't pass your entire model instance into the view, rather a serialized representation. Also: stickit has built-in capabilities for hiding / showing elements based on model attributes.

var MyView = Backbone.View.extend({
  template: _.template('#my_template'),
  render(){
    this.$el.html(this.template(this.model.toJSON())); // Only pass in serialized Model.
    return this;
  },
  bindings: {
    '#uRepeateverybyweek': {
      observe: 'uRepeateverybyweek',
      update: false, // Don't try to update this element, only make it
      visible(val, options){ return val } // visible depending on `uRepeateverybyweek` attribute
    }
  }
});