I would like to use a select control backed by an ampersand collection, but have no option selected by default. Currently only other option methods support this.

Pending PR from me to enable this.

Hi,

ref #11

there is no onChange event apart from that on the element.

There should be a change-event triggered on the view.

As of now, when extending, the onChange-method is un-overrridable (propbably due to the binding to this at construction?), and this.el is not avavilable in initialize, so hooking into the change-event is really cumbersome.

-Maybe I don't see the full picture, but this does not behave as I'd expect from working with the other AmpersandJs modules.

Cheers.

If I instantiate a new select-view with required: true and unselectedText defined, I get a selection required message when the form first loads.

It would be great to be able to pass to options something along the lines of:

[ {"Options 1": ["Option 1.1", "Option 1.2"] }, {"Options 2": ["Option 2.1", "Option 2.2"] } ]

and get something like this as the generated <select>:

<select>
  <optgroup label="Options 1">
     <option>Option 1.1</option>
     <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Options 2">
     <option>Option 2.1</option>
     <option>Option 2.2</option>
  </optgroup>
</select>

Example: http://jsfiddle.net/JaZAm/1/

I am providing the multiple attribute in my template. So in browser, I am able to select multiple values. However, When I submit the form, the value which is given to the server is only the first one out of all those. Is there a separate module for multiselect ?

Presently, it seems that the only way to get a notification when the value of the select view changes is to provide an update method on the parent view. This doesn't work well for a view that has multiple select fields or that wants to follow an orchestrator pattern where the child view knows nothing about and does not attempt to call methods on its parent.

We should provide a change event trigger whenever setValue is called.

If you don't pick a select value and leave it on the default value, the submitCallback never gets called

Currently the placeholder text is select-able. I think it makes a lot of sense if you can't select the placeholder.

Or can you make this module extendable, so I can customize renderOptions function.

There's an open PR semi on this now: #15
This bug is specific enough to be tracked in the issues section!

When using a select view we should have the ability to specify the type of the value to be either string or number. Specifically we should be able to say that it is a number. Proposed solution interface can be found at https://gist.github.com/tdwire/8c6b0651bb564530bb36. A little more about this: by its very nature a value of an <option/> tag is a string - so this is the reason that we should be able to specify number so that it can be parsed as such. Otherwise we could just pass in numbers. This can be more readily seen by the following: http://jsfiddle.net/bpL5cjyc/

I'm not sure how consistent this module wants to be with ampersand-input-view, but I like that input-view hides the label if the content is empty.

https://github.com/AmpersandJS/ampersand-input-view/blob/master/ampersand-input-view.js#L36

This is mainly a question of consistency rather than a hard bug report. 😄

I am using an ampersand-select-view within an ampersand-form-view like this:

new FormView({
  ...
  fields: [
    ...
    new SelectView({
      el: self.queryByHook('category'),
      name: 'category',
      options: categoryOptions,
      label: 'Main Category *',
      required: true,
      requiredMessage: "Please select a category."
    })
  ]
});

The select-view renders correctly. It is also considered in the form view's validation - selecting no option does prevent the submit. However, the error message is not displayed upon submit. The error is shown, though, if I select an entry and then deselect it again.

I use other ampersand-input-views in the same FormView, which work fine.

Hey,
whenever I specify an el the SelectView doesn't get rendered at all. I use it in conjunction with ampersand-form-view.
I've tried the latest version on npm and master, all kinds of different combinations of autoAppend and autoRender to no avail.

new SelectView({
  el: this.el.querySelector('[data-hook=package-name]')
})

Without a custom el it works fine. My input-views in the form work fine as well (with custom el).
I'm not sure if it's a bug or if I'm doing something wrong, but I have no idea what to try next.

Thank you!

I'd like to install without Zuul using the --production flag in npm?

new SelectView({
    label: 'Pick a color!',
    name: 'color',
    value: 'green',
    options: ['blue', 'orange', 'red']
})

This should probably throw.

To get the value from, say, ampersand-input-view you can get .value and expect the actual string value that would be sent when the form is submitted. This is not the case with select-view. This makes inspecting the entire form challenging, as it requires too much knowledge about the fields.

As part of trying to get ampersand-form-view a little easier to use, we should standardize the way these fields views work. Namely, getValue and setValue should exist on them all and should accept and return actual string values that translate 1:1 to what will end up in the serialized form.

Right now, select-view is the closest to having this ready to go, as it currently has getOptionValue (which works exactly like getValue should) and a setValue (which works exactly as described above).

This preserves whatever under-the-hood .value or .currentValue or what have you that each fields view is doing separately.

So my proposal for this repo is to add a getValue() that either mirrors or forwards functionality to getOptionValue

@bear @cdaringe

I 'think' the issue with Sauce Labs may be that because the travis.yml is using the secure access key, only users with write access to the repo will be able to have the tests run on forked PRs.

In summary the solution is to either use the public keys in the travis.yml ( which would make the account prone to abuse e.g. using it to run tests on other projects ) or using something like this:

