Archief - Knockout.js model relaties

<ul class="berichten" data-bind="foreach: blogItems, visible: blogItems().length > 0">
            <li>
				<div class="wrapper">                
                	<div class="titelBlok">
	                    <span data-bind="text: administrator.volledigeNaam"></span>
                        <h5 class="titel" data-bind="text: titel"></h5>
                        <a class="delete" href="#" data-bind="click: $root.removeBlogItem">verwijder</a>                  
                    </div>
                    
                    <div data-bind="html: inhoud" class="inhoud"></div>                    
                </div>
            </li>
        </ul>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
	
});

function BlogItem(data) {
	this.id = data.id;
	this.titel = ko.observable(data.titel);
	this.inhoud = ko.observable(data.inhoud);	
	//this.id_administrators = ko.observable(data.id_administrators);
	this.administrator = new Administrator(data.administrator);
	this.comments = ko.observableArray([]);
}

function Comment(data) {
	this.comment = ko.observable(data.comment);
}

function Administrator(data) {
	this.id = data.id;
	this.voornaam = ko.observable(data.voornaam);
	this.naam = ko.observable(data.naam);	
	this.email = ko.observable(data.email);		
	this.volledigeNaam = ko.computed(function() {
		return this.voornaam() + ' ' + this.naam();
	}, this);	
}

/* 
knockout.js nested object
http://jsfiddle.net/8k6pj/3/
*/
function overviewVM() {
	var self = this;
	self.blogItems = ko.observableArray([]);
	self.id = ko.observable();
	self.titel = ko.observable();	
	self.titel = ko.observable();
	self.inhoud = ko.observable();	
	//self.id_administrators = ko.observable();
		
	self.addBlogItem = function() {
		//var blogItem = new BlogItem({ titel: this.titel(), inhoud: this.inhoud(), id_administrators: 1 });
		var admin = new Administrator({'id': 1, 'voornaam': 'davidee' });
		
		var blogItem = new BlogItem({ titel: this.titel(), inhoud: this.inhoud(), administrator: admin  });
		//alert(blogItem.id_administrators());
		$.ajax('/blog/index.php?page=overview&action=addBlogItem',  {
			data: {blogItem: blogItem},
			//data: { titel: 'david' },
			type: 'post',
			success: function(result) {
				//alert(result);
				alert(blogItem.administrator.id());
				self.blogItems.push(blogItem);	
				self.sortOverview();
			},
			error: function(result) {
				//alert(result);
				//alert('error');
			},
		});
	}
		
	self.removeBlogItem = function(blogItem) {
		var blogItem = blogItem;
		//alert(blogItem.administrator);
		//console.log(blogItem.administrator);
		//return false;
		console.log(blogItem);
		
		$.getJSON('/blog/index.php?page=overview&action=delBlogItem', {
			data: {blogItem: blogItem },
			type: 'post',
			success: function(result) {
				//loadOverview();
				//alert(result);
				self.blogItems.destroy(blogItem);
			},
			error: function(result) {
				/*
				alert(result);
				alert('error');
				*/
			},
		});
		
	}
	
	self.blogItems.subscribe(function() {
		//self.sort(sortBlogItems);
		//sortOverview();		
	});
		
	this.loadOverview = function() {
		$.getJSON('/blog/index.php?page=overview&action=overview', function (allData) {
			var mapped = $.map(allData, function(item) {
				console.log(item);
				
				var blogItem = new BlogItem(item);
				blogItem.administrator = item.administrator;
				
				comment = new Comment({ 'comment': 'testcomment' });
				blogItem.comments.push(comment);
				
				return blogItem;
			});
			console.log(mapped);
			
			//mapped.sort(sortBlogItems);		
			self.blogItems(mapped);
			self.sortOverview();
		});		
	}
		
	this.sortOverview = function() {
		this.blogItems.sort(function(left, right) { 
			var aName = left.titel().toLowerCase();
			var bName = right.titel().toLowerCase();
			return aName == bName ? 0 : (aName < bName ? -1 : 1) 
		});
	}
	
	self.loadOverview();
}

//ko.applyBindings(new overviewVM());
var overviewVM = new overviewVM();
ko.applyBindings(overviewVM);
/* ]]> */
</script>