Показать сообщение отдельно
  #30 (permalink)  
Старый 01.07.2012, 15:11
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

переписал всё. если не будет работать - напишите в начале функции debugger, откройте консоль и перезагрузите страницу. дальше поэтапно смотрите, что делает скрипт, и где ошибка.
$(function () {
  
  var post,
      posts,
      postIds, 
      prefix = "post_id_",
      postsIds_key = "post_ids";

  // ---------------------------
  // выведет на страницу посты из массива постов (data, или posts)
  // ---------------------------
  function parsePosts (posts) {
    $.each(posts, function (index, post) {
      
      var html = '<article><header><h3>';
      
      html += post.title + '</h3></header><section><p>';
      html += post.body + '</p></section><footer>';
      
      if (post.tags) {
        
        html += '<div id="tags">';
        
        if (!$.isArray(post.tags)) {
          post.tags = post.tags || "";
          post.tags = [post.tags];
        }
        
        $.each(post.ags, function (tagIndex, tag) {
          html += '<span class="label">' + tag + '</span>';
        });
        
        html += '</div><div class="controls"><a class="btn btn-danger btn-mini remove" post_id="' + post.id + '">удалить</a></div>';
      }
      
      html += '</footer></article>';
      
      $('#posts').append(html);
    });  
  }
  
  // ---------------------------
  // получение списка постов
  // ---------------------------

  // получаем список идентификаторов постов из хранилища
  postIds = localStorage.getItem(postsIds_key);

  if (postIds) {
    
    // есть в хранилище. обрабатываем и выводим на страницу.
    postIds = JSON.stringify(postIds);
    postIds = JSON.parse(postIds);
    posts = $.map(postIds, function (postId) {
      post = localStorage.getItem(prefix + postId);
      post = JSON.parse(post);
      return post;
    });
    
    parsePosts(posts);
    
  } else {
    
    // его нет в хранилище. делаем запрос ...
    $.getJSON('json/posts.json', function (data) { 
      
      // и, когда данные придут, записываем посты в хранилище
      postIds = $.map(data, function (post) {
        var stringified = JSON.stringify(post);
        localStorage.setItem(prefix + post.id, stringified);
        return post.id;
      });
      
      // сохраняем идентификаторы постов в хранилище.
      localStorage.setItem(postsIds_key, JSON.stringify(postIds));
      
      // и выводим посты на страницу.
      posts = data;
      parsePosts(posts);
      
    });  
    
  }
  
  // ---------------------------
  // делегируем клик по кнопке "удалить"
  // ---------------------------
  $("body").on("click", ".controls .remove[post_id]", function (e) {
    
    var $this = $(e.target);
    
    // красиво удаляем пост со страницы
    $this.parents("article").slideUp("slow", function () {
          $(this).remove();
    });
    
    // ID поста.
    var id = $this.attr("post_id");
    
    // удалим пост из хранилища
    localStorage.removeItem(prefix + id);
    
    // теперь удалим значение из списка идентификаторов
    var index = postIds.indexOf(id);
    
    postIds.splice(index, 1); // удалили
    
    // теперь сохраним измененный список в хранилище.
    localStorage.setItem(postsIds_key, postIds);

  });
  
  // ---------------------------
  // делегируем клик по кнопке добавления поста
  // ---------------------------
  $("body").on("click", "button[type=submit]", function () {
    
    var title = $('#zagol'),
        body = $("#body"),
        tags = $('#tags');
    
    var post ={
      title: title.val(),
      body: body.val(),
      tags: tags.val(),
      id: postIds[postIds.length - 1] + 1
    };
    
    // добавляем идентификатор постов в список и сохраняем
    postIds.push(post.id);
    localStorage.setItem(postsIds_key, JSON.stringify(postIds));
    
    // сохраняем новый пост в хранилище.
    localStorage.setItem(prefix + post.id, JSON.stringify(post));
    
    // выводим его на страницу
    parsePosts( [post] ); // -> parsePosts принимает массив, поэтому [post]
    
    // очищаем форму
    title.add(body).add(tags).val("");
  });
});
Ответить с цитированием