CODEWITHSUNDEEP
javascriptmvvmknockout.js
Óscar
Óscar

Reputation: 351

Proper way of dealing with templates and views in Knockout.js

I have this fiddle with the following view:

<ul id="modules">
    <li id="modulePersonal" data-bind="template: 'personalDataTemplate'"></li>
    <li id="moduleAccounts" data-bind="template: 'accountsDataTemplate'"></li>
</ul>

<script type="text/x-jquery-tmpl" id="personalDataTemplate">
    <h3 class="klavikaBold">Your Details</h3>
    <div class="content">
        {{if loggedIn}}
        <p>This is what you've been telling us:</p>
        <dl class="pairDefinition">
            <dt>Name</dt>
            <dd>${name}</dd>
            <dt>Gender</dt>
            <dd>${gender}</dd>
            <dt>Age</dt>
            <dd>${age}</dd>
            <dt>Country</dt>
            <dd>${country}</dd>
        </dl>
    </div>
    {{else}}
    <p>Hey, you Alpha male! Come here
        and give us all of your personal
        data! We promise we won't give it
        for free to anybody!</p>
    {{/if}}    
</div>
</script>
<script type="text/x-jquery-tmpl" id="accountsDataTemplate">  
    <h3>Your accounts</h3>
    <div class="content">
        <p> There are 2 messages from Yahoo, 1 from Lumosity and 5 from Tweetland</p>
        <ul class="listSeparated line">
            <li>
                <dl class="pairDefinition">
                    <dt>Yahoo</dt>
                    <dd><a href="#">Account Details</a></dd>
                    <dt>Email</dt>
                    <dd>[email protected]</dd>
                </dl>
            </li>
            <li>
                <dl class="pairDefinition">
                    <dt>Lumosity</dt>
                    <dd><a href="#">Account Details</a></dd>
                    <dt>Username</dt>
                    <dd>ilovetheiradds</dd>
                </dl>
            </li>
            <li>
                <dl class="pairDefinition">
                    <dt>Tweet Land</dt>
                    <dd><a href="#">Account Details</a></dd>
                    <dt>Username</dt>
                    <dd>costaricangamer</dd>
                    <dt>Games</dt>
                    <dd>Lovecity, CarRace, Unit</dd>
                </dl>
            </li>
        </ul>
    </div>
</script>

And this code:

(function($) {

    var userDetails = {
        "name": "Óscar Acuña",
        "country": "Costa Rica",
        "province": "San José",
        "district": "San Andrés",
        "zip": "123456",
        "birthday": "12/12/1990",
        "gender": "Male",
        "hotnessIndex": "6.8",
        "smell": "Nice if not sweaty"
    };


    // Overall viewmodel for this screen, along with initial state
    var viewModel = {
        loggedIn : "yeah",
        name: userDetails.name,
        country: userDetails.country,
        province: userDetails.province,
        gender: userDetails.gender,
        age: getAgeSortOf(userDetails.birthday) + " years old"
    };

    ko.applyBindings(viewModel);

    function getAgeSortOf(birthday) {
        return new Date().getFullYear() - new Date(birthday).getFullYear();

    }

})(jQuery);

Please note I elaborated the template just for the first li.

Let's imagine there might be up to 10 lis, each containing different data (so the idea of them sharing a single view is unlikely). The data comes from a vendor, so they can change the names and order when they see fit.

You see one template stores the different states it might have. My question is, do you think that's a secure approach? After all, the real data is being feed by an Ajax request (here represented by a hard-coded JSON userDetails).

In addition, which is the most flexible way of setting variables that determine flow? (for example loggedIn : "yeah", if you remove it, the other view is displayed). Here I'm coding them right in the viewModel, but they can actually be coded outside... Is this the right approach or I'm missusing knockout? I've never dealt with a MVVM framework in front end so I might be a little confused.

Upvotes: 0

Views: 248

Answers (1)

craigb
craigb

Reputation: 16907

It looks like you want to be using a ko.observableArray() for holding your user details. If I'm understanding correctly you want multiple li elements - one for each UserDetails that is returned from your ajax call. Your view model would look like this:

viewModel = {
  loggedIn: ko.observable(true),
  users: ko.observableArray([])
}

You then add each object to the array by calling viewModel.users.push(newUser)

the template to enumerate the users:

<ul data-bind="template:{name:'userTmpl', foreach:users}"></ul>

Upvotes: 1

Related Questions