Правильный способ работы с шаблонами и представлениями в Knockout.js - PullRequest
0 голосов
/ 03 сентября 2011

У меня есть эта скрипка со следующим видом:

<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>blabisbla@yahoo.com</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>

И этот код:

(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);

Обратите внимание, что я разработал шаблон только для первого li.

Давайте представим, что может быть до 10 li с, каждый из которых содержит разные данные (поэтому идея их совместного использования в одном представлении маловероятна). Данные поступают от поставщика, поэтому они могут изменить имена и порядок, когда сочтут нужным.

Вы видите, что один шаблон хранит различные состояния, которые он может иметь. Мой вопрос, как вы думаете, это безопасный подход? В конце концов, реальные данные передаются по запросу Ajax (здесь представлены жестко закодированными JSON userDetails).

Кроме того, какой самый гибкий способ задания переменных, определяющих поток? (например, loggedIn: «да», если вы удалите его, отобразится другой вид). Здесь я кодирую их прямо в viewModel, но на самом деле их можно кодировать снаружи ... Это правильный подход или я не использую нокаут? Я никогда не имел дело с фреймворком MVVM во внешнем интерфейсе, поэтому я могу быть немного смущен.

1 Ответ

1 голос
/ 05 ноября 2011

Похоже, вы хотите использовать ko.observableArray() для хранения ваших данных пользователя.Если я правильно понимаю, вам нужно несколько li элементов - по одному для каждого UserDetails, который возвращается из вашего вызова ajax.Ваша модель представления будет выглядеть так:

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

Затем вы добавляете каждый объект в массив, вызывая viewModel.users.push(newUser)

шаблон для перечисления пользователей:

<ul data-bind="template:{name:'userTmpl', foreach:users}"></ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...