Question

我在.HBS上设置了5x5网格。我想使用ember.js OCTANE保持游戏状态。我该怎么做，最好的方法是什么？请分享想法。我需要创建模型吗？我是Octane的新手，请帮助。到目前为止，我刚刚创建了一个网格组件，并且正在尝试对数组使用微光跟踪。

HBS：

import "chart.js/dist/Chart.min.js"

Answer 1

在原始数据经过硬编码并且不需要从服务器获取或保存到服务器的情况下，我认为在组件上保持状态是最简单的。

我建议查看“ Octane教程”以更深入地学习这些模式。您可以here对其进行访问。

将阵列状态存储在Octane组件中：

首先，我们将数组数据放入一个跟踪的属性中，并编写一个可以修改该数据的操作：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked items = [
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
  ];

  @action
  editItem(item) {
    this.items[0][0] = item // make some changes

    // The line below is important when working with tracked arrays and objects. Always "reset" the array whenever you make changes. This tells Ember to update what is rendered.
    this.items = this.items;
  }
}

我们使用each帮助器迭代该2D数组。我们将这些项目称为this.items，因为它们是在“此组件”上定义的

    <table class="quantize" style="width: 80%">
        {{#each this.items as |row|}}
        <tr class="">
            {{#each row as |cell|}} 
                    <td
                     class="border border-dark"
                     style="width:10%">
                        {{cell}}                        
                    </td>           
            {{/each}}
        </tr>
        {{/each}}
    </table>

路线模型中的保持状态

如果要将数组数据放入路线的模型挂钩中，也可以这样做。但是，从API提取数据时，通常使用模型。优点是Ember可以为您处理一些异步获取和渲染，缺点是它更复杂。辛烷值组件仅允许对其“拥有”的数据进行更改。如果需要更改从父组件或路由传入的数据，则必须通过调用也传入的函数来完成。这称为“单向绑定”。

首先，我们从路线的模型挂钩返回数据：

// routes/my-route.js
import Route from '@ember/routing/route';

export default class MyRoute extends Route {
  model() {
   return [
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
   ];
   // or return a fetch() request for that data
  }
}

// controllers/my-route.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class MyRouteController extends Controller {
  @action
  editItems(items) {
    this.model = items;
  }
}

我们将模型数据和editItems动作传递给显示表格的组件：

<!-- templates/my-route.hbs -->
<MyComponent @items={{this.model}} @editItems={{action "editItems"}} />

在组件中，我们将项目称为@items，而不是this.items。当数据来自外部时（例如父路径或组件），将使用@。

<!-- my-component.hbs -->
    <table class="quantize" style="width: 80%">
        {{#each @items as |row|}}
        <tr class="">
            {{#each row as |cell|}} 
                    <td
                     class="border border-dark"
                     style="width:10%">
                        {{cell}}                        
                    </td>           
            {{/each}}
        </tr>
        {{/each}}
    </table>

然后，当您要更改数组时，必须调用传入的editItems函数。它可以作为this.args.editItems使用。 this.args是从父级传递到组件的任何内容。

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponent extends Component {

  @action
  buttonWasClicked(item) {
    this.args.editItems(item)
  }
}

或者，您可以直接在模板中使用传递的操作，然后将要更改的项目交给它。

<!-- my-component.hbs -->

<button {{on "click" (fn @editItems item)}}>edit item</button>

如何将CSS网格表连接到数组？

1 个答案:

将阵列状态存储在Octane组件中：

路线模型中的保持状态