regularjs / regular Goto Github PK
View Code? Open in Web Editor NEWregularjs: a living template engine that helps us to create data-driven component.
Home Page: http://regularjs.github.io/
License: MIT License
regularjs: a living template engine that helps us to create data-driven component.
Home Page: http://regularjs.github.io/
License: MIT License
有些实体没有名称,只能用编码。
demo见 http://jsfiddle.net/damngoto/ypc0dtL4/
需要手动更新
{#list items as item}
{item.a}
{item.b}
{/list}
怎么对 item.a 全部拼接起来 ,怎么对item.b 求和 ,不想在后台处理好在发出来,因为会遍历两次
如题
v0.4.0 is prereleased in branch next
see more in https://github.com/regularjs/regular/milestones
I have some issues with Regular animations. Very often the animations are not called, because the element which I want to animate is wrapped in another element, like in example below:
{#if show}
<!-- this element will be animated as expected -->
<div class="box" r-animation="on:enter;slide:in"></div>
<div>
<!-- this element won't be animated -->
<div class="box" r-animation="on:enter;slide:in"></div>
</div>
{/if}
I find this behavior unreliable, especially when I have some animations in components, sometimes they are fired, sometimes not. Also there are some elements you don't want to animate, like <tr>
when it is shown, but you want to animate elements inside of it, but how to do this in Regular?
The similar goes to on:leave
animation. Element should be removed from the DOM only when all of it's descendant elements have stopped being animated. Now it is just removed immediately.
I think that is also could be useful, although less important, to provide additional directives for on:enter
and on:leave
animations, some kind of shortcuts, because they are quite common. For example Ractive has intro
and outro
directives which are very useful and commonly used.
I would also like to mention, that the animation directive could be also used for something different than animating, eg.
<!-- in Ractive.js -->
<input type="text" intro="focus">
<!-- in Regular.js -->
<input type="text" r-animation="on:enter;focus">
which is very simple to create:
Regular.animation('focus', function(t) {
return function(complete) {
t.element.focus();
complete();
};
});
Unfortunately because of the problem with wrapping elements, this event in Regular in most cases won't be fired.
current version. the ref is immutable, only change one time.
I have done the work to config the END_TAG and BEGIN_TAG using
Regular.config({
END: ']]',
BEGINE: '[['
})
take this opportunity , I hesitate to change the default '{{}}' to '{}'。
double {{
obviously redundant。
changes looks small, but have big issue。
So It is really a big problem, it is all beacuse of my wrong decision for syntax。
1.假设 checkedAll 默认true
当点击进去onCheckAll函数时,chrome里面已经checkedAll已经为false。firefox仍然为true
beacuse regularjs is use textNode to accpet the textContent(not innerHTML) , so the html entity is not converted
for example
<p> </p>
will output
;
According to https://developer.mozilla.org/en-US/docs/Web/API/SVGStylable className
property on svg elements is readonly.
When generating svg elements for every class
attribute Regular tries to set node.className
which raises an exception in Firefox. Chrome just ignores it and does not set class
attributes defined in template.
Example on CodePen (http://codepen.io/mekto/pen/jtILE) which is not working because of this bug.
类似 VueJS 的
this.$watch('todos', function (todos) {
todoStorage.save(todos);
}, { deep: true });
之中的 { deep: true }
会出现触发两次点击事件
I have completed the work to creating Single Page Application use Regularjs, and have test it in production , thanks for my patient colleague :).
The routing function is supported by stateman which is a nested state-based routing library.
final router.js
looks like:
.state("app", Application, "")
.state('app.knowledge', Knowledge)
.state('app.knowledge.list', KnowledgeList, '')
.state('app.knowledge.manage', KnowledgeManage, "manage/:type/:id")
.state('app.question', Question)
.state('app.question.list', QuestionList, 'list/:type')
.state('app.question.manage', QuestionManage, "manage/:type/:method/:id")
.state('app.testmanagement', TestManagement)
.state('app.testmanagement.list', TestManagementList,'')
.state('app.testmanagement.manage', TestManage, "manage/:type/:id")
.state('app.testmanagement.rank', TestManageableRank, "rank/:id")
.state('app.testmanagement.profile', TestManagementProfile, "profile/:tid/:uid" )
.state('app.preview', TestManagementPreview, "preview/:type/:id" )
.state('app.group', Group)
.state('app.group.list', GroupList, '')
.state('app.group.manage', GroupManage, 'manage/:type/:id')
.state('app.group.members', GroupMembers, 'members/:id/:type')
.state('app.group.member', GroupMember, 'member/:id/:type')
.state('app.judge', Judge)
.state('app.judge.list', JudgeList, '')
.state('app.judge.manage', JudgeManage, 'manage/:type/:id')
.state('app.testlist', TestList)
// test level1
.state('app.test', Test )
.state('app.test.list', TestList, '')
.state('app.test.rank', TestRank, ':id/rank')
.state('app.test.view', TestView, ':id/view')
.state('app.exam', TestExam, '/test/:id')
// choice or judge.
.state('app.exam.judge', ExamSimple)
.state('app.exam.choice', ExamSimple)
.state('app.exam.blank', ExamSimple)
.state('app.exam.list', ExamList, ":type(coding|complement)")
// coding complement
.state('app.exam.complex', ExamComplex, ':type(coding|complement)/:qid' )
.state('app.exam.complex.detail', ExamComplexDetail, '') //question id
.state('app.exam.complex.submit', ExamComplexSubmit)
// need preview or &preview or sid result?sid&preview
.state('app.exam.complex.result', ExamComplexResult)
.....
The code is from the application that still in developing. router is much bigger now, but works fine.
the second param passed to state is standard Regularjs Component, the only thing you must do is to mark a view
tag in each parent state.
take app.exam
for example, its template need create a ref named view
...
<div>
<div class="m-emn" ref=view></div>
</div>
...
then the child state app.exam.judge
will automately inject its template to the ref view and so on
怎么在分页里点击某页时触发搜索按钮的搜索事件(是一个组件,有入参)?
子component应该在创建时候获取到初试数据, 因为子组件是直接创建而不是build之后,这导致子元素会在父元素之前init。所以可能会出现undefined的情况,所以应该传入初始值
var Demo = Regular.extend({name: "demo", data: {}, template: "<input r-model = 'demo.name' title={{demo.name}}>"})
var DemoApp = Regular.extend({name: "todoapp", data: {demos: [{name:1}] }, template: "{{#list demos as demo}}<demo demo={{demo}}/>{{/list}}"});
console.log(new DemoApp().$inject(document.body)); //throw error
<input disabled={true} /> // OK
<input readonly={true} /> // 会出现问题。
代码在src/util.js
396行
<input r-model="month" ref="datepicker" type="text" placeholder="Search month..." readonly="readonly">
<i class="search icon" on-click="{this.search(month)}"></i>
month 总是undifine
search: function(month) {
var component;
component = this;
if (month) {
component.data.search = {
error: false,
loading: true
};
return $http.get('/api/v1.0/orders/daily', {
month: month
}, function(rep) {
component.data.orders = rep;
component.data.search = {
loading: false
};
return component.$update();
});
} else {
return component.data.search = {
error: true
};
}
}
This project is pretty cool :)
Have you considered using es6 backtrick strings in order to get multiline instead of simple quote with backslash on every end of line?
template: `
<b>blabla
<span>blabla</span>
</span>
`
Note: If you are using jsx already you can add --harmony=true flag to enable many es6 features including backtick strings.
默认的模版引擎与后台模板引擎冲突
是requirejs的缓存
r-hide等指令中需要判断传进去值的类型,否则直接$watch会报错。
建议在指令机制中统一处理类型判断。
will provided them before 0.3.0
- 编辑器Web Storm 8
- 操作系统 Mac OS X
- 浏览器Chrome
<input type="text" class="form-control"
id="username" name="username" value="">
Uncaught Error: Parse Error: expect [>]" -> got "[UNQ]:
16> ..."form-control"
将模板内容移到一行之后就正常了,按下enter换行以后就会报错
A component should based particular html+css. using bootstrap beacuse of its Popularity
current version, regularjs only support some basic directive like r-model
. we plan to support some important directve, custom event and filter before version 0.3.0
there are the todolist:
on-tap
: tap supportfilter: format
: basic date-format?fitler: sort
: array sorterif you need something to be supported, comment this issue.
in regularjs when see <input value=1 type='radio' >
. we will
where in ie 10, step 3 will overwirite the default value 1 (reset to 'on'). so we need to sort the property
<div class="ui large icon input {searchState.loading?'loading':''} {searchState.error?'error':''}">
<input r-model="month" type="text" placeholder="Search month..." readonly="readonly">
<i class="search icon" on-click="{this.search(month)}"></i>
</div>
<app-datepicker searchState={searchDaily} search={@(this.search)}></app-datepicker>
组件里面有个onclick时间,怎么传递?
Children elements of SVG element are created without proper namespace and they are not displayed by the browser.
Looking at the code I've noticed that children elements are created before the <svg>
element itself and before this._ns_
is set.
{{#list todos as todo}}
<div class='a-{{todo_index}}'>{{todo.content}}</div>
{{/list}}
if one item is completely changed, for example
component.data.todos[0] = {content: "haha"}
will wrongly delete the $context's _handles.
项目中不可能不操作dom,而且有些使用了其他插件的,都需要在组件范围内找到特定的dom,没有api很麻烦。findComponent则用于组件交互的.
When inserting <r-content/>
tag inside component it raises "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
Looking at the source code I found that the test in browser-nested.js
testing this tag is commented out. Is this deprecated or so?
Demo如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="http://rawgit.com/sindresorhus/multiline/master/browser.js"></script>
<script src="http://rawgit.com/regularjs/regular/master/dist/regular.min.js"></script>
<script>
var ListView = Regular.extend({
name: 'listView',
config: function() {
var self = this;
setTimeout(function() {
self.$update('list1', []);
self.$update('list2', [{name: 1}]);
}, 200);
},
template: multiline(function(){/*
{#list list as item}
<div>{item.name}</div>
{/list}
*/})
});
var App = Regular.extend({
config: function() {
// this.data.children1 = undefined;
// this.data.children2 = undefined;
},
template: multiline(function(){/*
<listView list1={children1} list2={children2} />
{#if children1}Length: {children1.length}{/if}
{#if children2}Length: {children2.length}{/if}
*/})
});
(new App()).$inject('body');
</script>
</body>
</html>
Inside {{#if ..}}
and {{#list ..}}
controls svg elements are created with wrong namespaceURI. Like in example below:
<svg viewBox="0 0 100 100">
<!-- this element is displayed correctly -->
<line y1="100" y2="100" stroke="#fff"/>
{{#if true}}
<!-- this element gets xhtml namespace and is not displayed by the browser -->
<line y1="90" y2="90" stroke="#0f0"/>
{{/if}}
</svg>
setTimeout(function(){
dom.on(this.parentNode, type, delegateEvent);
}.bind(this),0)
to rescue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="wrap-comment">
<script id="t-comment" type="text/regular">
{#list items as el}
123<br>
{/list}
</script>
</div>
<script src="regular.min.js"></script>
<script type="text/javascript">
var data = [{}];
vComment = Regular.extend({
template: '#t-comment'
});
vmComment = new vComment({
data: {
items: data
, aaa: [{}]
}
});
vmComment.$inject('#wrap-comment');
setTimeout(function() {
//vmComment.data.items = [{}, {}];
vmComment.$update('items');
//vmComment.$update('aaa');
}, 100);
</script>
</body>
</html>
报错:Uncaught TypeError: Cannot read property 'length' of undefined
compeleted soon ...
see specs/bugfix.js
I'm looking for a way to access DOM elements generated by regular. I haven't found it in the documentation and the source code. But I think it is sometimes neccessery, especially when creating subcomponents using d3 or similar library.
Just by replacing
combine.node(this);
in Regular constructor with
this.$el = combine.node(this);
allows my to access DOM elements, e.g.:
this.$el.querySelector('svg.chart');
which is what I need.
I know that the regular instance has parentNode
, but my components somethimes share same parent, so the selector above could select a node from different component.
Another point is that combine.node
can return an array instead of an Element. This is what I really like in Regular, that it's components do not need to have a container. For example my component can generate two paragraphs and they can be injected after another two paragraphs and they all share the same parent. In this case this.$el
will be an array of Elements, not one single Element. I think it is fine, because you are in control of what your template looks like and know if it at the top level returns one element or an array. Of cource this property could be named like $elements
or $nodes
and always return an array, not depending on a template.
One thing I haven't found solution yet, is when and how to update the $el
property when the top level nodes change. In template
<p>One</p>
{{#if showSecond}}
<p>Two</p>
{{/if}}
the $el
property will be an element or an array depending on the value of showSecond
variable on init. If the value changes, the $el
won't be updated, which is wrong. I think it is a corner case, but it still needs a solution. Please note, that I this condition would be inside one of these paragraphs, not at the top level, the $el
wouldn't need any update at all.
当使用 html 文件作为模板时,如果包含注释:
模板代码可简化如下:
<div>
<!--注释-->
<span>{data}</span>
</div>
<select class="u-select" r-model={search.sku}>
{#list fm.skus as skuInfo}
<option>begin
{skuInfo.skuName}
</option>
{/list}
</select>
begin
萝卜哥,我fork了一份,点击上面的导航可以看出问题的,你看看错误在哪里 http://jsfiddle.net/xiongxin8802/cemekqLy/
On events there is a special temporary variable called $event
, but I am still unable to find the element which triggered the event. In traditional event handler the trigger element is binded as this
, but regular overrides it.
How about providing another variable besides $event
called $node
or $trigger
or accessed by $event.$trigger
or something like this?
$(document).ajaxError (event, xhr, options, exc) ->
switch event.status
when 401 then ???
//组件 input
on-change="{this.$emit('change', start)}"
//使用组件
on-change={this.selectMonth($event)}
波神, 最近写了一个简单的ajax组件,调用方式类似这样
<ajax url="data.json" dataType="json" onSuccess={this.handleData}></ajax>
直接将请求成功或者失败的方法作为属性, 但这样调用的外层组件的方法内的this不是指向外层组件的.
把它放到模板内:
var Demo = Regular.extend({
template: '<div class="content">{user}<ajax url="data.json" dataType="json" onSuccess={this.handleData}></ajax></div>',
data: {
user: ''
},
handleData: function(result) {
var html = 'name: ' + result.name + ', gender: ' + result.gender;
this.data.user = html; //这里的this指向了window, 报错
this.$update();
}
});
var demo = new Demo();
demo.$inject('#app')
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.