selected option breaks when using nested attributes (with Backbone.DeepModel)

[Zensavona]

I'm using stickit to bind select elements from a collection and match them to a nested attribute/s in my model. The initial setting of option.prop("selected", true) on the correct select option works fine, but when I select a new option it removes the selection and makes the select have no selected option (see jsfiddle for demonstration). When setting a single value on the model it works fine (also see jsfiddle) It's interesting that although there is no re-render, when I select a different option on a different select it also breaks the nested one's selected option.

If you have a look at the console, you will see that the model is actually being updated correctly - also if you re-select the option you just selected in the select it will show fine in the UI (also, if you set a new value to the model independently of the UI, it breaks).

Have a look: http://jsfiddle.net/mZzhy/63/

One point to note is that I am using Thorax on top of Backbone, and this is why I set this.stickit() in a view render listener (so as not to rip out Thorax's native render functionality).

Thanks!

[sergey-dev]

I think this feature is not supported by stickit yet.

From my side, I handled it manually, here're the code snippets:

For the model:

Backbone.Model.extend({
        defaults: {
...
            selectors: {},      // nested attribute
...
        }

For the view, there's iterative binding:

      addCustomStickitBindings: function () {
            var self = this;
            _.each(this.model.get("selectors"), function (value, key) {
                self.bindings["select[name='selector[" + key + "]']"] = {
                    observe: "selectors." + key,
                    onSet: function (val, options) {
                        // this routine is needed, as Backbone.Model.set() can't work with nested objects structure
                        var attrName = options.observe.split(".")[0];
                        var nestedAttrName = options.observe.split(".")[1];
                        var nestedObj = options.view.model.get(attrName);
                        nestedObj[nestedAttrName] = val;
                        options.view.model.set(attrName, nestedObj);
                    }
                };
            });
        },

Sorry, it was taken from my latest life project, so I haven't adapted it for your specific needs, but I hope it will explain you the method itself.
Also, I think, It's a quick&hacky way, though it works and scalable for you needs, you may extend it to your needs manually.

[Zensavona]

Thanks for the suggestion @sergey-dev, but isn't your above fix required because Backbone.Model doesn't fire change events for nested attributes? (the whole point of Backbone.DeepModel is that it does just this)

[sergey-dev]

@Zensavona , you are right, the snippet above actually solves two problems, including binding of the nested model's events. Sorry, if it's not what you expect.

Also consider this issue #254 , which also might be connected with your's issue related to deselection and re-rendering of options.