Question

I’m having a problem using knockout and a form and getting bindings to apply without throwing errors.

I would like to split the logic for the form into several view models but I’m getting errors with bindings in bars and foos not being found when I attempt to bind foobar

I’ve tried to display this in the example below.

Is there a way to achieve the desired behaviour? Is there a way to say combine all the bindings from the three view models then assign them to foobar?

bars_observable is a ko.observable created in the contructor of barViewModel.

<div id="foobar">
    <form data-bind="with: newFooBar, submit: submitFooBar">
        <section id="bars">
            <div data-bind="text: bars_observable"></div>
        </section>

        <section id="foos">
            foo stuff
        </section>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        var foobarViewModel, fooViewModel, barViewModel;

        foobarViewModel = new ViewModels.FoobarViewModel({
            fooViewModel: new ViewModels.FooViewModel({}),
            barViewModel: new ViewModels.BarViewModel({})
        });

        ko.applyBindings(foobarViewModel, document.getElementById("foobar"));
    });  
</script>

The error would be

"Uncaught Error: Unable to parse bindings. Message: ReferenceError: bars_observable is not defined;"

Answer 1

I would recommend to put fooViewModel and barViewModel objects into FoobarViewModel. In this case you have to call ko.applyBindings only once.

<div id="foobar">
    <form data-bind="with: newFooBar, submit: submitFooBar">
        <section id="bars" data-bind="with: barViewModel">
            <div data-bind="text: bars_observable"></div>
        </section>

        <section id="foos" data-bind="with: forViewModel">
            foo stuff
        </section>
    </form>
</div>


<script type="text/javascript">
    $(function () {
        var foobarViewModel = new ViewModels.FoobarViewModel({});
        ko.applyBindings(foobarViewModel, document.getElementById("foobar"));
    });  

    function ViewModels.FoobarViewModel() {
         var self = this;
         self.fooViewModel = new ViewModels.FooViewModel({});
         self.barViewModel = new ViewModels.BarViewModel({});
         ...
    }
</script>