CODEWITHSUNDEEP
javascriptmvvmknockout.js
joh04667
joh04667

Reputation: 7427

Best practices in organizing Knockout.JS viewmodel properties - object literal or added later?

I am doing a code challenge using Knockout.JS. It's pretty neat so far.

I have a couple simple questions on best practices, if someone could help me out. I'm trying to imagine what using this library will be like at a large scale but it's difficult.

When declaring the viewModel, is it usually better to only declare observables in the model when it's declared and tack on utility functions later? Or should functions integral to the viewModel be declared at the same time?

So this: 

var viewModel = {
    newItemName: ko.observable(),
    newItemPrice: ko.observable(0),
    newItemQuantity: ko.observable(1)
};

viewModel.incrementUp = function() {
    var value = this.quantity() + 1;
    this.quantity(value);
};
// more functions here

ko.applyBindings(viewModel);

versus. this: 

var viewModel = {
    newItemName: ko.observable(),
    newItemPrice: ko.observable(0),
    newItemQuantity: ko.observable(1),

    addNewItem: function () {
        var newItem = {
            name: capitalizeFirst(this.newItemName()),
            price: this.newItemPrice(),
            quantity: ko.observable(this.newItemQuantity())
            };
        }
    };

viewModel.something = ko.computed(function() {
     return 'do stuff'
});

ko.applyBindings(viewModel);

Or do people normally just add on computed values after? I don't know if people would appreciate monolithic viewModel literals or if there's a standard to how this should be approached. I am used to Angular having 'the Angular way' to do everything, haha.

Sorry for being so pedantic. As I said, it's a code challenge and I want to impress...plus I am finding very difficult to find examples of Knockout apps.

Thanks!

Upvotes: 0

Views: 1717

Answers (2)

AndrewP
AndrewP

Reputation: 1618

It depends on the situation.

For me, I like to keep anything that's strictly to do with the view model in the model, and then if I need specific functionality added for a specific use of the view model, I can add it later.

This means I can create a reusable model/view model, and taylor it to my specific needs if/when required.

Upvotes: 0

Jeroen
Jeroen

Reputation: 63719

Use neither option, except for things like small tests and repros. There are better options.

PS. Note that your second example is even wrong, the this keyword inside addNewItem will not refer to the view model!

The full answer to the underlying question would be way too broad for Stack Overflow. The underlying question is something like this:

How to create reusable code / View Models with proper encapsulation in Javascript?

Realize that you're asking a rather broad question, and accept the fact that you'd need to read / learn quite a bit before you can know the answer. I recommend starting by reading up on prototypal (also called "prototypical") and classical inheritance in Javascript, as well as the more modern class features of modern ECMA Script, Typescript, etc.

To leave you with a concrete tip for more easily creating view models with computeds, here's an example that uses "Constructor Functions", which will work in all modern (and some slightly older) browsers without extra libraries or transpilation steps:

function ViewModel() {
  // Keep a reference to the instance of the view
  // model, becauese "this" itself might behave in
  // unexpected ways within functions inside this
  // view model constructor function.
  var self = this;

  self.firstName = ko.observable("john");
  self.surname = ko.observable("doe");

  self.fullname = ko.computed(function() {
     return self.firstName() + " " + self.surname();
  });
}

// Use it like this:
var johndoe = new ViewModel();

It utilizes the self=this idiom as well as Constructor Functions (also a side-note recommendation in the KO docs).

Upvotes: 1

Related Questions