promise - Aurelia 中的异步绑定(bind)

Question

我正在尝试将异步值绑定(bind)到我的 Aurelia 模板之一，显然我得到的只是 [object Promise] 作为返回。

我找到了这篇文章 http://www.sobell.net/aurelia-async-bindings/它很好地解释了如何使用如下所示的绑定(bind)行为来解决此问题:

// http://www.sobell.net/aurelia-async-bindings/
export class asyncBindingBehavior {
    bind (binding, source) {
        binding.originalUpdateTarget = binding.updateTarget;

        binding.updateTarget = a => {
            if (typeof a.then === 'function') {
                binding.originalUpdateTarget('...');

                a.then(d => {
                    binding.originalUpdateTarget(d);
                });
            }
            else {
                binding.originalUpdateTarget(a);
            }
        };
    }

    unbind (binding) {
        binding.updateTarget = binding.originalUpdateTarget;
        binding.originalUpdateTarget = null;
    }
}

当 promise 使用字符串或其他非对象类变量解析时，这非常有效。

但是，如果我的 promise 使用对象解析怎么办？我将如何访问该对象中我需要的属性？

因为如果我这样做: ${object.property & async} 在我的模板中那么它将失败，因为 object.property 不是一个 promise - 只有 对象是。

我添加了一些 hack，允许我将属性指定为 async 的参数，如下所示:${object & async:'property'}并更新我的绑定(bind)行为:

// http://www.sobell.net/aurelia-async-bindings/
export class asyncBindingBehavior {
    bind (binding, source, property) {
        binding.originalUpdateTarget = binding.updateTarget;

        binding.updateTarget = a => {
            if (typeof a.then === 'function') {
                binding.originalUpdateTarget('...');

                a.then(d => {
                    if (property) {
                        binding.originalUpdateTarget(d[property]);
                    }
                    else {
                        binding.originalUpdateTarget(d);
                    }
                });
            }
            else {
                binding.originalUpdateTarget(a);
            }
        };
    }

    unbind (binding) {
        binding.updateTarget = binding.originalUpdateTarget;
        binding.originalUpdateTarget = null;
    }
}

但这对我来说非常像是一种 hack，而且它也不允许我访问任何更深层次的属性，例如 object.parent.child。

我还在 GitHub 上发现了这个(相当老的)问题:https://github.com/aurelia/templating/issues/81他们使用 getValue 方法。我从未听说过这种方法并且尝试使用它失败了，所以我完全不确定它是如何工作的......

有什么想法吗？

Answer 1

您可以通过将一个函数指定为第三个参数来回避您的难题，从而提供比简单的属性提取更多的灵 active 。

你可以这样写:

export class asyncBindingBehavior {
    bind (binding, source, transformer="default") {
        binding.originalUpdateTarget = binding.updateTarget;
        binding.updateTarget = a => {
            if (typeof a.then === 'function') {
                binding.originalUpdateTarget('...');
                a.then(d => binding.originalUpdateTarget(transformFunctions[transformer](d)));
            } else {
                binding.originalUpdateTarget(a);
            }
        };
    }
    unbind (binding) {
        binding.updateTarget = binding.originalUpdateTarget;
        binding.originalUpdateTarget = null;
    }
}

由于 Aurelia 绑定(bind)被指定为 HTML 嵌入或模板指令(即所有参数必须是字符串)的方式，transformFunctions 查找将是必要的(？)。除非 Aurelia 提供更好的方法来“传递函数”(Value Converters？)，否则您会这样写:

export var transformFunctions = {
    default: (d) => d,
    transform1: (d) => d.someProperty,
    transform2: (d) => d.someProperty.someOtherProperty,
    transform3: someFunction,
    transform4: someOtherFunction.bind(null, someData);
}

当然，您可以给函数起更好的名字。