标签: ember-octane

我正在使用 Ember Octane 版本，我想Route从子组件中调用一个操作。伪代码如下。

**Route**
export default class SomeRouter extends Route {    
    model() {
        return data;        
    }
    @action
    refreshRoute() {
        this.refresh();
    }
}

**SomerRouter.hbs** 

<ChildComponent> //Using child component here

**ChildComponent**
export default class ChildComponent extends Component { 
    @action
    revert() {
       //How do I invoke the "refreshRoute" on the SomeRouter from here?
    }
}

在上述子组件的 revert 方法中，“this”指的是组件本身，但在 ember 的早期版本中，“this”指的是路由器，我可以在其中简单地调用 this.refresh()。那么我如何在 Ember Octane 中实现这一目标呢？非常感谢任何帮助。

我试图将所有余烬组件转换为辛烷版本。但我有一个更大的疑问。如何将observer代码转换为 OCTANE 版本？例如，

parent.hbs
 
 <Child @value={{this.value}} />

child.hbs

 <div>{{this.newUpdate}}</div>

child.js

  export default class ChildComponent extends Component {     
      /** Previous code: sample code only
        valueUpdate: observer('value', function() {
            this.newValue = this.value / 12 * 2;
        })
      */
  }

如何将观察者更新为辛烷值方式？有什么想法请...

注意：我尝试使用“@observer”，但它在组件内部不起作用。

我尝试将摩纳哥代码编辑器集成到我的 ember 辛烷应用程序中。目前我正在使用 ESM 导入样式并确认手册，我安装了 webpack 加载器插件并将其集成到我的 ember-cli-build.js 中

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        plugins: [
          new MonacoWebpackPlugin()
        ]
      }
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be …

所以我的情况如下：我得到了一个包含几个输入字段的组件，这些输入字段代表一个联系人并填充了来自服务的数据：

  @service('contact-data') contact;

每个字段代表一个通过访问的属性

{{contact.properties.foo}}

我将属性保存为 JS 对象，以便在使用它们时轻松过滤掉空字段，并使用@tracked如下方式跟踪它：

{{contact.properties.foo}}

但是，属性不会在组件中正确重新呈现，并且文本字段不会更新。

我将不胜感激！谢谢！

因此，在 Ember Octane 中，有两种方法可以将函数附加到hbs文件中的事件。

EmberJS 方式： {{on 'click' this.function}}

经典的 HTML 方式： onclick={{this.function}}

在这里他们建议使用先前的语法

但是，除非我们有正当理由，否则我看不出使用该语法的理由。

我会使用前者而不是后者的原因是什么？

我想编写一个Octane / Glimmer样式的组件，其中传递动作是可选的。编写此内容的最佳方法是什么？

例如，我希望组件的这两种用法都有效：

<MyComponent />
<MyComponent @validate={{action this.validate}} />

现在，我的组件类有很多看起来像这样的代码，在调用之前检查是否传递了动作：

<MyComponent />
<MyComponent @validate={{action this.validate}} />

这对于一个动作来说效果很好，但是如果我需要连续调用几个可选方法，那就不行了。还有什么其他选择？

我正在Ember v3.13中编写一些Octane风格的组件，以及{{did-insert}} ember-render-modifier。但是，当绑定到的函数did-insert被调用时，我得到了TypeError: this is undefined。我究竟做错了什么？

这是我的组件模板：

<div class="cardhost-monaco-container" {{did-insert this.renderEditor}}></div>

这是组件的JavaScript类：

import Component from '@glimmer/component';


export default class CodeEditor extends Component {
  renderEditor(el) {
    console.log(this.args.code)
  }
}

我想使用Ember.js Octane在类显示打开和关闭之间切换。我该怎么做呢？我需要@action还是@tracked？

<img src="flower.jpg" alt="flower" class="display-on">  
or
<img src="flower.jpg" alt="flower" class="display-off">