从 jQuery 对象创建 Ember 视图 [英] Create Ember View from a jQuery object

查看：20 发布时间：2021/12/26 16:01:29 ember.js

本文介绍了从 jQuery 对象创建 Ember 视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在考虑将 Ember 与现有的 Rails 应用程序集成，以利用 Ember 的绑定、事件(didInsertElement 等)......

现在我不想将我的 erb 视图转移到车把，而是我想创建 Ember View 对象并将它们附加到 DOM 中已有的各种元素.例如，我可能有

<身体><div class="header">

<div class="内容">

<div class="footer">

并且(在 DOM 就绪时)为每个元素创建一个视图:

App.HeaderView = Ember.View.create({//捕获 $('.header') 到 this//console.log(this.$().attr('class')) 应该输出`header`});

解决方案

好的，但我还没有完全测试它.

受@pangratz 的拉取请求的启发，我扩展了Ember.View 用下面的方法为

Ember.View = Ember.Object.extend(/** @scope Ember.View.prototype */{//......包装:功能(目标){this._insertElementLater(function() {//设置目标的所有属性名称/值var target_attrs = {};var $this = this.$();for (var attr, i=0, attrs=$(target)[0].attributes, l=attrs.length; i

基本上它复制目标元素的 html 内容及其属性.然后只要做

App.HeaderView = Ember.View.create().wrap('.header');

.header 元素(已经在 DOM 中)现在在 App.HeaderView 中.

见http://jsfiddle.net/KFcgA/4/

I'm looking into integrating Ember with an existing Rails application, to take advantage of Ember's bindings, events (didInsertElement, etc.) ...



Now I don't want to transfer my erb views to handlebars, but instead I want to create Ember View objects and attach them to various elements already in the DOM. For example, I might have
<html>
  <body>
    <div class="header">

    </div>

    <div class="content">

    </div>

    <div class="footer">

    </div>
  </body>
</html>
and (on DOM ready) create a View for each element:
App.HeaderView = Ember.View.create({
   // capture $('.header') to this
   // console.log(this.$().attr('class')) should then output `header`
});

 解决方案 
Ok the following works but I haven't fully tested it.

Inspired by @pangratz's pull request I extend Ember.View with the following method for 
Ember.View = Ember.Object.extend(
  /** @scope Ember.View.prototype */ {
  // ........

  wrap: function(target) {
    this._insertElementLater(function() { 
       // Set all attributes name/values from target
       var target_attrs = {};
       var $this = this.$();

       for (var attr, i=0, attrs=$(target)[0].attributes, l=attrs.length; i<l; i++){
          attr = attrs.item(i)
          var attrName = attr.nodeName;
          var attrValue = attr.nodeValue;

          if(attrName === 'id') continue;
          $this.attr(attrName, attrValue);
       }

       // Set HTML from target
       $this.html($(target).html()); 
       Ember.$(target).replaceWith($this); 

    });   
    return this;

  },        

  // ........

});
Basically it copies the html content of the target element as well as its attributes. Then by just doing 
App.HeaderView = Ember.View.create().wrap('.header');
the .header element (that is already in the DOM) is now in App.HeaderView. 

See http://jsfiddle.net/KFcgA/4/

                        这篇关于从 jQuery 对象创建 Ember 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

从 jQuery 对象创建 Ember 视图 [英] Create Ember View from a jQuery object

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

从 jQuery 对象创建 Ember 视图 [英] Create Ember View from a jQuery object

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