Jinja2：Flask 的 url_for() 结合 Knockout 的 attr 绑定

Question

我在一个以 Jinja2 作为模板引擎的 Web 应用程序中同时使用 Flask 和 Knockout。在我的 Flask 应用程序中，我有两条路线：/accounts/ 和 /accounts/<int:acc_id>/，看起来像这样：

@app.route("/accounts/")
@login_required
def accounts():
    return render_template("accounts.html")


@app.route("/accounts/<int:acc_id>/")
@login_required
def account(acc_id):
    return render_template("account.html",
        account_id=acc_id)

/accounts/ 路由加载一个带有 Knockout 视图模型的 HTML 页面。视图模型然后 AJAX 将帐户列表加载到 observableArray 并呈现如下内容：

<!-- ko foreach: accounts -->
    <span data-bind="text: name></span>
<!-- /ko -->

/accounts/<int:acc_id>/ 路由显示有关单个帐户的信息。

我要做的是使用url_for() 在上面的HTML sn-p 中的每个帐户上创建一个href 属性，并将帐户的ID 作为参数传递。我无法使用来自 Knockout 模型的参数对 url_for() 进行 Python 调用。

到目前为止我尝试过的几种变体：

将 id 连接到 url_for 函数调用中：

<a data-bind="attr: { href: '{{ url_for('account', acc_id=' + id() + ' }}'}">
    <span data-bind="text: name"></span>
</a>

这会产生一个ValueError: invalid literal for int() with base 10: '+ id() +'，因为它将对 id() 的调用读取为字符串文字。

在视图模型中创建一个返回 url_for 字符串的函数：

self.accountUrl = function(account_id) {
    return '{{ url_for("admin.account", acc_id=' + account_id + ') }}';
};

这样称呼它：

<a data-bind="attr: { href: $root.accountUrl(id()) }">
    <span data-bind="text: name"></span>
</a>

这导致 href 属性被设置为从 accountUrl() 返回的字符串文字，即 HTML 如下所示：

<a href='{{ url_for("account", acc_id=1) }}'>

我觉得我必须在这里忽略一些东西。有什么想法吗？

Answer 1

生成 HTML 时，您的 python 代码 (url_for) 在服务器端运行，但在呈现页面时，Knockout 代码在浏览器中运行。所以你不能将变量从 Knockout 传递到 python url_for 方法。

您可以做的是只生成/accounts/ 并使用 KO 构建 URL 的其余部分：

<a data-bind="attr: { href: '{{ url_for('account') }}' + '/' + id() }">
    <span data-bind="text: name"></span>
</a>