Ember.js 1.11.0 and 1.12 Beta released

We are happy to announce the release of the first beta version in the Ember.js 1.11.0 and 1.12 series. This is the eleventh cycle of the release process that we started after the 1.0 release.

Version 1.11 represents the efforts of at least 87 contributors in more than 646 commits.

New features in Ember.js 1.11

Binding attribute syntax

Current Ember developers are familiar with bind-attr Syntax, used to declare attribute bindings on HTML elements. The original motivation of HTMLBars was to improve this syntax.

Ember 1.11 introduces a more intuitive API for property binding.For example, here color The variable is bound to the class of the div:

<div class="{{color}}"></div>

The inline if helper can also be used in these contexts:

<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>

For some attributes, such as disabled Boolean, it is advisable to pass a literal value. one example:

<input disabled={{isDisabled}}>

In order to allow binding of non-string value data to Boolean attributes and custom element attributes, bind attributes use
Property first Setter.

When binding to an attribute, Ember first checks whether the attribute is an attribute of the element’s DOM node (using uppercase normalization). If it is, use the property to set the value. E.g:

<input disabled={{isDisabled}}>
// disabled is a property of input elements, so...
input.disabled = true;

If the attribute does not exist as an attribute, set its value as an attribute:

<div class={{color}}>
// class is not a property of div elements, do...
div.setAttribute('class', 'red');

For SVG attributes and style attributes, we made exceptions to this mode and used setAttribute all the time. Despite these exceptions, the attribute first rule is a good way to describe what is happening behind the scenes. In practice, the binding syntax feels natural.

thank you very much @mixonic, @_mmun, with @wycats Thank them for their efforts in designing and implementing this feature.

Escape content in HTMLBar

The bound attribute syntax introduces several new uses of mustache ( {{ Syntax used in Ember templates). These new uses are accompanied by new security considerations.

Two notable new considerations are the use of mustaches in the styling context and in the JavaScript context. For example, if this binding is not escaped, it is vulnerable to XSS attacks in IE8 (via ActiveX controls):

<div style="width: {{userProvidedWidth}}px;"></div>

Achieving context-sensitive escaping in CSS and JavaScript will require further research and development.In Ember 1.11, binding style When the value is not marked as safe, the attribute will issue a warning.

{{! No escaping strategy, log a warning }}
<a style="width: {{someProperty}}px"></a>

The following example is intended to demonstrate how this works in practice.

{{! Works as expected }}
<a class="{{someProperty}}"></a>

{{! Works as expected, and escapes unsafe urls }}
<a href="{{someProperty}}"></a>

{{! Works as expected, and escapes unsafe urls }}
<img src="{{someProperty}}"></a>

Warning about unsafe binding, except style Will be introduced before Ember 2.0.

{{! No escaping strategy in 1.11 }}
<a onmouseover="alert('{{someProperty}}');"></a>

{{! No escaping strategy in 1.11 }}
<style>width: {{someProperty}}px</style>

Strings that are known to be fully escaped can be passed htmlSafe Function to mark them as safe.

import Ember from "ember";

export default Ember.Component.extend({
  layout: Ember.HTMLBars.compile("<a style="width: {{someProperty}}px">"),
  someProperty: function(){
    return Ember.String.htmlSafe(this.get('someKnownSafeProperty'));

An alternative that is not too salty is to use {{{ “Escaped Beard” style. As we approach 2.0, we plan to improve the escape content.

Inline if

In 1.11 Ember if Helper can be used inline:

{{if isEnabled 'active' 'disabled'}}

Thank you @eaf4 with @marciojunior_me Used to achieve this function.

Each has an index

This each Helper will support index Block parameters in Ember 1.11:

{{#each people as |person index|}}
  {{! The first index value will be 0 }}
  <div>{{index}}: {{person.name}}</div>

Thank you @timmyce with @_mmun Used to achieve this function.

Named substate

Ember routing has two routing sub-states.This loading If the asynchronous hook of the route is still being processed, it will enter the sub-state, and error When the asynchronous hook promise is rejected, it will enter the sub-state.

The child state is a sibling route. when. . .when new route cars.new loading, cars.loading
Enter the sub-state.This application route does not have a parent namespace to nest its siblings.This makes the use of loading with error Impossible sub-states of the application path.

Naming sub-states adds a new search method to sub-states. The name of the route is pre-added to the sub-state.So a valid loading substate application Can be defined as

Thank you @machty Used to log in to this function.

Component assistant

Ember components can pass component helper. For example, this logic in the template:

{{#if isRed}}
{{else if isBlue}}
{{else if isGreen}}

Can now be replaced with calculated attributes and component helper.

{{component colorComponentName}}

The property colorComponentName Should have a value x-red, Or x-blue and many more. As the value of the property changes, the rendered components will also change.

thank you very much @卢克梅利亚 Used to publish this new feature.

Performance improvement

Compared with the previous version, Ember.js 1.10 has good rendering performance. We are very happy that Ember 1.11 builds on this advancement. Compared with 1.10, the common list rendering scene is improved by about 20%, and the creation speed of view instances is more than doubled.These measurements are using
Human performance Repurchase.

Continue to make progress Low light rendering engine
Announced at EmberConf 2015. This significant performance improvement is expected to be implemented in Ember.js 1.13.

Significant deprecation in 1.11

The following deprecation plan is released with Ember.js 1.11:

  • This ObjectController Will be removed in Ember 2.0.In Ember 1.11, both are explicitly used ObjectController And use the generated proxy behavior ObjectController Will raise a deprecation warning.see
    Deprecation guide more details.
  • Initialize the instance (via container.lookupThe initializer in) has been deprecated. For initialization that requires an instance, Ember introduces an “instance initializer”.see Deprecation guide
    For more information and this Document PR
    with Implement public relations.
  • Not deprecated, but related: {{bind}} The template helper is a private helper and has been deprecated since Ember 1.10. It has been removed in Ember.js 1.11.

Change log

Leave a Reply

Your email address will not be published. Required fields are marked *