CODEWITHSUNDEEP
knockout.jskendo-ui
user1234
user1234

Reputation: 35

Multiple view models single view in knockout js

I am trying to use multiple view models and a single view in knockout js to reduce the comlexity. But it only binds to one view. i am also using kendo UI widgets. THis is the code that i wrote:

    $(document).ready(function() {

    $("#menu").kendoMenu();
    $("#grid").kendoGrid();
    $("#datepicker").kendoDatePicker();


    $("#closingDetails").click(function() {

        $("#myDiv").load("closingDetails.html");

    });

    $("#loanFees").click(function() {

        $("#myDiv").load("loanFees.html");

    });

    $("#borrower").click(function() {

        $("#myDiv").load("borrower.html");


    });


            function AppViewModel() {
                var self = this;

                            self.isOpen = ko.observable(false);
                            self.tipText = "self is a window tooltip!";

                            self.resetMe = function() {

                            }
                }



            function closingDetailsViewModel() {

                var self = this;
                self.fullname = ko.observable("");
                self.address = ko.observable("");
                self.zip = ko.observable("");
                self.settlementDate = ko.observable();
                self.cityList = ko.observableArray(["bangalore", "noida", "pune", "chennai"]);
                self.city = ko.observable();

            }






            ko.applyBindings(new AppViewModel());
            ko.applyBindings(new closingDetailsViewModel());

});

my main.html

<!DOCTYPE html>  
<html>  
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

</head> 
<body>  

    <header>  
        <h1>Welcome Customer</h1>  

        <button type="button"  data-bind="click: isOpen" class="css3button">Logout</button>
        <div id ="window" data-bind="kendoWindow: { isOpen: isOpen, visible: false }">
             <p data-bind="kendoTooltip: { content: tipText }">  Window Content</p>
        </div>



    <nav id="example" class="k-content">  
        <div id="mortgage">
            <ul id="menu">
                <li>
                    Closing Info
                    <ul>
                        <li id="closingDetails">
                           <a > Closing Details</a>

                        </li>
                        <li >
                            Related Parties  
                        </li>

                    </ul>
                </li>
                <li>
                    Loan Info
                    <ul>
                        <li id="loanFees">
                            Loan fees                           
                        </li>

            </ul>

    </nav>  
</header>
    <section id= "myDiv">
    </section>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/knockout-2.2.1.js"></script>
    <script src="js/knockout-kendo.min.js"></script>
    <script src="viewModel/script.js"></script>
</body>  
</html>

here is the closingDetails.html code: 

<html>  
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

</head> 
<body> 

 <section id="closingDetailsDiv"  class="forms">  


                <h3>Closing Details</h3>

                <ul>
                    <li>
                        <label for="fullname" class="required">Your Name : </label>
                        <input data-bind="value: fullname" type="text" id="fullname"  name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Please enter {0}" ></input>
                    </li>

                    <li>
                        <label for="address" class="required">Address :</label>
                        <input data-bind="value: address" type="text" id="address" name="address" class="k-textbox" placeholder="Address" required validationMessage="Please enter {0}" />
                    </li>

                    <li>
                        <label for="zip" class="required">Zip :</label>
                        <input data-bind="value: zip" type="zip" id="zip" name="zip" class="k-textbox" pattern="\d{6}" placeholder="Please enter a six digit zip code" required validationMessage="Please enter a six digit zip code"/>
                    </li>

                    <li>
                        <label  for="city">City :</label>
                        <input data-bind="kendoDropDownList: { data: cityList, value: city }" />
                        <span class="k-invalid-msg" data-for="city"></span>
                    </li>

                    <li>
                        <div>
                            <label  for="settlementDate" >Settlement date :</label>
                            <input id="settlementDate" data-bind="kendoDatePicker: settlementDate" value="10/10/2011" style="width:150px;" />
                        </div>
                    </li>

                </ul>

                    <br>

                <hr style="color: #505050 ; background: #505050 ; width: 100%; height: 2px;">

                    <br>

                <ul>
                    <li>Full name: <strong data-bind="text: fullname"></strong></li>
                    <li>Address: <strong data-bind="text: address"></strong></li> 
                    <li>Zip: <strong data-bind="text: zip"></strong></li>
                    <li>Settlement date: <strong data-bind="text: settlementDate"></strong></li>
                    <li>City: <strong data-bind="text: city"> </strong></li>
                </ul>


    </section> 
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
        <script src="js/knockout-2.2.1.js"></script>
        <script src="js/knockout-kendo.min.js"></script>
        <script src="viewModel/script.js"></script>
        <script src="viewModel/closingDetailsScript.js"></script>
</body>  
</html>

only AppViewModel values are working. can someone help me? thanks in advance

Upvotes: 1

Views: 851

Answers (2)

Samprity Kashyap
Samprity Kashyap

Reputation: 158

Remove the script.js from closing details.html.. That should work.

Upvotes: 1

marvc1
marvc1

Reputation: 3689

For multiple view models on the same page specifying the element to bind to is the best way to avoid issues.

ko.applyBindings(new AppViewModel(), document.getElementById('aContainer'));
ko.applyBindings(new closingDetailsViewModel(), document.getElementById('anotherContainer'));

Upvotes: 0

Related Questions