ember-tether, 在DOM中,将元素绑定到另一个元素

分享于 

4分钟阅读

GitHub

  繁體 雙語
Tether an element to another element in the DOM
  • 源代码名称:ember-tether
  • 源代码网址:http://www.github.com/yapplabs/ember-tether
  • ember-tether源代码文档
  • ember-tether源代码下载
  • Git URL:
    git://www.github.com/yapplabs/ember-tether.git
    Git Clone代码到本地:
    git clone http://www.github.com/yapplabs/ember-tether
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/yapplabs/ember-tether
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Ember Build StatusEmber Observer Score

    这个ember插件提供了一个组件,允许'共享'块在页面的其他地方指向目标。 目标可能是元素。元素选择器或者Ember视图。 重要的是,该组件保留了Ember操作处理和数据绑定的典型上下文。

    Ember tether目前在 Ember 2.4和更高版本中被测试。 对于 Ember 1.13 - 2.3,使用 0.4.1. 为了支持Ember早期版本,使用 Ember tether 0.3.1.

    实时演示

    在这里查看现场演示: http://yapplabs.github.io/ember-tether/

    安装

    ember install ember-tether

    注意:Ember <版本应该使用 ember install:addon,而不是 ember install

    示例用法

    给定以下 DOM:

    <bodyclass="ember-application">
     <divid="a-nice-person">
     Nice person
     </div>
     <divclass="ember-view">
     <!-- rest of your Ember app's DOM... --> </div>
    </body>

    和这样的模板:

    {{#ember-tethertarget='#a-nice-person'targetAttachment='top right'attachment='top left'}} A puppy{{/ember-tether}}

    那么"小狗"将被呈现在 a-nice-person div旁边。

    如果 ember-tether构件被破坏,它的远距离内容也会被破坏。 例如给出:

    {{#ifisShowing}}{{#ember-tethertarget='#a-nice-person'targetAttachment='top right'attachment='top left'}} A puppy
     {{/ember-tether}}{{/if}}

    如果 isShowing 从 true 开始并变成 false,则将从页面中删除"小狗"文本。

    类似地,如果在路由模板中使用 ember-tether,则在输入路由时将它的内容呈现在目标元素旁边。

    验收测试

    通过将固定元素附加到 <body> 标记中,Hubspot。 很不幸,在验收测试期间,这将把你的内容移到Ember应用程序 rootElement 之外。 这将中断事件调度和动作处理,包括传统的Ember测试助手( 比如 click )。

    从版本 0.4.0开始,我们可以配置一个不同的元素来代替正文。 这对于Ember测试很有用。

    // config/environment.jsENV['ember-tether'] = {
     bodyElementId:'ember-testing'};

    也可以将 bodyElement 传递给特定的ember系组件声明。

    插件开发设置

    安装

    • git clone 这里存储库
    • yarn install

    运行测试

    • ember test
    • ember test --serve

    这个插件使用Ember来测试Ember的多个版本:

    • ember try:each
    • ember try:one ember-release --- ember test --serve

    正在运行虚拟应用程序

    有关使用ember的更多信息,请访问 http://www.ember-cli.com/

    生成变更日志

    这里项目使用 https://github.com/skywinder/github-changelog-generator 生成它的日志记录。

    Credits

    • Hubspot Tether,实现实际共享行为的底层库
    • ember虫洞,它的元素内容操纵的Pattern 激发了ember系的方法
    • 在过去的世纪里,Tetherball 提供了无数的娱乐

    DOM  tether  
    相关文章