Aurelia 中的异步绑定

Question

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

我发现这篇文章http://www.sobell.net/aurelia-async-bindings/ 很好地解释了如何使用如下所示的绑定行为来解决这个问题：

// 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 不是承诺 - 只有 object 是。

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

// 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

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

你可以这样写：

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;
    }
}

transformFunctions 查找将是必要的（？），因为 Aurelia 绑定被指定为 HTML-ebbedded 或模板指令的方式（即所有参数必须是字符串）。除非 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);
}

当然，你会给函数起更好的名字。