I am attempting to create an array of contract line items (CLINs) that will be displayed as individual div
elements below a header of general contract information.
I am able to get the normal observables to work, but it appears that the passing of the array via the constructor for the view model is not creating any part of the clins observable array.
I have a jsFiddle that illustrates my problem. What is strange to me is that the data-bind="text: clins.length()
on the HTML span tag does not even return zero, but instead renders nothing.
Is there anyway to enable debugging within a jsFiddle or should I see a warning/error?
If you want to detect and respond to changes of a collection of things, use an observableArray . This is useful in many scenarios where you're displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.
You should look at defining the object structure for each element of your array and then add elements of that type to your observable array. Once this is done, you will be able to do something like item. productQuantity(20) and the UI will update itself immediately. EDIT Added the function provided by the OP :).
To clear an observableArray you can set the value equal to an empty array.
Description. The KnockoutJS Observable sort() method sorts all items in the array. By default, items are sorted in an ascending order. For sorting an array in a descending order, use reverse() method on sorted array.
Errors from jsfiddle pages do get sent to your browser.
As for your error, try this:
<span data-bind="text: clins().length">
This turns the observableArray
into an array
and uses the array's length
property.
See the updated the jsfiddle as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With