How to access a particular element of dynamically updated knockout observableArray without using foreach

Question

Why am i able to access only one (ie 'member_A' ) property of a observableArray's Element with <input> of HTML.

I am trying to add new abc() object into observableArray "list_of_abc" on click of button "ADD To List of abc" and show the recently added object's properties (that are member_A and member_B ) in input boxes. My code does add new abc() object to observableArray "list_of_abc" but i am unable to display newly added object's members(that are "member_A" and "member_B" ) in input boxes of HTML .

ViewModel

     function abc(var1,var2)
    {
        this.member_A = ko.observable(var1);
        this.member_B = ko.observable(var2);
    }

    function Home()
    {
        this.list_of_abc = ko.observableArray();
        this.last_added_index = ko.observable();
        this.addTolist_of_abc = function()
                                {
                                    var len = this.list_of_abc().length;
                                    this.last_added_index(len);
                                    this.list_of_abc.push(new abc("Element"+len,len));      
                                };

    }

    ko.applyBindings(new Home());

HTML

 <div>
            <button data-bind = "click: addTolist_of_abc">ADD To list_of_abc</button>
    </div>

<p>Last Added abc's object</p> <br>
member_A's value:  <input data-bind="value: list_of_abc()[$root.last_added_index()].member_A" />  <br>     
 member_B's value:   <input data-bind="value: list_of_abc()[$root.last_added_index()].member_B" />

Output http://jsfiddle.net/himanshudhiman/3r0g0wak/1/

In output, I am getting only first variable 'member_A' in input box. Second Input Box is Blank. Moreover, i have to click on "ADD To List of abc" button twice to get the member_A displayed in input box.

I wish to access and modify a particular abc object form list_of_abc observableArray, how could i do that with a given number as observableArray index.

So is there any way to access observableArray's element directly by using their index instead of looping through whole Array by putting foreach on observableArray.

Thanks.

Answer 1

It's not entirely clear what you want your code to do, so I guessed you wanted to be able to enter new items into a list. With that in mind, I added a newItem member to the viewmodel and bound its members to the input boxes. The addToList method copies from those values into a new element of saved items.

I added a foreach -bound div so you could see what's in the list. I also changed variable names to comply with JavaScript naming conventions, and changed the constructors into ordinary object-returning functions.

Update: I added a section which will allow you to edit an existing row by choosing its index. You can still add new elements, and the list of indexes will adjust accordingly.

 function abc(var1, var2) { var self = { member_A: ko.observable(var1), member_B: ko.observable(var2) }; return self; } function homeModel() { var self = { list: ko.observableArray([ abc('one', '1'), abc('two', '2') ]), newItem: abc('', ''), lastAdded: ko.observable(), addToList: function(item) { self.lastAdded(self.list().length); self.list.push(abc(self.newItem.member_A(), self.newItem.member_B())); }, editIndex: ko.observable(), listIndex: ko.computed({ read: function() { var result = [], len = self.list().length; for (var i = 0; i < len; ++i) { result.push(i); } return result; }, deferEvaluation: true }) }; return self; } ko.applyBindings(homeModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <button data-bind="click: addToList">ADD To List ofabc</button> </div> <input data-bind="value: newItem.member_A" /> <input data-bind="value: newItem.member_B" /> <div data-bind="foreach:list"> <span data-bind="text:member_A"></span>, <span data-bind="text:member_B"></span> <br /> </div> <div>Index: <select data-bind="options:listIndex, value:editIndex"></select> <br /> <!-- ko if: list().length-1 >= editIndex() -->Editing <span data-bind="text:editIndex"></span> <input data-bind="value: list()[editIndex()].member_A" /> <input data-bind="value: list()[editIndex()].member_B" /> <!-- /ko --> </div>