Question

I’m new to KnockoutJs and I’m trying to use it with ASP.net webforms in a .ascx.

JsFiddle

The View

<table border="1" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <input type="button" data-bind="click: addNewRow" style="-moz-border-bottom-colors: blue" value="Add More Lines" />
        <input type="button" data-bind="click: addToCart" style="-moz-border-bottom-colors: blue" value="Add Items to Cart" />
    </td>
</tr>
<tr>
    <th>Product Number</th>
    <th>Description</th>
    <th>Quantity</th>
</tr>
<tbody data-bind="foreach: quickEntries">
    <tr>
        <td>
            <input data-bind="text: $data.ItemPartNumb(), onkeyup: showValue" class="ItemPartNum" height="100" width="500" /> 
        </td>
        <td>
            <input data-bind="text: $data.ItemDescription()" class="ItemDescr" height="100" width="500" />
        </td>
        <td>
            <input data-bind="text: $data.ItemQuanties()" class="ItemQuan" height="100" width="500" />
        </td>
    </tr>
</tbody>

The ViewModel

<script type="text/javascript">

var QuickEntry = function (_itemPartNumb, _itemDescription, _itemQuanities) {
    this.ItemPartNumb = ko.observable(_itemPartNumb);
    this.ItemDescription = ko.observable(_itemDescription);
    this.ItemQuanties = ko.observable(_itemQuanities);
};

function QuickEntriesViewModel() {

    var self = this;
    self.quickEntries = ko.observableArray([]);

    for (var i = 0; i < 10; i++) {
        self.quickEntries.push(new QuickEntry('Bob','Jack','Steve'));            
    }

    self.addNewRow = function() {
        self.quickEntries.push(new QuickEntry());
    };

    self.showValue = function(quickEntry) {
        alert(quickEntry.ItemPartNumb); //Nothing show
    };

    self.addToCart = function () {
        //Error here. How do i access the obserablearray?
        alert(self.quickEntries.length);
    };

};

//This is where you bind the ViewModel
ko.applyBindings(new QuickEntriesViewModel());

The web page will started out with 10 empty QuickEntry and user can add more line. It created a table for me with 10 empty rows. After user enter some info into the table such as item part number, description…etc. I’ll take those info and call web api POST method. When I try to accsee the quickEntries observablesarray. I got nothing/undefined and when I try onkeyup. There is no pop-up to show me the new value.

Isn’t element bounded to a observable will auto update its value? How do I get the observable array values within the ViewModel once its value is changed?

Thanks

Answer 1

self.quickEntries()

Will return the underlying array with all its glorious data