Тема: 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 щоб було легко працювати з аяксом.