Knockout-Contrib / Knockout-Contrib/Knockout-Validation

New nested object does not pass propagation to parent

Open
#660 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1k
Forks
366
PR merge metrics
No merged PRs in 30d

Description

I am building a knockout SPA. I am trying to create a page validation where if items are ON the page, they get validated and if they are NOT on the page, they don't get validated.

I am trying to figure out an acceptable way to have these items validate this way.

What I am finding is that as soon as I create a new model and add it to my existing model, the knockout-validation does not properly propagate the binding up to the parent view model, making it invalid when the object is created.

When you type in the PARENT box, the main view model is valid, when you click "Add Object" it adds a new object but the parent model is still valid. You can type in the box and it validates, and then the parent validates the entire thing, showing invalid if you remove the typing from either box. This is just weird.

You can see this behavior in the following fiddle: http://jsfiddle.net/3txv0p60/242/

HTML:

VALUE


PARENT OBJECT IS VALID:

(((Parent object should represent the validity of the entire thing)))

Add Object SUB-VALUE:

SUB-OBJECT ISVALID: js:

User = function () {

var self = this;

// observables
self.firstName = ko.observable();

// validation
self.validationObject = ko.validatedObservable({
    firstName: self.firstName.extend({
        required: true
    })
});

};

IndexViewModel = function () {

var self = this;
// observables
self.users = ko.observable();
self.name = ko.observable();

    self.anotherUser = ko.observable();

// functions
self.addObject = function() {
    if (self.anotherUser() === undefined || self.anotherUser() === null){
      self.anotherUser(new User());
    }     
};

// validation
self.validationObject = ko.validatedObservable({
    anotherUser: self.anotherUser,
    name: self.name.extend({
        required: true
    })

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the nested User case in the linked JSFiddle, focusing on addObject, anotherUser, and the two validationObject instances. Confirm that adding the child and changing either field update the parent validity; done means the parent reflects the validity of the complete object tree.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.