Question

我正在研究Ember应用程序，但我遇到了问题。我必须在应用程序的某个点过滤掉结果，例如，在控制器或视图中，如下所示：

在view.hbs我正在{{#if test.passed}}...取消通过的测试：

{{#each tests as |test|}}<br>
    {{#if test.passed}}
        {{test.name}}
    {{/if}}
{{/each}}

我可以在最初加载的控制器上执行此操作，并可以在输入字段中过滤掉：

import Controller from '@ember/controller';
export default Controller.extend({
    actions: {
        filterByTest: function (param) {
            if (param !== '') {
                return this.get('store').query('test', { name: param }).then((filteredTests) => {
                    return { query: param, tests: filteredTests.filterBy('passed', true) };
                });
            } else {
                return this.get('store').findAll('test').then((tests) => {
                    return { query: param, tests: tests.filterBy('passed', true) };
                });
            }
        }
    }
});

现在我需要在route级别过滤掉。 model() route中的view.hbs无法修改，如果可以的话，那么它必须是一条我不想要的路径。我怎样才能做到这一点？如何使模型可编辑？目前我可以进入路线模型，但无法进行编辑。这是我从{{#each model as |test|}}<br> {{test.name}} {{/each}}文件中与模型对话的方式，它可以正常工作。

view.hbs

请参阅下面将文件返回到import Route from '@ember/routing/route'; export default Route.extend({ model() { return this.get('store').findAll('test').then(tests => { return tests('passed', true); }) } });模板上方的模型。它再次起作用：

return

如何将参数传递给模型并进行编辑，以便我的UI也会被更改？

这是我需要修改的模型。目前// end index is exclusive int sum = Arrays.stream(array, 0, 4).sum();有效，但无法修改。

Answer 1

如果我理解与@Jeff一样，您希望根据用户通过按钮或某些方式选择的选项来查询后端。在这方面最好考虑国家。控制器将具有表示您要表示的过滤器视图的状态，并且您的model()挂钩将使用该状态来了解如何查询要显示的特定模型集。

这是一个工作的旋风，演示了如何实现这一点（后端使用的是ember-cli-mirage）：https://ember-twiddle.com/150708278ceafc6f9f99961122a14f07

重点是我的路由定义了一个queryParams对象（与@ Jeff的答案相同），它指示路由每次控制器上的category属性发生变化时刷新其模型。

queryParams: {
  category: { refreshModel: true }
},

在model()挂钩中，我使用params.category值来构造正确的查询负载。

model(params) {
  if (params.category === 'all') {
    return this.store.findAll('test');
  }
  let passed = params.category === 'passed';
  return this.store.query('test', { 'filter[passed]': passed });
}

最后，我确保我的控制器知道category是从URL驱动的：

queryParams: ['category'],
// A default is required to train ember on how to serialize
// the value in the URL
category: 'all',

您现在可以更改category值，整个路线会自动为您刷新，或者您可以使用link-to帮助

<button {{action (mut category) "passed"}}>Show passed</button>
{{#link-to "index" (query-params category="passed")}}Show passed{{/link-to}}

Answer 2

您好@AmazingDayToday我将对我们如何看待您的问题以及如何根据可用信息解决问题进行更长时间的解释。似乎@Jeff已经回答了你，但希望这将有助于你了解如何思考这些问题。

我们的第一个假设是您希望将过滤器参数作为操作的一部分传递。在测试时，我们创建了一系列按钮，将name属性传递给操作，如下所示

<button {{action 'filterByTestName' 'face'}}>Face</button>
<button {{action 'filterByTestName' 'first test'}}>First Test</button>
<button {{action 'filterByTestName' ''}}>Clear</button>

最后一个按钮旨在使用相同的操作来清除过滤器。在这些情况下，我通常倾向于创建一个单独的clear操作，但它现在可以使用

我实现这些过滤器的主要方法之一是在控制器上为相关路径提供filteredModel计算属性。此计算属性的要点是基于控制器上的“filterValue”进行过滤，该过滤器可以由filterByTestName操作设置。让我们从那里开始：

actions: {
  filterByTestName: function(name) {
    this.set('filterValue', name);
  }
}

此操作的设计是为了使{I}设置为filterValue时，我们会根据该值过滤模型。让我们继续讨论将为我们做过滤的计算属性：

filteredModel: Ember.computed('filterValue', 'model.@each.name', function() {
  if(Ember.isEmpty(this.get('filterValue'))) {
    return this.model;
  }

  return this.model.filter((test) => test.get('name') === this.get('filterValue'));
}),

您将注意到该计算属性的第一件事是我们有两个依赖键，即此计算属性将在filterValue或任何name值时更新在任何模型上改变。

此实现中的第二个注意事项是当filterValue为空时我们希望通过无需修改传递当前模型的“基本情况”。

此实现的最后一部分是我们希望根据filterValue的当前值在当前模型上实际预先形成过滤器。

您可以看到整个示例正在处理此Ember Twiddle，您可以看到我们在this YouTube video上实时解决此问题

我希望这会有所帮助

Answer 3

这是一个猜测，因为我不能100％确定你想要实现的目标。

我不知道param来自何处，但我假设查询参数类似于yourroute?name=TestName。有了这个，您可以像这样访问该参数：

export default Route.extend({
  // if you leave that out, it'll work for the first entry, but the model will not update if you transitionToRoute with only the queryParams changed)
  queryParams: {
    category: {
      refreshModel: true
    }
  },

  model(params) {
    // params has format of { name: "TestName" }
    return this.get('store').query('test', params);

    // you can of course put more complex logic in here, as you had it in controller
    // f.e.: 
    // return this.get('store').query('test', {name: params.name, passed: true});
    // or check first if you have a param at all...
  }
}

here's the docs。

注意：
您无法在控制器上设置参数来更改模型。我已经尝试过......依赖要更改它，您必须在模板中执行{{link-to "routeName" (query-params name="newName")}}或在控制器docs for transitionToRoute()中执行transitionToRoute({ queryParams: { name: 'anotherName' } });。

Sidenote ：无论如何，filterByTest作为动作都很奇怪。这应该是一个计算属性。

Ember：修改路线

3 个答案: