Jump to content

Interactive Tutorial (knockoutjs)

Soma

By Soma,
in Dev Talk

 Share

Recommended Posts

Soma Hero Member

Soma

Posted
Posted

I'm currently trying/learning out knockoutjs. http://knockoutjs.com/. A while ago I tried backbonejs which is also very nice but more complicated than knockoutjs.

I found the tutorial kinda cool and just wanted to share here. Maybe something like this could be done for ProcessWire ;) Check it out: http://learn.knockoutjs.com/

To try it out and learn I started a Process Module for creating a bunch of pages. So far it's very nice and I will share very soon. Through not sure if it would be a to be officially released module or not.

It now looks like the screen. You can choose a parent page, then it will enable "add" button and provide templates that are allowed to use (regarding family setting) or all templates that can be used. After creating the set of pages the button "create pages" will be enabled and you can create them, once done you'll see a list with a link to the parent and the pages you created.

post-100-0-86525500-1352722882_thumb.png

  • Like 5
Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

I think knockout is the simplest to learn and understand. Haven't tried or looked at all others, but they look more complicated already by looking at them, and backbone can get really hard but it is depending on your level of confidence with JS a lot. It's often good to learn a simple one and with more experience maybe others become more clear. Knockout has this great tutorial which I quickly seem to grasp the idea and I think it really is a great tool. You don't have to think about updating stuff and dependecies and binding are rather simple once you get the hang of it. Still lot of things to discover and learn. I found the mail app example with http://sammyjs.org/ very convincing, which gave me the "ok I'll try it a little more".

Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

Thanks Soma. I think AngularJS looks pretty cool and examples are super simple: http://angularjs.org/ - that is also pretty neat introduction (just hover over the blue background code to get more information). Will definitely to take some time to examine more of these libraries.

Oh, and your (hopefully soon released!) module looks great!

Link to comment
Share on other sites
  • 10 months later...
Manol Sr. Member

Manol

Posted
Posted

Hello Apeisa.

    How do you do the routing with angular, for example?

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});
}]);

with ng-view

<html lang="en" ng-app="phonecat">
<head>
...
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
 
  <div ng-view></div>
 
</body>
</html>
  • Like 1
Link to comment
Share on other sites
celfred Sr. Member

celfred

Posted
Posted

Hi there,

@Manol, this is exactly the issue I've facing these days with my project! And I got crazy over it... without finding any solution except giving up routing through AngularJs ;-) I had to admit this was way over my head trying to find a way to articulate both AngularJs routing and 'getting out of it' to come back to PW in the same 'app'...

But I'm sure others real programmers here will give us clues ;-) I'll keep an interested eye over here !

To finish my comment, I eventually only used controllers in the pages I wanted JS 'power' and managed the routing 'manually' through PHP. I actually didn't HAVE TO change route in my app (for the moment).

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

You need to load the route module additionally to angular.js

http://code.angularjs.org/1.2.0rc1/

<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
<script src="js/app.js"></script>
 
app.js
angular.module('phonecat', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});
}]);

where partials/phone-list.html could also be a PW page url 

with a partials template with url segments enabled create a page:

/partials/

then the route configured like:

/partials/phone-list

and in the template file

if($input->urlSegment1 == "phone-list"){
     echo "<div>your partial template ... </div>";
}
  • Like 4
Link to comment
Share on other sites
Manol Sr. Member

Manol

Posted
Posted

In the end I did it that way after reading Soma's post:

app.js

    var app = angular.module('app', []);

    app.config(['$routeProvider', function($routeProvider) {
    	$routeProvider.
    	when('/clientes', {templateUrl: '/partials/clientes',   controller: 'prueba'}).
    	when('/mascotas', {templateUrl: '/partials/mascotas',   controller: 'prueba'});
    }]);
app.controller('prueba', function ($scope) {
        $scope.model = { cliente: "John "};
    });
    

/partials/  (partials.php)

<?php 

	switch ($input->urlSegment1) {

	 	case "clientes": include("./partials/clientes.php"); break;
	 	case "mascotas": include("./partials/mascotas.php"); break;
	 	default: break;
	 }  
 
 ?>

and then a php file for each partial, so you can make use of  ajax, and the power of  processwire api.

clientes.php

<div>tu partial template {{model.cliente}}... </div>

mascotas.php

<?php echo $page->name; ?>
<p>mascotas</p>
  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...