KnockoutJS Observable object of observables

Question

I want to make observable object of observables. For example:

        var Project = function(id, name, custId) {
            this.id = ko.observable(id);
            this.name = ko.observable(name);
            this.custId = ko.observable(custId);
        }

        var viewModel = function() {

                    this.newUpProj = ko.observable(new Project(null,null,null));
            ...
            }

Something like this... I want newUpProject to be observable and it's properties to be observables. I also tried this.newUpProj = ko.mapping.fromJS(new Project());

Edit1: It crates the object but it's properties(id, name...) are not observables...

Edit2: Use in html:

<div class="modal-body">
                <p><input type="text" id="projNameTx" data-bind="value: newUpProj.name()" /></p><br>
                <p><select data-bind="options: customers, optionsCaption: 'Choose...', value: newUpProj.custId(), optionsText: 'name', optionsValue: 'id'" 
                    size="1"></select></p>

            </div>
            <div class="modal-footer">
                <button class="btn" data-bind="click: clearModal" aria-hidden="true">Close</button>
                <button class="btn btn-primary" data-bind="click: updateFlag() ? updateProject : addProject, enable: newUpProj.custId() && newUpProj.name()">Save</button>
            </div>

Correct values are loaded in the input and the select but the Save button never disables if the input is empty(for example), because the change don't go to the model.

Can you post the html too?

Peter Porfy
– Peter Porfy

2013-02-11 15:27:28 +00:00
Commented Feb 11, 2013 at 15:27 — Peter Porfy
– Peter Porfy, Commented Feb 11, 2013 at 15:27

Thewads · Accepted Answer · 2013-02-11 16:18:32Z

5

Possibly just needing to execute your newUpProj in you binding?

enable: newUpProj().custId() && newUpProj().name()

Failing that, you could try making a computed observable which is set to either true or false depending on the state of custId and name

answered Feb 11, 2013 at 16:18

Thewads

5,06311 gold badges58 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evgeni Dimitrov Over a year ago

May be the computed observable will solve the particular case, but I will need this in other cases...

Thewads Over a year ago

@Evgeny possibly try fully declaring the conditions? So something like if newUpProj.name() !== ""

Evgeni Dimitrov · Accepted Answer · 2013-02-12 10:08:04Z

5

Managed to do it with this: http://jsfiddle.net/wF7xY/1/

var Model = function() {
    this.data = ko.observable({}); // It doesn't work
};

var Data = {
    field1: 'test1',
    field2: 'test2'
};

var model = new Model();
ko.applyBindings(model);

ko.mapping.fromJS(Data, {}, model.data);
model.data.valueHasMutated();

HTML:

<div data-bind="text: data().field1 ? data().field1() : ''"></div>

Thanks for the help.

answered Feb 12, 2013 at 10:08

Evgeni Dimitrov

22.6k34 gold badges124 silver badges148 bronze badges

1 Comment

Mou Over a year ago

what this line model.data.valueHasMutated() will do ?

Collectives™ on Stack Overflow

KnockoutJS Observable object of observables

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related