Created
September 12, 2013 09:42
-
-
Save alexander-torosh/6535094 to your computer and use it in GitHub Desktop.
News knockout.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * @copyright Copyright (c) 2011 - 2012 Aleksandr Torosh (http://wezoom.com.ua) | |
| * @author Aleksandr Torosh <[email protected]> | |
| */ | |
| $title = 'Керування новинами'; | |
| $this->tag->prependTitle($title); | |
| ?> | |
| <h1><?php echo $title; ?></h1> | |
| <div class="btn-navbar"> | |
| <a href="/news/admin/add" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> Додати</a> | |
| </div> | |
| <hr /> | |
| <table class="table table-bordered table-condensed table-striped table-hover table-grid"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Тип</th> | |
| <th>Заголовок</th> | |
| <th>Категорії</th> | |
| <th><i class="glyphicon glyphicon-camera"></th> | |
| <th>Порядок</th> | |
| </tr> | |
| </thead> | |
| <tbody data-bind="if: ($root.news().length == 0)"> | |
| <tr> | |
| <td colspan="4" class="loader"> </td> | |
| </tr> | |
| </tbody> | |
| <tbody data-bind="foreach: news"> | |
| <tr data-bind="event: { dblclick: $root.openNewsPost }" class="pointer"> | |
| <td data-bind="text: id"></td> | |
| <td data-bind="text: type"></td> | |
| <td data-bind="text: title"></td> | |
| <td data-bind="text: categories"></td> | |
| <td data-bind="if: preview"><i class="glyphicon glyphicon-ok"></i></td> | |
| <td class="form-inline"> | |
| <a data-bind="click: sortorderEnable" class="btn btn-default btn-xs">E</a> | |
| <input data-bind="value: sortorder, enable: sortorderEnabled, attr: {class: loader}" style="width:47px;" /> | |
| <a data-bind="click: sortorderSave" class="btn btn-default btn-xs">S</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <select data-bind="options: limits, | |
| value: limit, | |
| click: selectLimit"> </select> | |
| <script> | |
| function NewsPostLine(data) | |
| { | |
| var self = this; | |
| self.id = data._id; | |
| self.preview = data.preview; | |
| self.title = data.uk.title; | |
| self.categories = data.categories; | |
| self.type = data.type; | |
| self.sortorder = ko.observable(data.sortorder); | |
| self.sortorderEnabled = ko.observable(false); | |
| self.loader = ko.observable('form-control input-xs'); | |
| self.sortorderEnable = function() | |
| { | |
| self.sortorderEnabled(true); | |
| } | |
| self.sortorderSave = function(item) | |
| { | |
| self.loader('loader form-control input-xs'); | |
| $.post("/news/admin/changeSortorder/" + item.id + "/" + item.sortorder(), function(response) { | |
| if (response.success) { | |
| self.sortorderEnabled(false); | |
| self.loader('form-control input-xs'); | |
| } | |
| }, 'json'); | |
| } | |
| } | |
| function NewsViewModel() | |
| { | |
| var self = this; | |
| self.news = ko.observableArray([]); | |
| self.page = ko.observable(1); | |
| self.limit = ko.observable(25); | |
| self.limits = ko.observableArray([25, 50, 100, 500]); | |
| console.log(self.news().length); | |
| self.getGridData = function() | |
| { | |
| $.getJSON("/news/admin/grid", { | |
| page: self.page, | |
| limit: self.limit | |
| }, function(response) { | |
| var mappedNews = $.map(response.items, function(item) { | |
| return new NewsPostLine(item) | |
| }); | |
| self.news(mappedNews); | |
| }); | |
| } | |
| self.getGridData(); | |
| self.openNewsPost = function(item) | |
| { | |
| console.log(item); | |
| location.href = '/news/admin/edit/' + item.id; | |
| } | |
| self.selectLimit = function(item) | |
| { | |
| self.limit(item); | |
| self.getGridData(); | |
| } | |
| } | |
| ko.applyBindings(new NewsViewModel()); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment