使用Json数据填充引导选择并敲除JS Viewmodel

我在我的项目中使用JSON和引导控件。在我的JSON中，我从我的sql database中检索数据。现在我想用我的数据填充我的选择控件，但它不起作用，我看不到我做错了什么，并且我搜索了很多小提琴来让它工作。使用Json数据填充引导选择并敲除JS Viewmodel

这是我的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>

这是我想填充我的选择，这是我的TD

div data-bind="foreach: Projects"> 
select data-bind="options: $root.MappedProjects, optionsText: ProjectName, value: 'ProjectName'"> 
/select> 
/div>

来源

2013-01-19 Gericke

内随着optionsTextselect binding option你需要将您的属性名称指定为字符串，因此您需要编写'ProjectName'（注意单引号）。

但value binding需要属性本身，所以你需要写ProjectName（注意没有引号）。

所以固定的结合看起来是这样的：

<div data-bind="foreach: Projects"> 
    <select data-bind="options: $root.MappedProjects, 
         optionsText: 'ProjectName', value: ProjectName"> 
    </select> 
</div>

来源

2013-01-19 12:34:51 nemesv

我已经修复了这样的绑定，但它不起作用。我用Json数据创建了一个jsfiddle.net/Fumunchu/N7J2E/，但它仍然不起作用。如果可能，请你帮我 – Gericke

@ G-Man我已经修好了你的小提琴：http://jsfiddle.net/nemesv/nBCwj/。但是你的绑定有很多错误。你有''选项：$ root.items optionstext：items.ProjectName“'。如果正确的绑定是“”选项：$ root.items，optionsText：'ProjectName'“'逗号丢失，并且绑定区分大小写。而你的映射插件的用法显然是错误的。我强烈建议您阅读有关基本敲除和ko映射插件的文档和示例。顺便说一下，手动映射代码在你的问题中具有更多的可追溯性和清晰性。 – nemesv

非常感谢您的帮助，非常感谢。 – Gericke

我发现了一个更简单的方法来填充选择与淘汰赛：

HTML：

<div class="bar"> 
    Select Query: 
    <select id="QueryName" data-bind="options: Data, optionsText: 'QueryName', value: QueryName, event: { 'change': vm.LoadQuery }"> 
    </select> 
</div>

可以添加一个事件来加载通过添加以下数据更改：event: { 'change': vm.LoadQuery }

敲除：

vm = { 
     Data: ko.observableArray(), 
    } 

    function LoadQueries() { 
     $.ajax({ 
      type: "POST", 
      url: "ExportCustomQueriesList.aspx/GetQueries", 
      contentType: "application/json", 

      success: function (response) { 
       vm.Data(ko.utils.unwrapObservable(ko.mapping.fromJS(response.d))); 
       ko.applyBindings(vm); 

       //var n = noty({ text: 'Query in progress of execution', theme: 'default', layout: 'center', timeout: 2000, type: 'error' }); 
      } 
     }) 
    }

来源

2013-08-12 08:18:16 Gericke

使用Json数据填充引导选择并敲除JS Viewmodel

回答

相关问题