ember.js 在呈现ember模板后执行操作(javascript函数)

8xiog9wr 于 2022-11-05 发布在 Java

关注(0)|答案(2)|浏览(151)

我有一个非常小的网页与emberjs，在那里我想显示一些项目列表和openlayersMap为他们，和另一个Map为选定的项目。

<script type="text/x-handlebars" id="list">
<div class="list">
    <div id="list_map"></div>
</div>
{{outlet}}
</script>

<script type="text/x-handlebars" id="list/item" >
<div class="item">
    <div id="item_map"></div>
</div>
</script>
<script>
function showListMap() {
    listMap = new ol.Map({target:'list_map'});
}
function showItemMap() {
    itemMap = new ol.Map({target:'item_map'});
}
</script>

显示Map列表没有问题：

model: function(params) {
        var content = [];
        var url = 'http://localhost:8080/app/list'; 
        $.ajax({
          url: url,
          success: function(surveys) {            
            content.pushObjects(surveys);
            showListMap();
          }
        });
        return content;
}

并且在打开所选项时，我在项目控制器中执行了操作，但是如果我尝试在那里创建项目Map（在控制器动作时）它失效（afaik，因为DOM中没有这样的div）。所以如果我可以在div已经添加到DOM后执行action或函数，它应该可以工作。问题是，在模板添加到DOM后如何执行一些东西，或者这是完全错误的方式来做这样的事情（比什么会是正确的ember方式）？

ember.js

来源：https://stackoverflow.com/questions/30219627/execute-action-javascript-function-after-ember-template-is-rendered

2条答案

按热度按时间

ipakzgxi1#

看到完整的代码我不能说太多，但是要在呈现DOM之后执行一些代码，需要在运行循环afterRender队列上调度一个函数。

Ember.run.scheduleOnce('afterRender', this, function() {
  //The div should be available now.
});

但是如果你真的需要接触DOM，我建议你把Map代码 Package 在一个组件中，一个组件得到一个didInsertElement，你可以在那里写Map初始化代码。

var component = Em.Component.extend({
  setup: function() {
    //Do you map init here.
  }.on('didInsertElement')
});

赞(0）回复(0）举报 2022-11-05

lymgl2op2#

不幸的是，在页面已经呈现之后，并没有一个真正好的路由或控制器挂钩。我相信这是因为Ember的开发人员认为直接与DOM对话是一种反模式。
话虽如此，我认为它有时对于静态网页上的复杂UI非常方便。如果您想在呈现路由后执行某种jquery或使用DOM API，您可以在路由文件中执行以下操作（正如@Dainius正确指出的那样）
routeName.js

import Route from '@ember/routing/route'; 
import jQuery from 'jquery';

export default class myRouteFile extends Route {

  manipulateDom = function() {
     $("#myDiv").css( "color", "red" );
  }

  init() {
    this._super(...arguments)
    Ember.run.scheduleOnce('afterRender', this, this.manipulateDom)
  }
}

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 在呈现ember模板后执行操作(javascript函数)

2条答案

相关问题

热门标签

最新问答