0

I'm attempting to create a reusable wizard control that will display a data entry form based around Knockout. Essentially the template will never really change but will be completely dynamic. I envision being able to do the following:

  • Define a simple model that contains a list of steps, essentially a step ID and maybe some logic on whether the step can be returned to once completed.
  • Each step should then have a collection of fields or input items to display. This really breaks down to an HTML label and input box.

I've put together my initial thinking/logic and come up with this. I'm having a problem with getting the fields to display. The step titles all render properly but my Fields collection is always empty. What am I missing?

Brent Pabst
  • 1,156
  • 1
  • 15
  • 37

1 Answers1

1

Interesting context. I couldn't get it to work in Fiddle at all but got it working locally. I changed 2 things - you need to explicitly close the span for the Title, and you need to test for the presence of Fields against each step object with an if, since not all steps have Fields. Like so:

        templateEngine.addTemplate("merlin_wizard", "\
            <div class=\"m-ui-wizard\">\
                <div class=\"m-ui-wizard-steps\" data-bind=\"foreach: steps\">\
                    <div class=\"m-ui-wizard-step\">\
                        <span data-bind=\"text: Title\"></span>\
                        <!-- ko if: $data.Fields -->\
                            <!-- ko foreach: Fields -->\
                                <span data-bind=\"text: Label\" />\
                            <!-- /ko -->\
                        <!-- /ko -->\
                    </div>\
                </div>\
            </div>");
Tom W Hall
  • 5,273
  • 4
  • 29
  • 35
  • Yes, I couldn't get it to work in Fiddle either, not sure why really. Either way I'll give you're suggestion a try here in a few. – Brent Pabst Jul 10 '12 at 12:10
  • This worked. Although I'm now stumped on another problem, actually passing in the viewModel and binding the model to form elements. I'll open another question and then reference it, if you don't mind taking a look. – Brent Pabst Jul 10 '12 at 12:48
  • Here is my follow-up question: http://stackoverflow.com/questions/11413947/pass-a-viewmodel-to-reusable-knockout-control – Brent Pabst Jul 10 '12 at 13:07