使用Json数据和Knockout JS Viewmodel填充bootstrap选择

Ger*_*cke 3 json knockout.js

我在我的项目中使用JSON和bootstrap控件.在我的JSON中,我从我的数据中检索数据sql database.现在我想用我的数据填充我的选择控件,但它不起作用,我看不出我做错了什么,我搜索了很多小提琴让它工作.

这是我的JSON ::

    var Projectss = function (data) {
        var self = this;
        self.ProjectName = ko.observable(data.ProjectName);
    }

    var ProjectModel = function (Projects) {
        var self = this;
        self.Projects = ko.observableArray(Projects);

    $.ajax({
            url: "CreateTask.aspx/GetProjectList",
            // Current Page, Method  
            data: '{}',
            // parameter map as JSON  
            type: "POST",
            // data has to be POSTed  
            contentType: "application/json; charset=utf-8",
            // posting JSON content      
            dataType: "JSON",
            // type of data is JSON (must be upper case!)  
            timeout: 10000,
            // AJAX timeout  
            success: function (Result) {
                var MappedProjects =
              $.map(Result.d,
       function (item) { return new Projectss(item); });
                self.Projects(MappedProjects);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }

        });
    };

    $(document).ready(function () {
        var VM = new ProjectModel();
        ko.applyBindings(VM);
    })

</script>
Run Code Online (Sandbox Code Playgroud)

这是我试图填充我的选择的地方,这是我的td内

div data-bind="foreach: Projects">
 select data-bind="options: $root.MappedProjects, optionsText: ProjectName, value: 'ProjectName'">
/select>
/div>
Run Code Online (Sandbox Code Playgroud)

nem*_*esv 6

使用optionsText 选择绑定选项,您需要将属性名称指定为字符串,因此您需要编写'ProjectName'(注意单引号).

但是value绑定需要属性本身,因此您需要编写ProjectName(注意没有引号).

所以固定绑定看起来像这样:

<div data-bind="foreach: Projects">
    <select data-bind="options: $root.MappedProjects, 
                       optionsText: 'ProjectName', value: ProjectName">
    </select>
</div>
Run Code Online (Sandbox Code Playgroud)