javascript - Knockout JS - viewModel access - Stack Overflow

admin管理员组

文章数量:1391987

I'm writing an application for making a reservation. The reservation procedure is rather plex and has quite some dependencies so I decided to use knockout to help me observe changes and update the UI.

I started implementing the customer list. The first customer in the form will be the one who has to enter his details, the others only need names. I figured I could just add a dependentObservable that checks if the current customer is the first one in the customers array to decide whether to display the additional fields.

The problem is that when trying to access viewModel from a customer, I get only get 'undefined'. I tried passing a reference to viewModel to the customer, but that didn't work either. What am I doing wrong? Can viewModel not be accessed?

Here's the code:

var customer = function(){
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.dependentObservable(
        function(){
            return this.firstName() + " " + this.lastName();
        },
        this
    );
    this.gender = ko.observable('');
    this.diet = ko.observable('');
    this.primaryCustomer = ko.dependentObservable(
        function(){
            console.log(viewModel);
            return viewModel.customers.indexOf(this) == 0;
        },
        this
    );
    this.email = ko.observable('');
}

var viewModel = {
    customers: ko.observableArray([new customer()]),
    addCustomer: function(){
        this.customers.push(new customer());
    },
    removeCustomer: function(customer){
        this.customers.remove(customer);
    }
}


ko.applyBindings(viewModel);

I'm writing an application for making a reservation. The reservation procedure is rather plex and has quite some dependencies so I decided to use knockout to help me observe changes and update the UI.

I started implementing the customer list. The first customer in the form will be the one who has to enter his details, the others only need names. I figured I could just add a dependentObservable that checks if the current customer is the first one in the customers array to decide whether to display the additional fields.

The problem is that when trying to access viewModel from a customer, I get only get 'undefined'. I tried passing a reference to viewModel to the customer, but that didn't work either. What am I doing wrong? Can viewModel not be accessed?

Here's the code:

var customer = function(){
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.dependentObservable(
        function(){
            return this.firstName() + " " + this.lastName();
        },
        this
    );
    this.gender = ko.observable('');
    this.diet = ko.observable('');
    this.primaryCustomer = ko.dependentObservable(
        function(){
            console.log(viewModel);
            return viewModel.customers.indexOf(this) == 0;
        },
        this
    );
    this.email = ko.observable('');
}

var viewModel = {
    customers: ko.observableArray([new customer()]),
    addCustomer: function(){
        this.customers.push(new customer());
    },
    removeCustomer: function(customer){
        this.customers.remove(customer);
    }
}


ko.applyBindings(viewModel);

• javascript
• knockout.js

Share Improve this question Follow edited Feb 19, 2012 at 15:33 Tim asked Jul 13, 2011 at 20:56 TimTim 2,4501919 silver badges2020 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I figured it out. The idea of passing the viewModel to the customer was the right one, just the execution was bad. When I initialized customers I did it with a new customer, which in turn looked for customers which was not there yet.

Here's the working code:

var customer = function(viewModel){
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.dependentObservable(
        function(){
            return this.firstName() + " " + this.lastName();
        },
        this
    );
    this.gender = ko.observable('');
    this.diet = ko.observable('');
    this.primaryCustomer = ko.dependentObservable(
        function(){
            console.log(viewModel);
            return viewModel.customers.indexOf(this) == 0;
        },
        this
    );
    this.email = ko.observable('');
}

var viewModel = {
    customers: ko.observableArray(),
    removeCustomer: function(customer){
        this.customers.remove(customer);
    }
}
viewModel.customers.push(new customer(viewModel));
viewModel.addCustomer = function(){
        viewModel.customers.push(new customer(viewModel));
}

ko.applyBindings(viewModel);

本文标签： javascriptKnockout JSviewModel accessStack Overflow