1 Востаннє редагувалося truesupport (01.12.2013 02:59:22)

Тема: knockout and other front-end model binding frameworks

завтра залік зробіть за мене терміново !!!!11 ось завдання (копіпаста з ворда)
:)

Насправді я жартую, мені недавно нагадали що я студент, і  що мені як студенту треба робити якісь завдання  %)
Ну якщо коротко то це має бути якийсь сайт. І вирішив я поєднати приємне з корисним. І роботу зробити і щось нове для себе повчити.  Вирішив зробити таку штуку, не знаю як правильно називається, зі сторони сервера є методи які повертають дані в JSON форматі а на стороні клієнта вся логіка по відображенню цих даних. Хотілось б використати фрейморк по типу angular.js knockout.js blackbone.js. Зупинився на другому але в мене зовсім не має по ньому досвіду, впринципі як і по іншим.

Що я хочу зробити, на даному етапі. Я хочу зробити підгрузку контенту так як вконтакті, фейсбуці і інших цікавих сайтах. Тобто я хочу щоб коли я доскролював до кінця сторінки в мене на стороні клієнта відіслало запит на сервер який повертає аякс з даними і потім цей самий скрипт (який і запитував дані)  з тими даними щось робив. Хотілось щоб це було як умога більше автоматизовано. Якщо ви маєте якісь поради як це правильно зробити, або будь які ідеї  напишіть їх у коментарях. Я напевно вставлю мій говнокод щоб мати хоч якийсь матеріал для розмов, але я ще нічого не починав і я можу запросто все переписати з 0.


@Master['layout']

@Section['Content']
<style type="text/css">
    .car-container {
        /*display: table-cell;*/
        width: 400px;
        border-radius: 6px;
        background-color: #c0c0c0;
        padding: 20px;
        margin: 20px;
        font-size: 16px;
        display: inline-block;
    }

    .content {
        width: 1200px;
        margin: 0 auto;
    }

    .car-table tr td{
        padding: 5px 25px;
    }
</style>


<div class="content">
    <a href="#" id="btnGoToNext" data-bind="click: nextPage">Next Page</a>
    <input type="hidden" data-bind="value: page" value="1" id="pageNumber"/>
    <div data-bind="foreach: cars">
        <div class="car-container">
            <table class="car-table">
                <tr>
                    <td>Car ID:</td>
                    <td><span data-bind="text: ID"></span></td>
                </tr>
                <tr>
                    <td>Car Model:</td>
                    <td><input type="text" data-bind="value: Model"></td>
                </tr>
                <tr>
                    <td>Car Make:</td>
                    <td><input type="text" data-bind="value: Make"></input></td>
                </tr>
                <tr>
                    <td>Published:</td>
                    <td><input type="text" data-bind="value: new Date(parseInt(Year.substr(6)))"></input></td>
                </tr>
            </table>
        </div>
        
    </div>
    
    

</div>


<script>

    function jPost(url, data, success) {
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: success,
            dataType: "json",
            contentTye: "application/json"
        });
    }

    function Car(data) {
        this.ID = data.ID;
        this.Make = data.Make;
        this.Model = data.Model;
        this.Year = data.Year;
    }

    function CarsViewModel() {
        var self = this;
        self.cars = ko.observableArray([]);
        self.page = ko.observable(1);

        self.nextPage = function() {
            self.page(self.page() + 1);
        };

        console.log(self.page());
        
        $.post('/Cars', { pageNumber: self.page() }, function(data) {
            var mappedData = $.map(data, function(item) { return new Car(item); });
            self.cars(mappedData);
        });
    }    


    $(function () {
        ko.applyBindings(CarsViewModel());

        //$('#btnGoToNext').click(function () {
        //    var $currentPageControl = $('#pageNumber');
        //    var currentPage = parseInt($($currentPageControl).val());
        //    $($currentPageControl).val(currentPage + 1);
        //    console.log($($currentPageControl).val());
            
            


        //});
    });
    
</script>
@EndSection

наскільки я памятаю цей код відправляє на сервер правильні запити  отримує правильну відповідь але не оновлює модельку. Напевно саме найбільше питання в мене це як правильно будувати view model щоб було легко працювати з аяксом.