you cannot apply bindings multiple times to the same element

joshua1 commented 9 years ago

@zhouzhoujie I am getting the above named error in my app. i am only calling applybinding once in the template in the rendered function. have you had an issue like this before?

zhouzhuojie commented 9 years ago

Hi @joshua1, I've updated a test, and I cannot reproduce your error. Can you give me more details?

Here's the commit: 2b14e9cb4e95bb595c80f6a37b705f7e58a47e99 and the test file: https://github.com/zhouzhuojie/knockout-client/blob/master/test.js#L16

joshua1 commented 9 years ago

Hi @zhouzhuojie here are two scenarios that produced the error. in my layout template, i have two templates embedded ({{>temp1}} ,{{> temp2}} ). This throws an error on page load. i had to take one out. secondly for the other template {{>temp1}} , this error occurs when a page is reloaded (e.g after sign in) where another template with binding is rendered in yield region. i do hope i am clear. i will post my layout template code below.

<template name="tplLanding">
    <div class="page-container" id="pageContainer">
        {{> status}}
        {{#if justLoaded}}
            {{> tplVideoBg}}
        {{else}}
            <div class="logo-brand header sidebar rows">
                <div class="logo">
                    <h1>
                        <a href="{{pathFor route='tplFlightMap'}}"><img src="/images/logo2.jpg" alt="Logo">
                            AJALA GO</a>
                    </h1>
                </div>

            </div>
            <div class="left side-menu">
                {{#if showFlight}}
                    {{> tplFlightBooking}}
                {{/if}}
                {{#if showAdmin}}
                    {{> tplAdminMenu}}
                {{/if}}
                {{#if showAgent}}
                    {{> tplAgentMenu}}
                {{/if}}
            </div>
            <div class="right content-page">
                {{>tplHeader}}
                <!-- main Body -->
                <div class="body content rows scroll-y" id="page-container">
                    {{> yield}}
                    <footer>
                        &#169; {{copyRight}}
                    </footer>
                </div>
            </div>
        {{/if}}
        <!--<div class="sales-widget alert alert-info alert-dismissable">-->
        <!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
        <!--<span><strong>Booking Questions?</strong> Contact Sales:</span>-->
        <!--<ul>-->
        <!--<li class="phone"><i class="fa fa-phone"></i> +234 (01) 791-1465</li>-->
        <!--<li class="email"><i class="fa fa-envelope"></i> <a href="mailto:sales@ajala.ng">sales@ajala.ng</a></li>-->
        <!--</ul>-->
        <!--</div>-->
        <!-- loading modal -->
        {{>tplWaitModal}}
    </div>
</template>

i had to change my visible binding here to ``` {{#if showFlight}} {{> tplFlightBooking}} {{/if}} {{#if showAdmin}} {{> tplAdminMenu}} {{/if}} {{#if showAgent}} {{> tplAgentMenu}} {{/if}}

to take care of the first case. the second case is the one i am experiencing

zhouzhuojie commented 9 years ago

Thanks, but how do you bind the knockout viewmodel to the HTML elements?

If you have two templates, you can wrap these two templates in two divs with different ids, then

ko.applyBindings(vm1, document.getElementById('id1'));
ko.applyBindings(vm2, document.getElementById('id2'));

There's a stackoverflow link for this: http://stackoverflow.com/questions/9293761/knockoutjs-multiple-viewmodels-in-a-single-view

Let me know if it works.

zhouzhuojie / knockout-client

you cannot apply bindings multiple times to the same element #2