forum

Home / DeveloperSection / Forums / How to add and remove dynamic LI tag in UL tag using Knockout,js?

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

Anonymous User218111-Mar-2015

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>


Updated on 11-Mar-2015
I am a content writter !

Can you answer this question?


Answer

1 Answers

Liked By