0

I'm taking my first steps with Knockout.js to make a (rather complex) form to calculate intrests on unpaid invoices, keeping partial payments, costs and contractual penalties in mind.

The calculations will be processed in PHP, as I'm more experienced in PHP then in JS. Knockout is handling the dynamics of adding new form fields, making the form flexible to use in even the most complex situations.

To be able to extract the data correctly, I will be serving three multi dimensional arrays via post to PHP:

  • invoice[$i][name] / invoice[$i][amount] / invoice[$i][date] / ...
  • payment[$j][name] / ...
  • cost[$k][name] / ...

The problem that I cannot seem to solve in JS is that a new form element should be generated by Knockout.js and that a unique number should be assignable with (I presume)

data-bind="attr:{name: someFunctionToGiveUniqueName}"

I've looked into the uniqueName-binding, but I need to have three uniqueNames and I should be able to customize the resulting name to keep the data structured.

This is my viewModel (and it works, except for the not-so-unique-naming-of-inputfields):

        <script type="text/javascript">

        // Overall viewmodel
        function ViewModel() {
            var self = this;

            // Data
            self.Hoofdsom   = ko.observableArray();
            self.Betaling   = ko.observableArray();
            self.Kost       = ko.observableArray();

            self.hsBeschr   = ko.observable();
            self.hsBedrag   = ko.observable();
            self.hsVerval   = ko.observable();

            self.hsIntr     = ko.observable();
            self.hsIntrType = ko.observable();

            self.hsSchadeType = ko.observable();
            self.hsSchadePerc = ko.observable(10);
            self.hsSchadeMin = ko.observable(0);
            self.hsSchadeMax = ko.observable(1500);

            // Initial State
            self.Hoofdsom.push("new");

            // Operations
            self.addHoofdsom = function() {
                self.Hoofdsom.push(self.Hoofdsom().length);
            }
            self.remHoofdsom = function(hfd){
                self.Hoofdsom.remove(hfd);
            }
            self.addBetaling = function() {
                self.Betaling.push(self.Betaling().length);
            }
            self.remBetaling = function(bet){
                self.Betaling.remove(bet);
            }
            self.addKost = function() {
                self.Kost.push(self.Kost().length);
            }
            self.remKost = function(kos){
                self.Kost.remove(kos);
            }
        }

        // Apply bindings
        ko.applyBindings(new ViewModel());

    </script>

1 Answer 1

0

I don't know if I understand You correctly, but take a look how "uniqueName" binding if defined here and make your own binding similar to this - shouldn't be too difficult - see the docs.

Other unique value is timestamp - take a look at this jsfiddle I've made for You - uniqName function.

Good luck :)

2
  • Thank you for your answer. It might be the way to go, but it needs some tweaking: I have created three unique bindingHandlers, but they are indeed unique every time they are applied. In my form, I want to make 3 groups of data, each one of them in one array. So, can I store the element.name-value in a variable that I can call with the attr-binding? That way I could use the uniqueName-binding in the first formfield and the attr-binding in the other formfields that I want to group in the same array... I have made a jsFiddle to show my code so far: jsfiddle.net/zenlord/WUDdG
    – zenlord
    May 8, 2012 at 6:52
  • I have struggled somewhat with this problem, and with the updated Knockout (v2.1.0), this is easily addressed through the index()-var that is created for every foreach-item...
    – zenlord
    May 22, 2012 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.