How to add and remove dynamic LI tag in UL tag using Knockout,js?

Hi I’m using knockout.js for add dynamic li tag

This is my code for add dynamic li tag:

<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
    <scriptsrc="~/Scripts/knockout-2.0.0.js"></script>
</head>
<body>
    <h3>Employee List</h3>
 
    <formdata-bind="submit: addEmployee">
        Employee List:
        <inputdata-bind="value: newEmployeeText"placeholder="Enter employee name"/>
        <buttontype="submit">Add</button>
    </form>
 
    <uldata-bind="foreach: tasks, visible: tasks().length > 0">
        <listyle="list-style: none">
            <inputtype="checkbox"data-bind="checked: isDone"/>
            <inputdata-bind="value: title, disable: isDone"/>
        </li>
    </ul>
    You have <bdata-bind="text: EmployeeList().length">&nbsp;</b>
    <spandata-bind="visible: EmployeeList().length == 0"></span>
    <script>
        function Task(data) {
            this.title = ko.observable(data.title);
            this.isDone = ko.observable(data.isDone);
        }
        function TaskListViewModel() {
            var self = this;
            self.tasks =ko.observableArray([]);
            self.newEmployeeText =ko.observable();
            self.EmployeeList = ko.computed(function () {
                return ko.utils.arrayFilter(self.tasks(), function (task) { return !task.isDone() });
            });
            self.addEmployee = function () {
                self.tasks.push(new Task({ title: this.newEmployeeText() }));
                self.newEmployeeText("");
            };
           
        }
        ko.applyBindings(new TaskListViewModel());
    </script>
</body>
</html>

forum

How to add and remove dynamic LI tag in UL tag using Knockout,js?

Anonymous User

1 Answers

Liked By