How to display a property in JavaScript object using Knockoutjs?

Question

I am new to Knockoutjs and JavaScript, and need some advice.

In my HTML (View) page, I am trying to show a text property from my Javascript object (Model), which looks something like:

var object = function() {
   this.text = "blah blah blah";
}

In my Object's ViewModel, I have this:

var objectViewModel= function (object) {
   var content = ko.observable(object); // or is it object.text() ?

   self.section = function() {
      return content.text; //or is it content ?
   }
}

And in my view, I have this:

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

My main question is how do I make the HTML show a model's property (the text) via viewmodel? I commented in my other questions, and would like some help.

Thanks in advance!

Answer 1

So I'd recommend this post as a good read.

To answer both of the additional commented questions: It all depends on what you passed as the parameter. That important bit of information would be provided when you instantiate your viewmodel, which you left out.

As specified, you'll need to ko.applyBindings(new objectViewModel(new object())). Secondly, you have self, where did it come from? Make it this or declare var self = this; or provide the rest of the code from which that variable is coming from.

Next, from within the section function you need to "read" your content observable:

return content().text

Finally, in your view you need to execute section:

<span data-bind="text:section()"></span>

---

As an additional consideration, you could make section a computed observable with a dependency on content.

this.section = ko.computed(function() {
  return content().text;
})

which removes the need to execute in the view. Check out this fiddle with two different scenarios depicted.