Comments (12)
There maybe a unmerged feature branch... or I just forgot to implement it, it is just all my fault.
The previous way to use r-content
have some hidden danger, for example.
in nested component
{#list list as item}
<r-content>
{/list}
only the last iteration will output the transclued-content, beacuse in previous version. transclude-content are some pre-compiled elements whose context is point to outer component.
in version 0.3.0
. transclude-content is a AST. (also store it as component.$body
in nested component).
The biggest changelog about transclude in new 0.3.0
is transclude-content can be used with include. but the content's content is pointing to nested component.
http://regularjs.github.io/reference/?syntax-en#template-syntax-include-transclude-with-include
But <r-content>
will be also retained which helping to adjust the context to outer component.
I will
Feel free to leave your suggestions before fix it in 0.3.1
.
from regular.
Thank you for explaining this.
Last days I have played with React.js and I tried to build a quite complex views. What I really like about React is that it allows to create reuseble components quite easily. It doesn't just render nested components as they were given, but allows to filter them, mutate their's props or just replace them with diffrent components. So instead working with div
s you can create views using components, like this:
<Row>
<Column span=4>
<Panel heading="Stats">
<PieChart dataset={order.dataset}/>
</Panel>
</Column>
<Column span=8>
<Dropdown on-select={this.updateStatus($event)}>
<Button>Current status: {order.status}</Button>
<Menu>
<MenuItem value="pending">Pending</MenuItem>
<MenuItem value="completed">Completed</MenuItem>
</Menu>
</Dropdown>
<Tabs refs="tabs">
<TabPane title="Summary" selected>
Summary of order {order.id}
<Button on-click={this.$refs.tabs.openTab(this.$refs.paymentsTab)}>
Go to Payments Tab
</Button>
</TabPane>
<TabPane title="Payments ({order.payments.length})" refs="paymentsTab">
Payments
</TabPane>
</Tabs>
</Column>
</Row>
I many cases it is just easier to use simple div
with classes, but in different cases it would be better to wrap it as component. Contents of all components mentioned above should point to context of outer components. I should be able to define data.order
only in the top level component and the nested ones should just use it. In the given example <r-content>
is more useful then {#include this.$body}
. In fact, I'm not sure in which cases could I use {#include this.$body}
.
Maybe we could have command similar to include
, but with context pointing to outer component, e.g:
<Panel heading="Emails <small>({user.emails.length})</small>">
{#list user.emails as email}...{/list}
</Panel>
and the component template would be:
<div class="panel">
{#if heading}
<header>{#outer_include heading}</header>
{/if}
<div class="panel-body">
{#outer_include this.$body}
</div>
</div>
I don't know Regular internals and don't know if it is possible with current implementation, but something like this would be great :)
Where Regular.js shines is that it allows to create beatiful api of components.
In React you would write this.handleClick
or this.handleChange.bind(this, index)
which is a nightmare.
In Regular you write what you really want. Same examples of components and their's methods I can think of:
this.$refs.tabs.selectTab(1);
this.$refs.dropdown.toggle();
this.$refs.modal.open();
this.$refs.carousel.next();
this.$refs.popover.open($event.origin); // used event origin to center popover
// above element which triggered the event
As a proof of concept I've created simple Tabs component. In Regular it is even easier to write it than in jQuery and it is much more controlable. It uses {#include this.$body}
so it doesn't have access to outer scope, unfortunately.
Tabs: http://plnkr.co/edit/scejXd?p=preview
from regular.
Thank you very much for such a detailed suggestion.
React is a creative invention, its meanings is just like angularjs's dirty-check. But I always think it isn't the best way to construct real complex application.
In fact, the first exprimental version of regularjs follow the react way but replace the jsx with self-define DSL(like rgl template). The biggest issue is not the diff Algorithm but keeping virtual-dom synchronously with real dom element. so you can find so many react-id
things in the element.
But
Make every render like 'Full-refresh' is also very very attractive feature
Although it is very costly,if you compare similar framework's size(minified), you will find:
- react (without jsx): > 200kb
- regularjs: >= 50kb
- ractive: > 200kb
I will do my best to keep regularjs's size small than 50kb to make it more like a 'Library' but not a 'Framework'.
React's powerful which you mentioned above is beacuse: every compoment (like <Column>
) is just a Function call, you can do some logic in this function . But in regularjs, nested component is a full-functional Component created by Component.extend. I will take it into regularjs's todolist to make regularjs more useful with transclude-content in future version
Things like <r-content>
will be back , i have resolved the problem I mentioned in first comment
{#list list as item}
<r-content>
{/list}
from regular.
How awesome the example is !, I have take through the Tab demo on the plnkr. I think I have catch something that you want to say. maybe regularjs should used in that way.
from regular.
I created a temporary branch called issue26
to handle the transclude content. In your first examle, you use $parent
to reference the parent component. but it only works when you use {#include $body}, and once you switch to <r-content>
. you will find the $parent changed to the app component. beacuse $parent is only used to point the outer component (who compile the target nested component ) but not used to pointing the directly parent.... So, problem now switched to:
how to get the reference of the TabPane created in Tabs?
I fork the demo here: http://plnkr.co/edit/yzmkZhHZGiCwV3yBwcwb?p=preview
Every things works, but it isn't perfect way to implement this case. I just use the Component Lifecycle to handle the reference beacuse I'm very familiar with the internal mechanism in this Demo.
App config -> App compile
-> Tabs config -> Tabs compile (which will intialize the TabPane)
-> TabPane config -> TabPane compile -> TabPane init
-> Tabs init
App init;
You know the $parent
, I guess you may read some source code of Regularjs. In fact, the Internal Mechanism in regularjs is very Consistent, but after some hotfix and feature introducing, the code becomes a little difficult to understand.
some works also need to implement to make the transclude content become more easily to use
from regular.
Thanks a lot for your help and your work, especially for the working demo. It works as expected :) Tabs component is often quite difficult to implement in most libraries, but I think it is very practical example and helps to understand internals of a library and what is possible in it.
Ok, I will play with it more and try to dig into Regular's source code. Maybe we will be able to come up with some new ideas how to create composible components in Regular. Thanks again.
from regular.
OK, I have sent a invitation to you . But there is still a lot of things need to do to make regularjs more friendly to other participants. Maybe the most difficult part is the parser that I will refactoring them soon.
I will complete the code annotation first, so other people can get involved easily.
from regular.
An updated Demo here: http://plnkr.co/edit/yzmkZhHZGiCwV3yBwcwb?p=preview.
I add property called $outer which reference to the visual outer component (no scope related, it is very different with $parent ).
This version is very close to your first example now.
from regular.
This is a great demo! And the possibility to add new tab panes dynamically is really awesome, I haven't even considered it before. Good job! 👍
from regular.
add $outer property. to find the visual parent component which is important when using component as transcluded content
see release https://github.com/regularjs/regular/releases/tag/0.3.1
from regular.
feature about transclude content in regularjs.
<r-content>
will be removed in future, beacuse {#include}
is enough to handle them.
** new design with #include ( shartcut #inc is available now) **
- all transclude content can be got with
this.$body
, like<p>hello</p>
in<modal><p>hello</p></modal>
. - #inc now accept group (returned by this.$compile. ), component (via new Component) and String
- this.$body is A Group
- All Group and Component have their own context ( which is point to where they are defined), the result just as same as
<r-content>
before. - you can also pass a group through modifier (current only support compile modifier) , like:
<modal title.cmpl = '<h2>{title}</h2>'></modal>
, the title passed in modal will become a Group but not a String.
It is a online Demo for creating Modal Component, which use the compile modifier and this.$body.
[http://rawgit.com/regularjs/regular/group/example/feature-collection/include-advanced.html]
The coding style is very like React now.
I need some suggestion with this design , if you have time.
from regular.
you can also define modal.title
or modal.body
to handle the $bodies
<modal show={show} autohide={true} >
<modal.title>Custom Title <span class="badge" >{num}</span> </modal.title>
<modal.foot>Custom Title <span class="badge" >{num}</span> <button class='btn btn-primary' on-click={show=false}>CLose it!</button> </modal.foot>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>
</modal>
from regular.
Related Issues (20)
- Parser.js含中文空格字符引发的问题
- 增加 instance.$destroy 方法 HOT 5
- Regular 能不能实现angular中的async类似的功能 HOT 13
- 父组件的data数据改变了,但是传给子组件的数据没有变化,这个如何排查呢?没有思路啊 HOT 2
- Regular中如何实现高阶组件 HOT 1
- There may a circular dependencies reaches HOT 2
- add {#await promise} HOT 3
- 部分事件无法识别
- 双击事件中是否会触发单击事件 HOT 2
- 当watch中设置另一个值为undefined, 父子数组不同步, 双向绑定出bug HOT 1
- list HOT 1
- list by unique id时删除一个数组成员后没有触发对应组件的destroy生命周期
- 报一个bug: dom.off 出错 HOT 2
- 列表渲染 -方法中下标值获取 语法? HOT 1
- 建议regular添加prop types检查 HOT 4
- 优化点整理 HOT 18
- 数组simplediff为false,但数据引用变化时,会产生父子组件数据不一致 HOT 1
- regular有每个版本的changelog记录么?
- 如何将组件从当前document中移除,但是不销毁? HOT 3
- 请问使用 #include this.$body 能否给组件children传递数据
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from regular.