如何在knockout.js中组合这两个代码？_Knockout.js

如何在knockout.js中组合这两个代码？

knockout.js

如何在knockout.js中组合这两个代码？,knockout.js,Knockout.js,js，这是我的第一个程序之一。我有两段代码在不同的文件中，我不知道如何将这两段代码组合成一段代码。我知道这看起来很简单，但作为一个新手，我非常感谢你的帮助 //Knockout file to add/ remove rows <html> <script src="C:\Users\neha.uniyal\Downloads\knockout-3.3.0.js" type="text/javascript"></script&

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>

//用于添加/删除行的删除文件
函数InsertRow（名称）{
var self=这个；
self.name=名称；
}
函数AppViewModel（）{
var self=这个；
//可编辑数据
self.rows=ko.array([
新插入行（“”），
]);
self.addRow=函数（）{
self.rows.push（新插入行（“”）；
}
self.removeow=函数（行）{self.rows.remove（行）}
}
应用绑定（新的AppViewModel（））；
应用
文件名
对
不
添加行
//选择“是”选项时显示上载文件控件的文件：
var viewModel={
类型：[“是”、“否”]，
类型：可观测（“否”），
isType:函数（类型）{
返回类型===this.type（）；
}
};
应用绑定（视图模型）；
选择：

要合并两个ViewModel，请像这样尝试

视图模型：

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>

查看：

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>


文件名
/*始终通过视图模型实例引用*/
对
不
添加行//文件以在选择“是”时显示上载文件控件选项：选择：

工作小提琴

以防万一，如果你想把所有东西都放在一个视图模型下，检查一下这把小提琴，因为你不知道你到底在找什么。。但是我们已经准备好了。看一看。希望这对你有帮助

函数InsertRow（名称，hasFile）{
var self=这个；
self.name=名称；
self.hasFile=ko.observable（hasFile）；
self.isType=函数（hasFile）{
return hasFile==this.hasFile（）；
};
}
函数AppViewModel（）{
var self=这个；
//可编辑数据
self.rows=ko.array([
新插入行（“，”否“）]；
self.addRow=函数（）{
self.rows.push（newinsertrow（“，'No'））；
}
self.removeow=函数（行）{
self.rows.remove（行）
};
self.types=ko.observearray（[“是”、“否”）；
自我类型=可观察到（“否”）；
//self.isType=函数（类型）{
//返回类型===this.type（）；
//};
}
应用绑定（新的AppViewModel（））

应用
文件名


添加行
您的意思是要将两个虚拟机合并到一个虚拟机中？我可以在您的第二个html文件中看到Choose下拉列表。是否要在第一个html文件中放置此文件而不是选择？你能提供更多的细节吗？谢谢你们这么多人。这真的很有帮助：）我也把你们的回答记为答案。目前我没有足够的分数给答案打分，因为我是一个初学者，你们只能把一个答案记为最佳答案。不是两者都有。单击向上箭头并勾选，可以进一步向上投票。我想你有权利