Question

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>

Answer 1

很好地合并两个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>

工作小提琴 here

如果你想在一个视图模型下制作所有内容，请检查这个小提琴 here

Answer 2

完全不知道你在寻找什么......但是已经准备好了Fiddle。看看它。希望对你有所帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: