Question

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

我看到以下行无法正常工作

data-bind ='options：AssignResourceView.ResourceViewData

我指的是此代码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本身
没有什么可以调用模块的init？
不正确的绑定

我已经做了一些调整，并得到了一些工作：

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

值得注意的是：

1添加KO作为外部资源

2像这样调用init方法 -

arv = AssignResourceView()
arv.Init()

3将绑定语法调整为，例如：

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

希望能帮助您了解如何解决剩下的问题。我建议你把我调整过的代码版本改回基础知识，确保你理解KO的基础知识，然后重新构建它。祝你好运！

使用KnockoutJS生成动态行

1 个答案: