gmac / backbone.epoxy

Declarative data binding and computed models for Backbone
http://epoxyjs.org
MIT License
614 stars 89 forks source link

Problem when binding options if the currentValue is an int #21

Closed superalex closed 11 years ago

superalex commented 11 years ago

In my opinion it should work in the same way if it's an integer or a string.

gmac commented 11 years ago

Hey, tell me a bit about the problem you're trying to solve here... it looks like you're mapping the currentValue collection into strings? While I can guess at your reason for doing this (current values need to match strings stored in the select component?), it would be helpful if you can provide an example case where this actually creates a problem. Until I fully understand the problem, I can't accept a solution.

Also, this commit needs heavy optimization before I'll accept it. This could be done in a single line, as in:

var selection = _.map(isArray(currentValue) ? currentValue : [ currentValue ], String);

superalex commented 11 years ago

Thanks Gmac, I think you can ignore this pull request, what I was trying to solve (but just discovered I didn't) was the following situation:

HTML:

        <div id="test">
            <div>
                <select class="test-select" data-bind="value:person_city,options:locations_cities"></select>
            </div>

            <a href="#" id="setPerson">Set person should set city to Barcelona)</a>
        </div>

JS:

            var TestView = Backbone.Epoxy.View.extend({
                el: "#test",

                bindings: "data-bind",

                bindingSources: {
                    locations: new Backbone.Epoxy.Model({cities:[{label:"Madrid", value:1}, {label:"Barcelona", value:2}]}),
                    person: new Backbone.Epoxy.Model({name: "Han Solo", city: 1})
                },

                events: {
                    'click #setPerson': 'setPerson',
                },

                setPerson: function(event) {
                    this.bindingSources.person.set('city', 2)
                },

            });
            var testView = new TestView();

This example doesn't work as expected, when I click on the href the select doesn't change. If in the js I change the location cities values and the person city attribute to be strings it works correctly:

            var TestView = Backbone.Epoxy.View.extend({
                el: "#test",

                bindings: "data-bind",

                bindingSources: {
                    locations: new Backbone.Epoxy.Model({cities:[{label:"Madrid", value:'1'}, {label:"Barcelona", value:'2'}]}),
                    person: new Backbone.Epoxy.Model({name: "Han Solo", city: '1'})
                },

                events: {
                    'click #setPerson': 'setPerson',
                },

                setPerson: function(event) {
                    this.bindingSources.person.set('city', '2')
                },

            });
            var testView = new TestView();
gmac commented 11 years ago

Yeah, I guess I'm a little leery of type-casting in that situation; I can think of some unexpected results that may come of it. Also, this is what the filter functions are intended to address: converting data to expected types on either side of a binding.

superalex commented 11 years ago

Hmmmm, I've tried a integer filter in the for value:integer(person_city) and it works, thanks! ;)