Knockoutjs 选项与 JSON 数据绑定？

Question

我正在尝试在淘汰选项绑定的帮助下从服务器列出 select 标记的选项。我有一个 PHP 页面，它返回 JSON 数据，该数据被推送到绑定到选择标记的淘汰赛可观察数组。但不知何故它不起作用，请参考以下代码：

HTML：

<div class="form-group">
    <select class="form-control">
        <option data-bind="options: Country_Names, optionsText: 'country_name'"></option>
    </select>
</div>

JavaScript：

$(document).ready(function(){
    function appModel(session_info){
        /* Session Info related bindings are commented as they are working fine */
        var self = this;
        this.Country_Names = ko.observableArray();

        // Bindings related to the batch processing
        $(function(){
            $.ajax({
                url:"../api/master_list.php",
                type:"get",
                data:{mastertype: '1'},
                cache:false,
                success:function(country_list){
                    ko.mapping.fromJSON(country_list, {}, self.Country_Names);
                }
            });
        });
    };

    $.ajax({
        url:"../api/sessions.php",
        type:"get",
        data: {rqtype: '1'},
        cache:false,
        success:function(session_info){
            var data = $.parseJSON(session_info);
            if (data.status == 'Invalid_id'){
                window.location.replace('../files/main.html');
            } else {
                ko.applyBindings(new appModel(session_info));
            }
        }
    });    
});

示例 JSON：

[{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}]

问题，为什么选择标签中没有列出选项？我错过了什么明显的东西吗？

Answer 1

您正在对 option 元素进行数据绑定，而您想将绑定放在 select 上，如下所示：

<select class="form-control" data-bind="options: Country_Names, optionsText: 'country_name'">
</select>

<option...> 元素消失了；选项将由 Knockout 生成。

请注意，the relevant documentation 非常清楚这一切是如何工作的。如果您还没有，我建议（重新）阅读它。

或者，查看这个完整的演示：

var data = [{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}];

ko.applyBindings({ Country_Names: data });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: Country_Names, optionsText: 'country_name'"></select>