Error "task.status is not a function" needed help

[Dhirendra Tripathi]

Hi All 

I new to knockout library , started small small project to explore  this library.

im making a todo app , where one functionality is not working as i expected .

Its throwing an error in browser console 

expectation :table row should become green when i click on complete button 

Action to produce the error : click on complete button on ui 

"

error line:117 in function "completeTask"

Uncaught TypeError: task.status is not a function

    at Object.completeTask (knockoutTodo.js:117)

    at HTMLButtonElement.<anonymous> (knockout-latest.js:100)

    at HTMLButtonElement.dispatch (jquery-3.5.1.min.js:2)

    at HTMLButtonElement.v.handle (jquery-3.5.1.min.js:2

"

https://jsfiddle.net/Dt231tri/60u7x8ev/1/ 

To checkout my todo app for clear understanding

Please help me  achieve my expectation 

[Jonathan Shay]

You task definition doesn’t contain a status property:

 

var task = {

    name: ko.observable(),

    Description: ko.observable(),

    date: ko.observable(d + "/" + m + "/" + y),

    priority: ko.observable(1),

  };

 

I’m not my computer to test, but try:

 

var task = {

    name: ko.observable(),

    Description: ko.observable(),

    date: ko.observable(d + "/" + m + "/" + y),

    priority: ko.observable(1),

    status: ko.observable();

  };

 

Sent from Mail for Windows 10

--
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/knockoutjs/8daf65f3-43b8-499a-8004-4304fe7cfb58n%40googlegroups.com.

 

[Jonathan Shay]

Please disregard my previous statement. After looking it over, it seems like in AddTask you’re creating a payload with an observable status, then following it up with a call to unwrap the observable and push it into the tasks array.

 

    if (task.name() && task.Description()) {

      var paylaod = { name: task.name(), Description: task.Description(), date: task.date(), priority: task.priority(), status: ko.observable("new") };

      tasks.push(ko.toJS(paylaod));

 

If you want your status to remain an observable, don’t call ko.toJS().

 

Sent from Mail for Windows 10

 

From: Dhirendra Tripathi
Sent: Tuesday, December 8, 2020 1:13 PM
To: KnockoutJS

--

[Dhirendra Tripathi]

Hi Jonathan,

I have tired that before  its error free syntactically .Please checkout updated fiddle  https://jsfiddle.net/Dt231tri/60u7x8ev/1/  

but problems occur  in function completeTask.

I have binded this function on click event .

when i click on this button knockout automatically passing current task as argument  to this function

var completeTask = function (task) {

    console.log("task completed ");

    console.log(Before task);

    task.status = "complete";  

    console.log(Aftertask);

  };

Behavior : i have added one task with name "Dhirendra" as shown below, default status is "new" which is correctly working and showing in the table with red color

Console log :Before task:{name: "Dhirendra", Description: "Tripathi", date: "9/12/2020", priority: "3", status: "new"}

Console log :After task:{name: "Dhirendra", Description: "Tripathi", date: "9/12/2020", priority: "3", status: "completed"} , here is the issue status is 

changed to completed but still my view dint turn out into green color .

#My Observation : status property lost its observable property ,its not observable anymore so not updating view .The reason of losing observable this assignment operator "task.status = "complete".

 my problem i can't use task.status("complete") in order to maintain its observable property , this line is giving me error 

Uncaught TypeError: task.status is not a function

    at Object.completeTask (knockoutTodo.js:129)

    at HTMLButtonElement.<anonymous> (knockout-latest.js:100)

    at HTMLButtonElement.dispatch (jquery-3.5.1.min.js:2)

    at HTMLButtonElement.v.handle (jquery-3.5.1.min.js:2)

Please help if any better approach or if something i missing