Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Data Binding-test
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({
name: 'xx',
actions: {
change() {
this.set('name', Math.random());
this.toggleProperty('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;组件里改变值 {{name}}
</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
}
});
<h3> test input binding</h3>
<input value={{name}} >
<input value={{name}} oninput={{action (mut name) value="target.value"}}>
{{input value=name }}
{{input value=(get this 'name') }}
{{input value=(unbound name) }}
{{name}}
<hr>
<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>
<hr>
<h3>双向绑定</h3>
{{data-binding model=model name=(readonly name)}}
<hr>
<h3>单向绑定</h3>
{{data-binding model=(readonly model) name=(readonly name)}}
<hr>
<h3>复制(没有绑定)</h3>
{{data-binding model=(unbound model)}}
*, *::before, &::after {
box-sizing: border-box;
}
strong {
color: red;
font-size: 1.2rem;
}
import Ember from 'ember';
export default function destroyApp(application) {
Ember.run(application, 'destroy');
}
import Resolver from '../../resolver';
import config from '../../config/environment';
const resolver = Resolver.create();
resolver.namespace = {
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix
};
export default resolver;
import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';
const { run } = Ember;
const assign = Ember.assign || Ember.merge;
export default function startApp(attrs) {
let application;
let attributes = assign({rootElement: "#test-root"}, config.APP);
attributes = assign(attributes, attrs); // use defaults, but you can override;
run(() => {
application = Application.create(attributes);
application.setupForTesting();
application.injectTestHelpers();
});
return application;
}
import resolver from './helpers/resolver';
import {
setResolver
} from 'ember-qunit';
setResolver(resolver);
{
"version": "0.10.5",
"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-data": "2.6.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-route-action-helper": "2.0.0",
"ember-truth-helpers": "1.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment