Retrieve values from dynamically created textbox on knockout + MVVM

Question

I am new to this knockout js and MVVM architecture. Am not able to retrieve dynamically created textbox values on button click event.

Code:HTML

   <div data-bind="foreach: cources">
      <input type="text" data-bind="value: textValue"/>
      <br>          
   </div>

 <input type="button" data-bind="click:retrieve" value="Value"/>

Code:js

function CourseViewModel(){
      textValue = ko.observable(''); 
}

var ViewModel= {
      cources : ko.observableArray([new CourseViewModel()]),
      retrieve: function()
      {
          var abc = $.parseJSON(ko.toJSON({ textValue: ViewModel.cources})); 
          alert(abc.textValue());
      }
}

ko.applyBindings(ViewModel);

Uncaught TypeError: object is not a function(index):35 ViewModel.retrieveknockout-min.js:59 (anonymous function) — sona, Dec 30 '14 at 10:55

score 0 · Accepted Answer · edited May 23 '17 at 12:28

There are probably a few different problems:

You need to check out how constructor functions work. The KO docs have some info on related subjects, as does Stack Overflow. If you want to reference ViewModel from inside a function called on such a ViewModel you could use for example the below pattern.
You expect abc to have a function called textValue, but that's after you have gone to-and-from JSON. JSON will not preserve functions like that.
Your course view model does not expose textValue externally. You need to export it, e.g. using the self idiom. See example below.
You have to change cources to cources(): it's an observableArray and to retrieve it's value you need to execute the observable.

var CourseViewModel = function() {
  var self = this;
  self.textValue = ko.observable('initial value');
};

var ViewModel = function() {
    var self = this;
    self.cources = ko.observableArray([new CourseViewModel()]);
    self.retrieve = function() {
        var abc = ko.toJSON({ textValue: self.cources() }); 
        alert(abc);
    }
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: cources">
  <input type="text" data-bind="value: textValue"/>
</div>
<input type="button" data-bind="click:retrieve" value="Value"/>

If you insist on staying away from constructor functions for ViewModel you could still do it, but you have to amend ViewModel with retrieve after you've instantiated with all properties you wish to use. Like this:

var CourseViewModel = function() {
  var self = this;
  self.textValue = ko.observable('initial value');
};

var viewModel = {
    cources: ko.observableArray([new CourseViewModel()])
};

viewModel.retrieve = function() {
    var abc = ko.toJSON({ textValue: viewModel.cources() }); 
    alert(abc);
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: cources">
  <input type="text" data-bind="value: textValue"/>
</div>
<input type="button" data-bind="click:retrieve" value="Value"/>

You should really go through the Knockout tutorials. It shouldn't take very long, and will quickly save you a lot of time struggling with this kind of problem.

Thanks for quick response but I still have problem, Error: Uncaught SyntaxError: Unexpected identifier — sona, Dec 30 '14 at 11:01

score 0 · Answer 2 · answered Dec 30 '14 at 11:13

0

In your code everything is fine instead of your bindings with the current object.You need to bind your data and functions with this like,

function CourseViewModel() {
    this.textValue = ko.observable('');
}
var ViewModel = function(){
    this.cources= ko.observableArray([new CourseViewModel()]);
    this.retrieve= function () {
        var abc = ko.toJSON({
            textValue: this.cources
        });
        alert(abc);
    }
}
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: cources">
    <input type="text" data-bind="value: textValue" />
    <br/>
</div>
<input type="button" data-bind="click:retrieve" value="Value" />

answered Dec 30 '14 at 11:13

Rohan Kumar

38,998
11
69
99

I got my mistake and that is, "this" keyword missed, thanks for spending time with this post – sona Dec 30 '14 at 11:21
I have another clarification, For loading single textbox dynamically "foreach"(data-bind) is correct or not. "
– sona Dec 30 '14 at 11:26
no, if the textbox is single then avoid using `foreach`. – Rohan Kumar Dec 30 '14 at 11:48

Retrieve values from dynamically created textbox on knockout + MVVM

2 Answers2