Dependency Injection in JavaScript / Knockout.js

Question

My programming experience is primarily in PHP, JavaScript and a bit of Python. I've seen the term "dependency injection" thrown around quite a bit and I've done some searching, but I'm still a bit confused. This seems to be a highly rated post, but I'm still not satisfied (either that or I'm just hopeless)

The example the accepted post uses is ....

public SomeClass (MyClass myObject) {
    this.myObject = myObject;
}

I've used knockout.js a bit, and I've noticed similar scenarios for setting object values. Would passing arguments from the ReservationsViewModel to the SeatReservation function to set the object be considered dependency injection? I commented the two lines that I'm wondering about.

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    self.formattedPrice = ko.computed(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });    
}


function ReservationsViewModel() {
    var self = this;

    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    self.seats = ko.observableArray([
        //dependency injection?????
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);

    self.totalSurcharge = ko.computed(function() {
       var total = 0;
       for (var i = 0; i < self.seats().length; i++)
           total += self.seats()[i].meal().price;
       return total;
    });    

    self.addSeat = function() {
        //dependency injection?????
        self.seats.push(new SeatReservation("", self.availableMeals[0]));
    }
}

Is it considered dependency injection when passing arguments to the SeatReservation function to set the "new SeatReservation" object's data?

If it's not dependency injection, is there any specific term for the way these objects are being set?

score 3 · Accepted Answer · answered Jul 13 '14 at 21:53

3

No, true DI requires inversion of control, you should inject the SeatReservation type in the ReservationsViewModel

doing

function ReservationsViewModel(seatReservation) {
    ...
    self.seats = ko.observableArray([       
        new seatReservation("Steve", self.availableMeals[0]),
        new seatReservation("Bert", self.availableMeals[0])
    ]);
}

would be more correct. You should also use AMD to inject the dependency

answered Jul 13 '14 at 21:53

Anders

16,726
9
66
132

What function would be passing the seatReservation as an argument to the ReservationsViewModel? Would it be an argument in the function call from SeatReservation? – user3476345 Jul 14 '14 at 15:04
It would be the `SeatReservation` function you have defined first in your question. – Anders Jul 14 '14 at 19:29
why should I use `AMD`? Do you mean `require.js` ? – hellboy Dec 30 '16 at 10:57
Asynchronous Module Definition, there are a bunch, require.js is one – Anders Dec 31 '16 at 00:11

score 0 · Answer 2 · answered Jul 14 '14 at 20:45

Would passing arguments from the ReservationsViewModel to the SeatReservation function to set the object be considered dependency injection?

No.

Is it considered dependency injection when passing arguments to the SeatReservation function to set the "new SeatReservation" object's data?

No.

If it's not dependency injection, is there any specific term for the way these objects are being set?

This is more like instantiating a class in JavaScript. In this case SeatReservation is the class with a "constructor" that requires 2 arguments.

Dependency Injection in JavaScript / Knockout.js

2 Answers2