动态行代使用KnockoutJS

Question

我有以下HTML代码，其中引用JavaScript。代码不显示任何错误，但数据不会显示在屏幕上。

我看到以下没有工作

数据绑定线='选项：AssignResourceView.ResourceViewData

here is non-working jsfiddle

我指这段代码jsfiddle

 <table width='100%'> 
         <thead> 
          <tr> 
           <th width='25%'>Resource Type</th> 
           <th width='25%'>Resource</th> 

           <th width='10%'> </th> 
          </tr> 
         </thead> 
         <tbody data-bind='foreach: AssignResourceView.GetLines'> 
          <tr> 
           <td> 
            <select data-bind='options: AssignResourceView.ResourceViewData, optionsText: "name", optionsCaption: "Select...", value: "id"'> </select> 
           </td> 
           <td data-bind="with: resourceviews"> 
            <select data-bind='options: resource, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select> 
           </td> 

           <td> 
            <a href='#' data-bind='click: $parent.removeLine'>Remove</a> 
           </td> 
          </tr> 
         </tbody> 
        </table> 

这个是我的JavaScript代码

var AssignResourceView = function() { 

var AssignResourceViewModel = 
    { 
     dataFromServer: sampleResourceViews, 
     lines: ko.observableArray(), 
     ResourceViewLine: { 
      resourceviews: ko.observable(), 
      resources: ko.observable(), 
      selectedresourceviewId :ko.observable(), 
      selectedresourceId : ko.observable(), 
     }, 
     addLine: function() 
     { 
      AssignResourceViewModel.lines.push(AssignResourceViewModel.ResourceViewLine) 
     }, 
     removeLine: function (line) { AssignResourceViewModel.remove(line) }, 
     save : function() { 
      var dataToSave = $.map(lines(), function (line) { 
       return line.resourceviews() ? { 
        resourcename: line.resourceviews().name, 
        resourceid: line.selectedresourceviewId 
       } : undefined 
      }); 
      alert("Could now send this to server: " + JSON.stringify(dataToSave)); 
     }, 
     LoadVM: { 
      Init: function() { 
       AssignResourceViewModel.ResourceViewLine.resourceviews.subscribe(function() { 
        AssignResourceViewModel.ResourceViewLine.resources(undefined); 
       }), 
       AssignResourceViewModel.lines = ko.observableArray([AssignResourceViewModel.ResourceViewLine]) 
      }, 
     } 
    } 

return { 
//main function to initiate the module 
Init: function() { 
    debugger; 
    AssignResourceViewModel.LoadVM.Init(); 
    var aR = document.getElementById("assignresourcediv"); 
    ko.applyBindings(AssignResourceViewModel, aR); 

}, 
GetLines:function(){ 
    AssignResourceViewModel.lines(); 
}, 
AddLine: function() { 
    debugger; 
    AssignResourceViewModel.addLine(); 
}, 
RemoveLine: function() { 
    AssignResourceViewModel.removeLine(); 
}, 
Save:function(){ 
    AssignResourceViewModel.save(); 
}, 
ResourceViewData:function(){ 
    AssignResourceViewModel.dataFromServer; 
}, 
Model: AssignResourceViewModel 
}; 
}(); 

我的JSON样品

var sampleResourceViews = [ 

{ 
    "resource": [ 
    { 
     "name": "deepak", 
     "id": 1 
    }, 
    { 
     "name": "raju", 
     "id": 2 
    } 
    ], 
    "name": "Vallet", 
    "id":1 
}, 
{ 
    "resource": [ 
    { 
     "name": "deepak", 
     "id": 1 
    }, 
    { 
     "name": "raju", 
     "id": 2 
    } 
    ], 
    "name": "Service Specialist", 
    "id": 2 
}, 
{ 
    "resource": [ 
    { 
     "name": "deepak", 
     "id": 1 
    }, 
    { 
     "name": "raju", 
     "id": 2 
    } 
    ], 
    "name": "Sales Specialist", 
    "id": 3 
}, 
{ 
    "resource": [ 
    { 
     "name": "deepak", 
     "id": 1 
    }, 
    { 
     "name": "raju", 
     "id": 2 
    } 
    ], 
    "name": "Delivery Specialist", 
    "id": 4 
} 
]; 

Answer 1

我发现了一些东西不对您的小提琴......

• 失踪KO本身
• 没有初始化的调用你的模块？
• 不正确绑定

我做了一些调整，并得到了它的一些工作：

http://jsfiddle.net/sifriday/eu95b2mz/2/

值得注意的是：

1添加KO作为外部资源

2这样调用init方法 -

arv = AssignResourceView() 
arv.Init() 

3调整了绑定语法，如：

<tbody data-bind='foreach: lines'> 

希望这会帮助你了解如何解决其余部分。我建议你将我调整过的代码版本切回到基础，确保你理解了KO的基本原理，然后重新构建它。祝你好运！