Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Data Binding
import Ember from 'ember';
export default Ember.Route.extend({
activate() {
document.body.classList.add('standard');
}
});
<header class="container-fluid">
<h1>Ember Sandbox</h1>
</header>
<hr>
<main class="container-fluid">
{{outlet}}
</main>
import Ember from 'ember';
import get from 'ember-metal/get';
import set from 'ember-metal/set';
export default Ember.Component.extend({
actions: {
change() {
// this.toggleProperty('model');
set(this, 'model', !get(this, 'model'));
}
}
}).reopenClass({ positionalParams: ['model'] });
<p>在 <code>data-binding</code> 组件里的值: <strong>{{model}}</strong></p>
<div>
<button type="button" class="btn btn-success" onclick={{action "change"}}>
&nbsp;<code>data-binding</code>&nbsp;组件里改变值
</button>
</div>
{{yield}}
import Ember from 'ember';
import get from 'ember-metal/get';
import set from 'ember-metal/set';
export default Ember.Controller.extend({
actions: {
change() {
this.toggleProperty('model');
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return true;
}
});
<p>在 <code>index</code> 路由(模版)里的值: <strong>{{model}}</strong></p>
<div>
<button type="button" class="btn btn-primary" onclick={{action "change"}}>
&nbsp;<code>index</code>&nbsp;里改变值
</button>
</div>
<!-- change: -->
<!-- model: boolean -->
<hr>
<h3>双向绑定</h3>
{{data-binding model=model}}
<hr>
<h3>单向绑定</h3>
{{data-binding model=(readonly model)}}
<!-- diff -->
{{data-binding model=(get this "model")}}
<hr>
<h3>复制(没有绑定)</h3>
{{data-binding model=(unbound model)}}
*, *::before, &::after {
box-sizing: border-box;
}
strong {
color: red;
font-size: 1.2rem;
}
{
"version": "0.13.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": true,
"enable-testing": false
},
"dependencies": {
"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js",
"hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
"standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
"ember": "2.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-route-action-helper": "latest",
"ember-truth-helpers": "latest"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment