EF是 Enterprise Framework 的简称,表明其作为企业级开发框架的身份。
另外该项目负责人很喜欢一部叫EF的动画
ef is a integration framework with er & esui
function getProperty(target, path) {
var value = target;
for (var i = 0; i < path.length; i++) {
value = value[path[i]];
}
return value;
}
ef/UIView这块代码有点隐藏的bug
getProperty({}, ['a', 'b']); //会报错,因为obj.a === undefined
因为模板中怎么写程序是没法预知的,所以,这里的查找放到try里面更好些
现在ef/ActionPanel中的子Action无法与父Action进行事件交互。原因是父Action根本不知道子Action的存在。子Action是包裹在esui控件中的;
目前,唯一的方法是通过全局的er/events来完成,个人感觉有点tricky;
大概有个思路是将子Action的事件代理到Panel控件实例上,例如:
panel.action.on('*', function (e) {
panel.fire('action-' + e.type, e);
});
然后,在ef/View中就可以使用uiEvents来配置事件侦听
ParentView.prototype.uiEvents = {
actionPanel: {
'action-submit': function (e) {
// 释放一个子Action自定义的事件
this.fire('child-action-submit', e.data);
},
'action-cancel': function () {
// 善后之类的啥啥啥
}
}
};
目前在ER中只是触发了model的change事件,这个能不能考虑在EF里实现一下?
配合 ecomfe/edp#34 ,希望有如下形式的模板:
edp code-gen view SomeView
生成基本的View代码edp code-gen action SomeActoin
生成基本的Action代码edp code-gen model SomeModel
生成基本的Model代码edp code-gen ef-module Some
生成上面3个等使用mini-event后,可以直接指定绑定事件的this
对象,因此不需要再做直接修改uiEvents
这样的hack了
这个不知道是不是我使用的姿势有问题。或者我们的ListAction
应该尽快支持部分刷新了 @Justineo
如那天所见的,我的ActionDialog里边是一个列表,一个ListAction
。现在稳定版本中的ListAction
翻页等筛选操作会刷新整个childAction
。然后childAction
在enteraction
的时候,ActionPanel
会触发actionattach
,ActionDialog
就会去resize()
。这个时候其实页面还没加载好,所以计算的时候Dialog
只有头部,位置就往下移了。
然后我就必须触发Dialog.show()
来重新计算位置,所以就有一个比较刺激的上下跳动的视觉效果。
最后我只好自己用Dialog
套ActionPanel
去避开actionattach
事件
所以问题应该就是,如果ActionDialog
里边的childAction
刷新了,这个上下跳动的效果应该不是我们想要的吧。。
现象:ChildView中的InputControl控件在表单提交时,不会触发控件自身的验证逻辑;
原因:Form在触发各控件的验证逻辑前,会先进行一次对InputControl控件的查找,只有满足一定逻辑的控件才会添加进触发验证的数组,其中一个条件为control.viewContext === form.viewContext
,但显然ChildView中的控件和Form并不在同一个viewContext中,因此ChildView中的控件就不会加入到触发验证的控件数组中去。
解决方案:
/**
* 代理子Action的事件
*
* @param {mini-event.Event} e 事件对象
*/
function delegateActionEvent(e) {
var event = require('mini-event').fromEvent(e, { preserveData: true, syncState: true });
event.type = 'action@' + e.type;
this.fire(event);
}
上面的这个方法在普获到actionpanel里面的事件的时候会fire出来,但是在view中通的actionpanel的ID去绑定fire的事件却不能正常捕获,发现直接在上面函数中fire(event.type)是可以成功的,但是本身却不能正常捕获到事件。
包含UIView
下的name
、uiEvents
和uiProperties
属性
有没有可能继承ER的promise风格,actionPanel在render之后有一个actionPromise属性,方便用户可以用promise风格去把异步过程串联下去。毕竟用callback的方式还是很不方便的。
现在actionPanel在render之后,action type取决于action初始化时机,开始是一个Promise,之后又变成了Action.
// 现在只能这么写
var actionPanel = ui.create('ActionPanel', options);
actionPanel.render();
var actionPromise = actionPanel.action;
actionPanel.on('actionloaded', function(){
var actualAction = actionPanel.action;
// do something else...
});
// 期待这种风格
actionPanel.action.then(function(actualAction){
// do something else...
})
现在有ActionPanel
,对应可以加载一个子Action,但是往往我们将一个页面切成多块时,其中一小块并不需要Action
和Model
的逻辑,只是对一个视图片断的封装,比如控件的联动效果之类
因此创建一个控件ChildView
,使用方法类似:
<esui-child-view data-ui-view-type="foo/BarView" data-ui-model="@self"></esui>
这个控件会负责加载对应的View
,然后使用给的Model
去渲染,并代理View
的所有事件(通过view@xxx
事件)
需求是想根据Model
中的其他的数据,再来决定这个数据的格式。如果把formatter的执行Scope设定为当前Model
,就可以类似这么干:
SomeModel.prototype.formatters = {
someProperty: function (value) {
return this.get('xxx') === 'xxx' ? null : new Date(value)
}
};
这样就可以动态的格式化我的某个属性值了。或者有别的更好的解决办法,求指导。
ef对于ie7的支持情况??
现有的FormView
虽然有自己独立的ViewContext
,但是这个ViewContext
没有name
属性,会导致生成的DOM id不可预测,在自动化测试等场景下出现问题
需要在ChildView
中创建View
之后,根据自己的id
或name
,以及自己所在的ViewContext
的name
,拼出一个新的来给创建的View
用,如:
slot/create
View.name
就是slot-form
id
或name
叫size
的ChildView
ChildView
里的View
的name
属性应该为slot-form-size
size
这个View
里面有width
控件slot-form-size-width
@srhb18 你来解决这问题如何?
考虑到@
只能单一获取数据的方式,希望能支持更加#
支持调用UIView
的方法。例如,这样
SomeView.prototype.uiProperties = {
name: {
value: '#getComplicatedValue'
}
};
SomeView.prototype.getComplicatedValue = function () {
if (this.model.get('some-variable') == 'some-value') {
return 100;
}
else {
return 200;
}
};
这样做的好处在于可以将业务逻辑层
数据与表现层
数据相剥离;例如,在model
中的某一业务逻辑参数取值不同,在View
有N个参数需要相应变化。以往有两种方式可以完成这个逻辑:
Model
中预先完成这部分参数的处理,但实际上这些参数只与表现
相关,与业务逻辑
无关,不应当在Model
中完成。View.enterDocument()
中处理:取Model
的参数,调用相应的表现逻辑函数处理,比较笨拙。建议添加一个新的语法糖#
,指定一个View
的接口,在参数替换过程中直接调用。
/**
* 替换元素属性中的特殊值
*
* @param {string} value 需要处理的值
* @return {*} 处理完的值
* @public
*/
exports.replaceValue = function (value) {
if (typeof value !== 'string') {
return value;
}
if (value === '@@' || value === '**') {
return this.model;
}
var prefix = value.charAt(0);
var actualValue = value.substring(1);
if (prefix === '@' || prefix === '*') {
var path = actualValue.split('.');
var value = this.model.get(path[0]);
return path.length > 1
? getProperty(value, path.slice(1))
: value;
}
else if (prefix === '#') {
return this[actualValue]();
else {
return value;
}
};
现在只能传Model
中的某个属性,使用特殊的语法(比如@@
?)来传递Model本身
配合 ecomfe/esui#80 ,UIView
生成的ViewContext
的id
也应当稳定下来
把Action
的xxx
事件代理成action@xxx
事件
可以注册enteraction
事件来提供,这时Action实例已经存在,可以在Action上注册事件之类的如modelloaded
进行更好地交互
如果在UIView
中,用Dialog.alert
打开一个对话框,他的viewContext
是默认的那个。但是每个UIView
有一个自己的ViewContext
环境,这会导致UIView
销毁时,这个对话框不会一起销毁。
Dialog
已经支持在alert
和confirm
的时候传递一个viewContext
参数,所以代码要这么写:
Dialog.alert({
title: ...,
content: ...,
viewContext: this.viewContext
});
这个太麻烦,所以是不是需要由UIView
提供alert
和confirm
这两个接口?
当autoClose
为true
时,注册handlefinish
并销毁自己,此时需要加一句e.preventDefault()
来阻止默认行为,默认行为可能是URL的跳转等,造成不必要的开销
UIView上渲染了一些控件,现在在ActionPanel里只能通过actionPanel.action.view.get(controlId)去拿,
想用这种写法actionPanel.viewContext.get(controlId),但是两者的viewContext不是一个。前一种写法嵌套层级一深,写法会比较痛苦。
有办法能让两者的viewContext是一个吗?我看UIView有一个this.name, 但是不知道怎么设上这个name,希望大神指点。
ER的View#render
方法是同步的,但在现实中往往有一些异步的情况存在:
ActionPanel
、ViewPanel
等涉及到加载某些AMD模块Action
和Model
获取一些数据由于render
方法同步的特性,导致在enterDocument
中处理逻辑需要对异步进行等待的操作,进一步让代码复杂度提高
我们希望render
可以是一个异步的过程,这一修改大致如下:
对er.View
进行修改,增加一个wait({Promise} promise)
方法,渲染过程只有在所有promise
均完成后,才会进入enterDocument
我们希望ActionPanel
和ViewPanel
之类的一定会有异步行为的控件可以自动被wait
,因此我们需要一些进一步的修改,以下是几种方案:
esui.main.init
方法,在每个控件render()
时提供一个controlrender
事件,通过这一事件可以获取控件实例,供ef.UIView
来判断ef.UIView
,注册controlrender
事件,将所有有异步的控件添加到wait
中这个方案的缺点是esui.main
是单例的,注册和注销事件如果有所遗漏会造成不可预期的全局影响。
基于方案一,将esui.main
做成class的形式,每一个UIView
会单独有一个实例,以解决单例对象上事件管理的问题
这个方案的缺点是修改代价很高
在esui.ViewContext
上实现getAllControls
或者queryByType
方法,能够获取到需要的控件
这个方案的缺点是可能会破坏一些ViewContext
希望提供的封装性
由ef
实现一个ViewContext
子类,重写add
方法,当需要的控件被添加时会自动wait
这个方案的缺点是看上去很别扭,包括ViewContext
和UIView
会相互关联,以及对一个普通容器类的继承和重写
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.