Bricks--简化Ember App开发

对应Bootstrap alert组件，对Bootstrap alert进行轻量级封装。

实例

Handlebars代码：

复制


{{#bu-alert type="danger"}}
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Alert can also be used in a <strong>block form</strong>.</p>
<p>
<button class="btn btn-danger" {{action "submit"}}>Take this action</button> <a class="btn btn-default">Or do this</a>
</p>
{{/bu-alert}}

BuGrowlNotifications是一种标准的通知组件实现，可以实现信息提示的功能。

实例

Handlebars代码：

复制


{{bu-growl-notifications}}

Js代码：

复制


Showcase.ShowComponentsGrowlNotifController = Ember.Controller.extend({
pushInfo: function() {
Bootstrap.GNM.push('INFO!', 'Hello, this is just an info message.', 'info');
},
pushSuccess: function() {
Bootstrap.GNM.push('SUCCESS!', 'Successfully performed operation!', 'success');
},
pushWarn: function() {
Bootstrap.GNM.push('WARN!', 'Could not perform operation!', 'warning');
},
pushDanger: function() {
Bootstrap.GNM.push('Danger!', 'System is halting!', 'danger');
}
});

对应Bootstrap modal组件，对Bootstrap modal进行轻量级封装。

实例

Handlebars代码：

复制


{{bu-button title="Show Modal" clicked="show"}}
{{#bu-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
<p>Modal content!</p>
{{/bu-modal}}

Js代码：

复制


Showcase.ShowComponentsModalController = Ember.Controller.extend({
myModalButtons: [
Ember.Object.create({title: 'Submit', clicked:"submit"})
Ember.Object.create({title: 'Cancel', clicked:"cancel", dismiss: 'modal'})
],

actions: {
//Submit the modal
submit: function() {
Bootstrap.NM.push('Successfully submitted modal', 'success');
return Bootstrap.ModalManager.hide('myModal');
},

//Cancel the modal, we don't need to hide the model manually because we set {..., dismiss: 'modal'} on the button meta data
cancel: function() {
return Bootstrap.NM.push('Modal was cancelled', 'info');
},

//Show the modal
show: function() {
return Bootstrap.ModalManager.show('myModal');
}
}
});

分页组件。

实例

Handlebars代码：

复制


<!-- numberOfPages 显示的页码个数 -->
<!-- pagerController 当前分页组件的控制器,必须配置,并且该控制器必须集成BricksUI.DynamicPageable -->
{{bu-pagination numberOfPages=5 pagerControllerBinding="controller"}}

容器组件,可以配置头部和脚注。

实例

Handlebars代码：

复制


{{#bs-panel
heading="Primary Panel"
type="primary"
collapsible=true
open=false
dismiss=true
onClose="panelClosed"
clicked="panelClicked"}}
<p>Panel content.</p>
{{/bs-panel}}

对应Bootstrap progress组件，对Bootstrap progress组件进行轻量级封装。

实例

Handlebars代码：

复制


{{bu-progress progressBinding="prog"}}
{{bu-button clicked="increment" content="Increment!"}}

Js代码：

复制


Showcase.ShowComponentsProgressbarController = Ember.Controller.extend({
prog: 0,
incrementBy: 20,
increment: function() {
if (this.prog < 100) {
return this.incrementProperty("prog", this.incrementBy);
} else {
return this.set("prog", this.incrementBy);
}
}
});

Tab标签页组件。

实例

Handlebars代码：

复制


<div class="bs-example">
{{bu-tabs id="tabs1" contentBinding="tabsMeta" default="Foo"}}
{{bu-tabs-panes items-id="tabs1" contentBinding="tabsMeta"}}
</div>

Js代码：

复制


SomeController = Ember.Controller.extend({
tabsMeta: Ember.A([
Ember.Object.create({ title: 'Foo', template: 'tabs/foo-tabpane', controller: 'ShowcaseComponentsTabsFoo'}),
Ember.Object.create({ title: 'Bar', template: 'tabs/bar-tabpane'})
]);
});

Bootstrap 向导组件，对向导功能提供封装。

实例

Handlebars代码：

复制


{{bu-wizard contentBinding="steps"}}

Js代码：

复制


Showcase.ShowComponentsWizardController = Ember.Controller.extend({
init: function() {
this._super();
this.set('steps', Ember.A([
Ember.Object.create({title: 'Foo', template: 'tabu/foo-tabpane'}),
Ember.Object.create({title: 'Bar', template: 'tabu/bar-tabpane'}),
Ember.Object.create({title: 'Baz', template: 'tabu/baz-tabpane'})
]));
}
});

基于Ember-Data的数据处理扩展,用于分页处理分页扩展,用于增强控制器的功能,使控制器具备分页管理功能。

实例

Js代码：

复制


//modelName 必须配置,当前分页组件所要请求的模型名称
//query 要传入到后台的查询参数,是一个计算属性,需要返回Object
App.ApplicationController = Ember.ArrayController.extend(BricksUI.DynamicPageable,{
perPage: 5,
modelName:"user",
firstName:"xx",
selectedPageSize:5,
pageSizes: [
5,10,15,20
],
query:function(){
return {
firstName:this.get('firstName'),
limit:this.get('selectedPageSize')
}
}.property("firstName","city").volatile()
});

Bootstrap时间日期选择插件。

实例

Handlebars代码：

复制


<!-- 日期选择 -->
{{bu-datepicker value=d1 options='{"pickTime":false}'}}
<!-- 时间选择 -->
{{bu-datepicker value=d2 options='{"pickDate":false}'}}
<!-- 日期时间选择 -->
{{bu-datepicker value=d3}}

Bootstrap时间日期范围选择插件。

实例

Handlebars代码：

复制


{{bu-daterange startDate=startDate endDate=endDate}}

基于ember与百度umeditor的富文本编辑器。

实例

Handlebars代码：

复制


{{bu-editor value=title valueType="contentTxt"}}

树组件，对Jquery Ztree进行简单的封装。

实例

Handlebars代码：

复制


{{bu-tree options=view.treeOptions zNodes=view.zNodes}}

Js代码：

复制


//Tree View
export default Ember.View.extend({

init: function () {
this._super.apply(this,arguments);
this.set('treeOptions', {
onClick:function(component, event, treeId, treeNode, clickFlag){
//your code
}
});
this.set('zNodes', [
{ name: "父节点1 - 展开", open: true,
children: [
{ name: "父节点11 - 折叠",
children: [
{ name: "叶子节点111"},
{ name: "叶子节点112"},
{ name: "叶子节点113"},
{ name: "叶子节点114"}
]},
{ name: "父节点12 - 折叠",
children: [
{ name: "叶子节点121"},
{ name: "叶子节点122"},
{ name: "叶子节点123"},
{ name: "叶子节点124"}
]},
{ name: "父节点13 - 没有子节点", isParent: true}
]},
{ name: "父节点2 - 折叠",
children: [
{ name: "父节点21 - 展开", open: true,
children: [
{ name: "叶子节点211"},
{ name: "叶子节点212"},
{ name: "叶子节点213"},
{ name: "叶子节点214"}
]},
{ name: "父节点22 - 折叠",
children: [
{ name: "叶子节点221"},
{ name: "叶子节点222"},
{ name: "叶子节点223"},
{ name: "叶子节点224"}
]},
{ name: "父节点23 - 折叠",
children: [
{ name: "叶子节点231"},
{ name: "叶子节点232"},
{ name: "叶子节点233"},
{ name: "叶子节点234"}
]}
]},
{ name: "父节点3 - 没有子节点", isParent: true}
]
);
}
});

Ember-EasyForm提供对基础表单的封装，同时提供I18n以及字段校验的功能。

实例

Handlebars代码：

复制


{{#form-for model}}
{{input firstName}}
{{input lastName}}
{{input bio as="text"}}
{{input country as='select'
collection="App.countries"
selection="country"
optionValuePath="content.id"
optionLabelPath="content.name"
prompt="Select Country"
}}
{{/form-for}}

编译后的代码：

复制


<form>
<div class="input string">
<label for="ember1">First name</label>
<input id="ember1" type="text"/>
<span class="error"></span>
</div>
<div class="input string">
<label for="ember2">Last name</label>
<input id="ember2" type="text"/>
<span class="error"></span>
</div>
<div class="input string">
<label for="ember3">Bio</label>
<textarea id="ember3"></textarea>
<span class="error"></span>
</div>
<div class="input string">
<label for="ember4">Country</label>
<select id="ember4">
xxx
</select>
<span class="error"></span>
</div>
</form>

拓展Ember.EasyForm.Input的CheckBox功能提供复选框按钮组的功能。

实例

Handlebars代码：

复制


{{checkbox something modelBinding="model" propertyPath="something" elementsBinding="fruits" labelPath="name"}}

拓展Ember.EasyForm.Input的Radio功能提供单选按钮组的功能。

实例

Handlebars代码：

复制


{{radio something modelBinding="model" propertyPath="something" elementsBinding="fruits" labelPath="name"}}

重置Ember.EasyForm下拉组件行为，将下拉框组件行为转换为chosen组件。

实例

Handlebars代码：

复制


{{#form-for model wrapper="bootstrap"}}
{{input author
as='select'
data-placeholder="请选择作者"
collection="category"
optionLabelPath="content.value"
}}
{{input tags as='select'
data-placeholder="请选标签"
multiple=true
collection="category"
optionLabelPath="content.value"
}}
{{/form-for}}

Ember国际化支持。

实例

Handlebars代码：

复制


<h2>{{t "user.edit.title"}}</h2>

Js代码：

复制


Em.I18n.translations = {
"user.edit.title": "Edit User",
"user.followers.title.one": "One Follower",
"user.followers.title.other": "All {{count}} Followers",
"button.add_user.title": "Add a user",
"button.add_user.text": "Add",
"button.add_user.disabled": "Saving..."
};

编译后的代码：

复制


<h2><span id="i18n-123">Edit User</span></h2>

Bricks

Brick-UI

BricksUI.BuAlert

实例

BricksUI.BuGrowlNotifications

实例

BricksUI.BuModal

实例

BricksUI.BuPagination

实例

BricksUI.BuPanel

实例

BricksUI.BuProgress

实例

BricksUI.BuTabs

实例

BricksUI.BuWizard

实例

BricksUI.DynamicPageable

实例

Ember.BuDatePicker

实例

Ember.BuDateRange

实例

Ember.BuEditor

实例

Ember.BuTree

实例

Ember.EasyForm

实例

Ember.EasyForm.Checkbox

实例

Ember.EasyForm.Radio

实例

Ember.EasyForm.Select

实例

Ember.I18n

实例