javascript - KnockoutJS Observable object of observables - Stack Overflow

admin管理员组

文章数量:1342657

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.

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.

• javascript
• knockout.js

Share Improve this question Follow edited Feb 11, 2013 at 15:37 Evgeni Dimitrov asked Feb 11, 2013 at 15:16 Evgeni DimitrovEvgeni Dimitrov 22.5k3333 gold badges123123 silver badges148148 bronze badges 1

• Can you post the html too? – Peter Porfy Commented Feb 11, 2013 at 15:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Possibly just needing to execute your newUpProj in you binding?

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

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

Managed to do it with this: http://jsfiddle/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.

本文标签： javascriptKnockoutJS Observable object of observablesStack Overflow