CODEWITHSUNDEEP
javascriptdata-bindingknockout.js
codingbiz
codingbiz

Reputation: 26386

Declaring ViewModel in two approaches

Reading knockoutJs tutorial and couldn't make this to work. On the first page, the first approach was used and on the second page the second approach was used to create a model. But the second approach was not working. What could be the problem?

First Approach

var AppViewModel {
    this.firstName = 'Bob',
    this.lastName = 'Smith'
};

Second Approach

function AppViewModel() {
    this.firstName = 'Bob';
    this.lastName = 'Smith';
}

Html portion is below:

<body>

  <span data-bind="text: firstName"></span>



  <script type="text/javascript">
      ko.applyBindings(AppViewModel);
  </script>
</body>

This works for the first approach but the second approach throws error:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: firstName is not defined; Bindings value: text: firstName

Upvotes: 0

Views: 56

Answers (1)

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16465

In the first approach you defined an object. In the second approach you defined a class' constructor so you have to create an instance of the class using new keyword:

<body>
  <span data-bind="text: firstName"></span>

  <script type="text/javascript">
      ko.applyBindings(new AppViewModel());
  </script>
</body>

Upvotes: 4

Related Questions