dynamic rows generation using KnockoutJS

Question

I have following HTML code which has reference to JavaScript. Code does not show any error but data is not coming up in screen.

I see below line not working

data-bind='options: AssignResourceView.ResourceViewData

here is non-working jsfiddle

I am referring this code 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>

This is my JavaScript code

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
 };
}();

My JSON Sample

 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

I spotted a few things wrong with your fiddle...

• missing KO itself
• Nothing to call init of your module?
• Incorrect bindings

I've made a few tweaks, and got some of it working:

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

Notably:

1 Added KO as an external resource

2 Called the init method like so -

arv = AssignResourceView()
arv.Init()

3 Adjusted the binding syntax to, eg:

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

Hopefully that'll help you see how to fix the rest. I suggest you cut my tweaked version of code right back to the basics, make sure you understand the fundamentals of KO, and then build it back up again. Good luck!