【问题标题】:Ember.js - I want an Action event (on="") to trigger when there is a transition to a new RouteEmber.js - 我希望在转换到新路由时触发一个动作事件(on="")
【发布时间】:2014-05-15 15:48:25
【问题描述】:

我希望在转换到新路由时触发一个 Action 事件 (on="")。

我已经看到了 Action 事件处理程序列表,我能找到的最接近的是将操作附加到页面上最大的 HTML 元素并使用“Mousemove”触发它。这是一个非常有缺陷的方法去做。

所以只是把它画出来。

<div {{action 'displayEitherHtml1or2'}} class="largestDOMelement">
  {{#if showHtml1}}
   // html 1 inside
  {{/if}}
  {{#if showHtml2}}
  // html 2 inside
  {{/if}}
</div>

'/objects' 是一个对象列表,单击一个会导致 'object/somenumber'。当我进入“object/somenumber”页面时,该操作应该会自动触发。

更新:我已经从上一次更新中获取了内容并将它们转储到我的 DocRoute 中,但是当我通过 {{#link-to 'doc' this.docID}} { {docTitle}}{{/link-to}}

VpcYeoman.DocRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
    toggleLetterSwitch: false,
    togglePermitSwitch: false,
    activate: function () {  
      var docTemplateID = this.get('docTemplateID');
      if ( docTemplateID == 2) {
        this.set('toggleLetterSwitch', true);
        this.set('togglePermitSwitch', false);
        console.log('docTemplateID equals 2');
      } else {
        this.set('toggleLetterSwitch', false);
        this.set('togglePermitSwitch', true);
      }        
    }
});

更新 DOS:在 DocsController 中将 setDocID 设置为 1。这就是全部内容。

VpcYeoman.DocsController = Ember.ArrayController.extend({ 
  tempDocId: 1, 
  actions: {
    addDoc: function (params) {
      var docTitle = this.get('docTitle');
      var docTemplateID = 1;
      var docTemplateID = this.get('tempDocId');
      console.log(this.get('tempDocId'));
      var store = this.store;
      var current_object = this;
      var doc = current_object.store.createRecord('doc', {
        docTitle:docTitle,
        docTemplateID:docTemplateID
      });
      doc.save();
      return true;
    },
    setDocId: function (param) {
      this.set('tempDocId', param);
      console.log(this.get('tempDocId'))
    },
  }
});

【问题讨论】:

  • 如果你在这里查看github.com/emberjs/ember.js/blob/master/packages_es6/… 有一个“激活”钩子,你可以在你的路由中覆盖它,当一个路由被激活时它会被触发。您可以在“beforeModel”、“afterModel”等路线中使用许多钩子。在该文件中,您可以找到所有这些钩子。希望对您有所帮助。
  • 这很有帮助,pjmorse 关于“主动钩子”的建议也很有帮助。

标签: javascript events ember.js action


【解决方案1】:

正如@fanta 评论的那样,您似乎正在您的路线中寻找the activate hook。当您输入定义它的路线时,它会被调用。如果您想在每次转换时调用它,您可以考虑为您的应用程序定义一个基本路由并扩展它而不是 Em.Route:

App.BaseRoute = Em.Route.extend(
    activate: function () {
        // Do your thing
    }
);
App.YourRoutes = App.BaseRoute.extend()

可能有更合适的地点/时间来执行此操作,但在不完全了解您的操作的情况下,这可能是最好的猜测。

ETA:查看您的编辑,您不会希望所有路由都像我上面那样扩展 App.BaseRoute;您可能应该在需要它的路由中明确包含 activate 钩子。

【讨论】:

  • 我已经用我想要使用的动作的确切内容更新了我的 OP。我是否应该只放置动作“displayEitherHtml1or2”的内容,然后删除 DocController 的“displayEitherHtml1or2”。我有一个正常的 DocRoute 和 DocsRoute。我只会使用一次,所以可能不需要 BaseRoute
  • 是的,没错 - 您将删除操作并将其主体放入 activate 钩子中,我将 // Do your thing 评论放在其中。如果您有某种理由将其保留为一项操作(我不明白为什么,但这是可能的),您会从路线中调出控制器并执行controller.send('displayEitherHtml1or2') 但这已经足够扭曲了,我不会这样做如果我不需要的话。
  • 是的,DocRoute 不是 DocsRoute;当您进入路线时,它将运行。是的,把属性也放在那里,除非你一开始希望它们是未定义的。
  • 这是一个不同的问题,然后:docTemplateId 是否在调用 activate 挂钩时设置为任何值?如果不是,为什么不呢? (可能是因为在设置 docTemplateId 之前调用了 activate,在这种情况下,您可以选择在其他地方查找该值或使用不同的挂钩。)
  • 不,这是一个不同的问题。您最初的问题是如何触发转换到新路线的操作。我们已经回答过了。您的新问题是为什么您的 HTML 在值更改时不会切换。
猜你喜欢
  • 1970-01-01
  • 2015-09-17
  • 1970-01-01
  • 2012-03-25
  • 2016-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多