Question

I have several regions with repeatable content which is generated on the server-side. I use knockout-js to dynamically hide/show regions within areas. My markup is like the following:

<div>
  <input type="checkbox"  data-bind="checked: a1" />
  <div data-bind="visible: a1">region0</div>
</div>
<div>
    <input type="checkbox" data-bind="checked: a2" />
    <div data-bind="visible: a2">region1</div>
</div>
<script>
    var viewModel = {
        a1: ko.observable(false),
        a2: ko.observable(false)
    };
    ko.applyBindings(viewModel);
</script>

Lets say I have 10 such regions. Is there a more convenient/better way to achieve the same?
Lets say, that I explicitly do not want to use foreach binding and generate markup on the client (for site to be accessible with disabled js).

Is there any way to omit viewModel specification (part within script tags), since it feels to me that knockout could detect and auto-create fields for me?

P.S. I’m a JS-novice, so excuse me for simple questions 🙂

Answer 1

Is there any way to omit viewModel specification (part within script tags), since it feels to me that knockout could detect and auto-create fields for me?

Although I prefer Knockout personally, you might want to take a look at Angular. Angular does automatically create view model properties as this example shows.