Question

我正在构建一个多步骤表单，每页询问一个问题。

每个问题可以是不同的类型，有时相同的问题类型会一个接一个地出现。

我也在使用选择性来增强我的多项选择。

我遇到的问题是，当两个多项选择相继出现时，Aurelia不会重新初始化选择，所以之前选择的项目仍然会出现在新问题中。

不仅如此，在问题之间前后移动最终会产生难以理解的错误。

我已经通过在这条路线上设置activationStrategy: replace来解决这个问题了，虽然这样可行，但感觉必须有更好的方法来解决它？

我发现这种“简单”设置完全改变了我的自定义元素的运行方式，这有点奇怪。有了它，就像每次都从头开始，但没有它，在我的VM中唯一被调用的是questionChanged()方法（我添加它作为检测可绑定question对象何时更改的方法）

令人讨厌的是，当questionChanged()被调用时，新问题实际上并未附加到DOM，因此尝试重新启动选择失败（因为<select>元素不在DOM尚未。）

即使它重新呈现整个屏幕并且可能性能更差（或？）还是有更好的方法来解决这个问题，我是否愿意使用activationStrategy: replace？

我已尝试在determineActivationStrategy() {return 'replace'}内使用QuestionCustomElement，但这似乎根本不起作用。 activationStrategy仅对整个路线有效吗？否则，我最好只更换页面的那一部分，同时保留其他所有内容。

这是我在切换路线时无法重新渲染的自定义元素（除非使用activationStrategy: replace）（注意，大部分内容取自：https://gist.github.com/monkeyhouse/fc5bd63ec852bad6b5e3）：

import {inject, bindable, bindingMode} from 'aurelia-framework';
import jquery from 'jquery';
import 'selectize';

@inject(Element)
export class Selectize {
    @bindable name = null;
    @bindable placeholder = 'Select';

    @bindable({defaultBindingMode: bindingMode.twoWay}) selected = [];
    @bindable({defaultBindingMode: bindingMode.twoWay}) options = [];

    constructor (el) {
        this.el = el;
    }

    attached () {
        console.log('selectize attached'); // this is called the first time this element renders, but not again _if_ this component is on the next page/route too

        var el = jquery(this.el).find('select');

        this.selectize = el.selectize({
            plugins: ['remove_button'],
            onChange: function() {
                el[0].dispatchEvent(new Event('change', null));
            }
        });

        this.selectize[0].selectize.setValue(this.selected);
    }

    detached() {
        console.log('selectize detached'); // this is called if the next route does _not_ contain a selectize-element, but not if several routes in a row contain a selectize-element

        this.selectize[0].selectize.destroy();
    }
}

Answer 1

＆＃39;替换＆＃39;激活策略会导致在导航到此路线时更换VM和View，即使您停留在同一路线上也是如此。您可以尝试“调用生命周期”＆＃39;激活策略并在activate回调中编写一些代码，以根据新路由参数更新选择元素的值。

至于为什么determineActivationStrategy无法处理自定义元素，这是因为自定义元素不是路由组件，因此他们没有激活策略。

使用activationStrategy：替换自定义元素 - 而不是整个路径

1 个答案: