如何在knockout.js中結合這兩個代碼？

js這是我的第一個程序之一。我有兩個代碼分開的文件，我不知道如何將這兩段代碼合併成一個代碼。我知道這看起來很容易，但我bieng一個新手，您的幫助將受到高度讚賞。如何在knockout.js中結合這兩個代碼？

//Knockout file to add/ remove rows 
     <html> 
     <script src="C:\Users\neha.uniyal\Downloads\knockout-3.3.0.js"  type="text/javascript"></script> 
     <script> 
     function InsertRow(name) { 
     var self = this; 
     self.name = name; 
      } 

     function AppViewModel() { 
     var self = this; 

     // Editable data 
     self.rows = ko.observableArray([ 
      new InsertRow(""), 

     ]); 
     self.addRow= function() { 
      self.rows.push(new InsertRow("")); 
     } 
     self.removeRow= function(row) { self.rows.remove(row) } 
      } 

       ko.applyBindings(new AppViewModel()); 
     </script> 
     <body> 
     <h2>Application</h2> 

     <table> 
     <thead><tr> 
      <th>File name</th> 
     </tr></thead> 
     <tbody data-bind="foreach:rows"> 
      <tr> 
       <td><input data-bind="value: name" /></td> 
       <td> 
       <select> 
       <option value="yes">Yes</option> 
       <option value="no" selected>No</option> 
       </select></td> 
       <td><a href="#" data-bind="click: $root.removeRow">Remove</a></td> 
      </tr>  
     </tbody> 
     </table> 

     <button data-bind="click:addRow">Add Row</button> 
     </body> 
     </html> 


//File to display upload-file control on selecting yes option: 
<html> 
     <script src="C:\Users\neha.uniyal\Downloads\knockout-3.3.0.js"  type="text/javascript"></script> 
     <script> 
    var viewModel = { 
    types: ["Yes", "No"], 
    type: ko.observable("No"), 
    isType: function(type) { 
     return type === this.type(); 
    } 
}; 

ko.applyBindings(viewModel); 

     </script> 
     <body> 
     Choose : <select data-bind="options: types, value: type"></select> 
<hr/> 
<span data-bind="visible: isType('Yes')"><input type = "file"> </span> 
<span data-bind="visible: isType('No')" ></span> 

     </body> 
     </html>

來源

2015-06-09 Neha Uniyal

你的意思是說，你要合併2個虛擬機到一個虛擬機？ –

我可以在第二個html文件中看到選擇下拉菜單。你想把它放在第一個HTML文件中而不是選擇嗎？你能否提供更多細節？ –

不知道你在找什麼確切。但已經準備Fiddle。看看吧。希望能幫助你。

function InsertRow(name, hasFile) { 
 
    var self = this; 
 
    self.name = name; 
 
    self.hasFile = ko.observable(hasFile); 
 
    
 
    self.isType = function (hasFile) { 
 
     return hasFile === this.hasFile(); 
 
    }; 
 
} 
 

 
function AppViewModel() { 
 
    var self = this; 
 

 
    // Editable data 
 
    self.rows = ko.observableArray([ 
 
    new InsertRow("", 'No')]); 
 
    self.addRow = function() { 
 
     self.rows.push(new InsertRow("", 'No')); 
 
    } 
 
    self.removeRow = function (row) { 
 
     self.rows.remove(row) 
 
    }; 
 

 
    self.types = ko.observableArray(["Yes", "No"]); 
 
    self.type = ko.observable("No"); 
 
    //self.isType = function (type) { 
 
    // return type === this.type(); 
 
    //}; 
 

 
} 
 

 

 
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 
 
<h2>Application</h2> 
 

 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>File name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach:rows"> 
 
     <tr> 
 
      <td> 
 
       <input data-bind="value: name" /> 
 
      </td> 
 
      <td> 
 
       <select data-bind="options: $root.types, value: hasFile"></select> 
 
       <br/> <span data-bind="visible: isType('Yes')"> 
 
        <input type = "file"/> 
 
       </span> 
 
<span data-bind="visible: isType('No')"></span> 
 

 
      </td> 
 
      <td><a href="#" data-bind="click: $root.removeRow">Remove</a> 
 

 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<button data-bind="click:addRow">Add Row</button>

來源

2015-06-09 07:26:09

以及合併兩個的ViewModels只是嘗試這樣

視圖模型：

function InsertRow(name) { 
    var self = this; 
    self.name = name; 
} 

function AppViewModel() { 
    var self = this; 
    // Editable data 
    self.rows = ko.observableArray([ 
    new InsertRow(""), 
    ]); 
    self.addRow = function() { 
     self.rows.push(new InsertRow("")); 
    } 
    self.removeRow = function (row) { 
     self.rows.remove(row) 
    } 
} 

var viewModel = { 
    types: ["Yes", "No"], 
    type: ko.observable("No"), 
    isType: function (type) { 
     return type === this.type(); 
    } 
}; 

var vm ={ //merging here 
    vm1:new AppViewModel(), 
    vm2:viewModel 
} 
ko.applyBindings(vm)

查看：

<table> 
    <thead> 
     <tr> 
      <th>File name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach:vm1.rows"> /*always refer via view-model instance */ 
     <tr> 
      <td> 
       <input data-bind="value: name" /> 
      </td> 
      <td> 
       <select> 
        <option value="yes">Yes</option> 
        <option value="no" selected>No</option> 
       </select> 
      </td> 
      <td><a href="#" data-bind="click: $root.vm1.removeRow">Remove</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<button data-bind="click:vm1.addRow">Add Row</button>//File to display upload-file control on selecting yes option: Choose : 
<select data-bind="options: vm2.types, value: vm2.type"></select> 
<hr/> 
<span data-bind="visible: vm2.isType('Yes')"><input type = "file"/> </span> 

<span data-bind="visible: vm2.isType('No')"></span>

工作小提琴here

只是櫃面，如果你試圖讓一個下的一切視圖模型檢查此琴here

來源

2015-06-09 07:06:23

非常感謝你們。它真的幫了我很大的忙。 –

我標記了你的答案也是答案。目前我沒有足夠的分數來評分答案，因爲我是初學者 –

你最好只標記一個答案。不是都。你可以通過點擊箭頭和勾號進一步upvote。你有我想要的權利 –

如何在knockout.js中結合這兩個代碼？

回答

相關問題