从路由文件中设置模板文件中的变量答案

【问题标题】：set variable in template file from routes file从路由文件中设置模板文件中的变量
【发布时间】：2016-06-01 06:11:46
【问题描述】：

我的 index.hbs 文件中有这段代码：

<button {{action 'showHotspots'}} class="btn btn-success padding">{{hotspotCategory.name}}</button>

我的 routes/index.js 文件中有 showHotspots 方法：

showHotspots: function( selection ) {
  this.toggleProperty( 'idFromButton' );
}

该方法应该在我的 routes/index.js 中切换这部分：

{{#if idFromButton}}
  <p>Test1</p>
{{/if}}

但是这不起作用，当我将它作为一个组件执行时，它可以工作，但我需要在我页面上的特定位置（在所有生成的按钮下方）上的 Test1。当我在组件中执行此操作时，Test1 会显示在按钮之间。

我不想使用组件，而是想在我的 index.js 文件中执行此操作，以便控制页面的结构。

简而言之：在我的 index.hbs 上，我有一个 if 语句来检查变量是否为真。我想使用在同一 index.hbs 文件或 component-1.hbs 文件中调用的方法从我的 routes/index.js 文件（或从其他地方，并不重要）设置此变量。

【问题讨论】：

Handlebar 模板扩展为.hbs
你不能将属性从路由绑定到模板。这个动作必须在控制器或组件上......或者如果动作必须在路由上......它应该通过this.toggleProperty('controller.idFromButton') 切换 controller 属性
grapho 你有一个工作的例子吗？我认为不鼓励使用控制器？在 OP 中添加了更多详细信息。

标签： javascript ember.js components

【解决方案1】：

如果我理解这个问题，你使用组件，你应该在你的组件的动作上使用方法“showHotspots”，如果不是，你应该在你的控制器的动作上使用这个方法。
最好详细描述您的问题。
编辑：如果您使用旧版本的 ember js，这是一个示例

//#### controller index.js
App.IndexController = Ember.Controller.extend({
    idFromButton: false,
    actions: {
        showHotspots: function( selection ) {
            this.toggleProperty( 'idFromButton' );
        }
    }
});


//#### index.hbs  (your index controller template)
<button {{action 'showHotspots'}} class="btn btn-success padding">some text</button>
{{#if idFromButton}}
  <p>Test1</p>
{{/if}}

【讨论】：

我想要 index.js 文件中的所有内容，但是 toggleProperty 在我的 routes/index.js 文件中不起作用。
好吧，您无法在模板中访问您的路由操作，您使用的是哪个版本的 emberjs？我在上一个答案中添加了一个示例
我正在使用最新版本的 EmberJS。 IE。 2.3.0

【解决方案2】：

（简单的）解决方案是：

this.controller.toggleProperty( 'idFromButton' );

【讨论】：