Question

我正在尝试使用以下内容填充选择。

 View: Backbone.View.extend({
                    initialize: function () {
                        this.setElement($('#templatePlaceholder'));
                    },
                    bindings: {

                        'select#List': {
                            observe: 'ddList',
                            selectOptions: {
                                collection: Q.when(getSelects.execute()).then(function (data) {
                                    console.dir(data);
                                    return data;
                                })

                            }
                        }
                    },

console返回一个数组对象：

 [ { value: 1, label: "a" },   { value: 2, label: "b" } ]

但我一无所获。

如果我将集合定义为：

collection: function () { return [{ value: 1, label: "a" },{ value: 2, label: "b" }];}

然后一切正常。

Answer 1

这可能存在一些问题：异步代码在分配View时立即执行，这可能是不合需要的;并且集合被分配给执行该承诺的结果，而不是return data返回的任何内容。

一些解决方案：

1）您可以在页面加载时引导您的选择选项。这是单页或Backbone应用程序中的流行模式。基本上，您将后端放在一起，将常用数据的json数据结构放在一起，然后将其作为javascript变量呈现给页面。所以服务器端模板（jsp，erb，php）看起来像这样：

<!DOCTYPE html>
...
    <script type="text/javascript">
       window.bootstrap = { users: <%= userjson %>, ddlist: <%= ddlistjson %> };
    </script>
...

建议使用此方法以提高性能和便利性。

2）如果您可以选择同步运行getSelects.execute() - 例如，如果它是jQuery ajax请求，请使用async:false选项运行它 - 然后您可以在几个地方执行它在视图中。 initialize期间将在实际构建视图时获取数据。或者您可以将collection绑定分配给运行getSelects例程的函数，该例程会阻塞然后返回数据：

collection: function() {
    var collection = [];
    // Assumes that getSelects.execute() will block and run synchronously.
    Q.when(getSelects.execute()).then(function (data) {
       collection = data;
    });
    return collection;
}

不建议使用此方法，因为它可能会使您的UI处于时髦状态，因为它会阻止其他javascript运行，并且可能会挂起。

来自ajax的Backbone stickit selectOptions

1 个答案: