Click function not update binding

[falik...@gmail.com]

Hi,

I'm new at web developer and I'm trying to create web page that create dynamic controls 

I'm trying when I'm click on button disable/enable textbox control and clear the text.

the binding to the textbox control work when I'm initialize but when i try to change the value in the click event It wont work

this is the code:

<h1 style="margin: 5px 20px; width:98%; text-decoration: underline; ">Title Of The Document</h1>


<ul class="list-group list-group-flush" data-bind="foreach: tasks" style="overflow: auto; height:800px">
    @*<ul class="list-group list-group-flush" data-bind="foreach: tasks, visible: tasks().length > 0" style="overflow: auto; height:auto">*@
    <li class="list-group-item">
        <div class="card border-dark mb-3" style="max-width: 65rem; ">
            <div class="card-header">
                <input style="width:95%" class="form-control" type="text" placeholder="Main Header" data-bind="value: header.mainHeader" />
                <button data-bind='click: secondaryHeaderEnable'>Click me</button>
                <input style="margin: 5px 15px; width:95%" class="form-control" type="text" placeholder="Secondary Header"
                       data-bind="value: header.secondaryHeader, disable: header.isSecondaryHeaderEnable"/>
                <button data-bind='click: thirdHeaderEnable'>Click me</button>
                <input style="margin: 5px 30px; width:95%" class="form-control" type="text" placeholder="Third Header"
                       data-bind="value: header.thirdHeader, disable: header.isThirdHeaderEnable"/>
            </div>
            <div class="card-body text-dark">
                <input data-bind="value: title" />
            </div>
        </div>
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li>
</ul>


<form data-bind="submit: addTask">
    <button type="submit">Add</button>
</form>

<script type="text/javascript">


    function Task() {
        this.title = ko.observable();
        this.header = new HeaderControll();


        this.thirdHeaderEnable = function(data, event) {
            alert("Work");
            this.header.isThirdHeaderEnable = !this.header.isThirdHeaderEnable
            this.header.thirdHeader = "";
        };


        this.secondaryHeaderEnable = function(data, event) {
            alert("Work");
            this.header.isSecondaryHeaderEnable = ko.observable(!this.header.isSecondaryHeaderEnable);
            this.header.secondaryHeader = ko.observable("");
        };
    }

    function HeaderControll() {
        this.mainHeader = ko.observable("");
        this.secondaryHeader = ko.observable("");
        this.thirdHeader = ko.observable("");
        this.isSecondaryHeaderEnable = ko.observable(false);
        this.isThirdHeaderEnable = ko.observable(false);
    }

    function TaskListViewModel() {
        var self = this;
        self.tasks = ko.observableArray([]);


        // Operations
        self.addTask = function () {
            self.tasks.push(new Task());
        };
        self.removeTask = function (task) { self.tasks.remove(task) };
    }


    ko.applyBindings(new TaskListViewModel());
</script>

note : the alert work.

I didn't find a solution in the forum for that and anything that I tried not working.

Thanks for helping :)

[Gunnar Liljas]

Observable values are set/gotten using a function call.

this.header.isThirdHeaderEnable = !this.header.isThirdHeaderEnable

should be

this.header.isThirdHeaderEnable(!this.header.isThirdHeaderEnable())

and

this.header.thirdHeader = "";

should be 

this.header.thirdHeader("");

and

this.header.secondaryHeader = ko.observable("");

should be

this.header.secondaryHeader("");

Also, I suggest using 

var self = this;

in the Task class, and use self instead of this, inside all functions.

/G

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[falik...@gmail.com]

It works, thanks!