https://github.com/twbs/savage

Related discussion can be found here:

https://support.saucelabs.com/entries/25614798-How-can-we-set-up-an-open-source-account-that-runs-tests-on-people-s-pull-requests-

Line 38:

this.label = opts.label || this.name; // init as string. render() mutates into DOM el with .textContent equal to this value

The way I'm using the select-view, when I deliberately set the label to nothing that means I don't want a label to appear. Additionally, the name I pass into the select-view options usually matches the model attribute and is rarely (if ever) a human friendly string.

If it has to be a string, then at least set it to one. I know an empty string returns false, but I didn't see any further check, and this way it would at least avoid unintended side effects of setting it to the name.

this.label = opts.label || ""; 

Situation: 2 models:

group which has:

    props: {
        id: 'any',
        abbreviation: ['string', true, ''],
        name: ['string', true, '']
    },

And object which has a group child (extract):

    var Group = require('./group');

    children: {
      relatedGroup: Group
    },

With the following form to edit the object (extract):

            var SelectView = require('ampersand-select-view');

            new SelectView({
                label: "Related Group",
                name: "relatedGroup",
                value: this.model && this.model.relatedGroup && this.model.relatedGroup.id,
                options: app.groups,
                required: false,
                idAttribute: 'id',
                textAttribute: 'fullName',
                yieldModel: false,
                parent: this
            })

Since yieldModel is set to False, only the Id of the child object is sent in the POST/PUT API call. That's fine.
When retrieving the object (either the single state or the collection), the fake API faithfully returns just the ID. I would think that's fine as well, since based on that ID we should be able to getOrFetch the state.

But with the following code in the view's initialize:

    initialize: function (spec) {
        var self = this;
        app.objects.getOrFetch(spec.id, {all: true}, function (err, model) {
            if (err) alert('couldnt find a model with id: ' + spec.id);
            self.model = model;
            console.log(self.model.relatedGroup);
            console.log(self.model.relatedGroup.id);

self.model.relatedGroup is an Object, with functionally empty: it has empty abbreviation and name string values, but id doesn't exist on the Object. Hence the call to self.model.relatedGroup.id returns undefined.
It looks like Ampersand.js tries to create the relatedGroup property on the object model, since abbreviation and name are present, but it somehow doens't understand the value it received from the server is just the ID.

Is there an equivalent to yieldModel but for the server > client direction? In other words, could the server just send the ID, and the client perform a getOrFetch on that collection with the ID returned?
Or does the server need to accept only the ID when POST/PUT, but send the full object when GET?

Since upgrading to v3.x of ampersand-form-view, ampersand-select-view hasn't been rendering (either v2.x or v3.x)

Here's a demo of it not working.

Here's the same code – now working–, but with [email protected]

Noticed that unlike ampersand-input-view, ampersand-select-view is not a descendant of ampersand-view, therefore not sharing many of the common methods (like extend).

Is this by design?

Noticed that the name HTML attribute isn't applied to the view's <select> element. It should use the name key provided to the view.

I noticed that the view object has an onChange function, but not a event listener function.
Could this be added?

Versions of ampersand-view before 9.0.2 depend on [email protected] - this has just been removed from npm.

Any chance of this module updating it's ampersand-view dep?

Feature request for a reset method to be called by ampersand-form-view

new SelectView({
    label: 'Pick a color!',
    name: 'color',
    options: ['blue', 'orange', 'red']
})

Renders blue as the initial value, but this.value is internally undefined, therefore whole select input returns it's invalid state.

Currently if you pass a DOM node as the template you get a "Expecting string" error. All other ampersand form views accept DOM node or string as template.

I'm attempting to use a select box to pick from an array of numbers with labels (i.e. [[1,'Once'], [2,'Twice'], ...]. However, since the attribute is set to 'number' in the model, this causes the form to fail. (Edit: more info below)

Passing a collection of options and choosing a default value still makes the field return false for validity.

Options:

In situ:

Asking for a value from the DOM explicitly:

Any idea what may be causing this? Let me know if you need more information.

It's possible to pass simple string options (like options: ['blue', 'orange', 'red']) or pass array (value, label and optional to disable the option, like options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C', true] ]).

But if you mix string and array like this options: [ 'Option A', ['b', 'Option B'], ['c', 'Option C', true] ], an error is thrown when selecting one of the options that are not of the same type as the first option in the array:
Error: value not in set of provided options

This is due to the fact that in getOptionByValue, check is done based on the type of the first given option:

// find value value in options array
// find option, formatted [['val', 'text'], ...]
if (this.options.length && Array.isArray(this.options[0])) {
  for (var i = this.options.length - 1; i >= 0; i--) {
    if (this.options[i][0] == value) return this.options[i];
  }
}
// find option, formatted ['valAndText', ...] format
if (this.options.length && this.options.indexOf(value) !== -1) return value;
throw new Error('value not in set of provided options');

I think it would make sense to be able to mix both string and array definition, for example if the strings are OK as values but you want to disable just one item.