Knockout ObserableArray下拉绑定问题

时间:2013-09-29 06:52:44

标签: javascript data-binding knockout.js

我正在尝试从页面加载中的restful wcf服务获取数据并绑定到不起作用的下拉列表。

        function CreateItem(name, value) {
            var self = this;

            self.itemName = ko.observable(name);
            self.itemValue = ko.observable(value);
        };

        function AppViewModel() {
            var self = this;

            self.titleList = ko.observableArray();

            self.load = function () {
                alert("click fired");
                $.ajax({
                    url: "https://mydomain/RestfulService/Service1.svc/CreateData?name=venkat",
                    type: "POST",
                    cahce: false,
                    async: false,
                    data:'',
                    dataType: "jsonp",
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            self.titleList().push(new CreateItem(data[i].Description, data[i].TitleID));
                        }
                        alert("success " + data);
                    },
                    error: function (error) {
                        alert("failed " + error);
                    }
                });

            };

        };


    <div>
        <select data-bind="options: titleList(), optionsText: 'itemName', optionsValue: 'itemValue', value: selectedTitleValue, optionsCaption: 'Please choose'"></select>
    </div>

<script type="text/javascript">

    $(document).ready(function() {
        var model = new AppViewModel();
        model.load();

        ko.applyBindings(model);
    });
</script>

问题是,knockout数组正在填充加载函数,但是下拉列表没有刷新更新的数据。我不明白问题出在哪里。请提供意见。

1 个答案:

答案 0 :(得分:2)

替换:

self.titleList().push(new CreateItem(data[i].Description, data[i].TitleID));

self.titleList.push(new CreateItem(data[i].Description, data[i].TitleID));

原因是self.titleList()返回 底层数组 ,当您向其推送数据时,Knockout不知道更改并且不会通知视图。