Search code examples
ember.jsember-cli

Ember select view not understanding an Array


I have this weird error on ember running on windows. I'm copying this code for a select

inputs.hbs:

<h1>All inputs</h1>

<input id="register-input-1" type="text" placeholder="username">

<form action="">
  {{input type="radio" name="type" value="foo" }}Foo<br>
  {{input type="radio" name="type" value="bar"}}Bar
  {{input type="text" name="type" placeholder="type in here"}}
  {{view "select" content=names}}
</form>

controller:

export default Ember.Controller.extend({
  selectedName: 'Tom',
  names: ["Yehuda", "Tom"]
});

but I get this error:

Uncaught Error: Assertion Failed: 
  The value that #each loops over must be an Array. You passed [Yehuda,Tom]

copied from here: http://emberjs.com/api/classes/Ember.Select.html

here are my dependancies:

bower:
{
  "dependencies": {
    "jquery": "^1.11.1",
    "ember": "1.11.0",
    "ember-data": "1.0.0-beta.16.1",
    "ember-resolver": "~0.1.15",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
    "ember-qunit": "0.3.0",
    "ember-qunit-notifications": "0.0.7",
    "qunit": "~1.17.1"
  }
}

pack:

{

  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "ember-cli": "0.2.2",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "0.0.8",
    "ember-cli-htmlbars": "0.7.4",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.9",
    "ember-cli-uglify": "1.0.1",
    "ember-data": "1.0.0-beta.16.1",
    "ember-export-application-global": "^1.0.2",
    "ember-disable-prototype-extensions": "^1.0.0"
  },
  "keywords": [
    "ember-addon"
  ],
  "dependencies": {
    "ember-cli-babel": "^4.0.0"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config"
  }
}

Solution

  • Based on our comments, it seems as if you have prototype extensions disabled. In a nutshell, Ember.js extends a lot of the built-in global objects such as Array with additional methods. It does this to conform to the API that is required for it's object model and observer system. However, the Ember team realizes that not everybody is allowed to modify built-in objects, so it has the object to disable these extensions. The downside of doing that is that Ember still needs all of the objects in your program to conform to the API that it requires.

    That's where Ember.A() comes in. Ember.A() takes a plain old Javascript array (that hasn't had the extensions enabled) and wraps it with an EmberNativeArray. This ensures that the array conforms to the API needed, but doesn't have to modify the built-in Array prototype to do it.

    To make a long story short, if you have prototype extensions disabled, you have to call Ember.A() on every array that Ember is going to use at some point. Whether it's an array literal (as in your code), or an array returned from a third-party library, you must call Ember.A(array) before giving it to Ember.