動態行代使用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的基本原理，然後重新構建它。祝你好運！