使用jQuery和amp;更有效的方法来附加json数据Laravel

时间:2014-06-02 12:22:20

标签: javascript jquery json laravel append

我正在用Laravel和jQuery构建一个twitter风格的源。

我的问题是我确信我的逻辑很糟糕。

所以我有一个包含查看显示推文结果的视图。

发送数据只是一个基本的ajax帖子,有一些DOM操作也很好。

提交表单后,我会用附加显示新的推文。

但问题是无论我如何建立我的逻辑,我总是最终重复。

所以我做的是

发送表单,成功功能将数据附加到视图

success: function(data) {

                if(data.status === "success") {
                    $('#tweet-textarea').val("");
                    $('#tweets-wrapper').prepend(data.content);
                }
            },

然后返回以下列方式。保存推文后,我将其返回到我编码为json

的数组中
$data = array('status' => 'success', 'content' => 
                '<div class="tweet-box">
                    <div class="media">
                      <a class="pull-left" href="#">
                       <img src="http://placehold.it/60x60" alt="">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">
                            '. $this->tweet->user->metadata->full_name .'
                            <small>'. "@".$this->tweet->user->username .'</small>
                            <small>'. $this->tweet->created_at .'</small>
                        </h4>
                       '.  $this->tweet->message .'
                      </div>
                    </div>
                </div>');

我不知道最好的方法,我的问题实际上是在我的控制器中我复制代码,因为返回的结果“数组内容”就像在我的视图中一样,所以如果我做了任何修改我需要做两个

那么有更有效的方法吗?

2 个答案:

答案 0 :(得分:2)

您可以使用jQuery jPut插件轻松附加json

<div jput="template">
  <div class="tweet-box">
                    <div class="media">
                      <a class="pull-left" href="#">
                       <img src="http://placehold.it/60x60" alt="">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">{{}}</h4>
 </div>
</div>
</div>

</div>
<div id="main">
</div>

<script>
$(document).ready(function(){
//main is the div that you want to append
   $('#main').jPut({
       ajax_url:'domain.com/data.json',   //your json data page
       name:'template'  //jPut template name
   });
});
</script>

在你的json页面中无需发送所有div

$data = array('status' => 'success', 'content' => $this->tweet->user->metadata->full_name);

答案 1 :(得分:0)

如果你想删除重复的代码,你将不得不从视图中取出所有逻辑,并从控制器中为整个部分传递一个很好的长字符串。

我开始创建一个可以使用全名,用户名,时间戳和消息的函数并创建推文。

public function createTweet($fullName, $username, $created_at, $message)
{
    return  '<div class="tweet-box">
                <div class="media">
                  <a class="pull-left" href="#">
                   <img src="http://placehold.it/60x60" alt="">
                  </a>
                  <div class="media-body">
                    <h4 class="media-heading">
                        '. $full_name .'
                        <small>'. "@".$username .'</small>
                        <small>'. $created_at .'</small>
                    </h4>
                   '.  $message .'
                  </div>
                </div>
            </div>';
}

然后当你循环浏览你的推文时,每次调用此函数并在字符串中保持连接响应,然后你可以将字符串传递给你的视图并在那里回显它。

在返回ajax的函数上,执行相同的操作......

return Respons::json(array(
    'status' => 'success', 
    'content' => $this->createTweet($this->tweet->user->metadata->full_name, $this->tweet->user->username, $this->tweet->created_at, $this->tweet->message)
));

如果您发现自己在整个应用中都需要此功能,那么您也可以在HTML::macro()上花很多时间。 http://laravel-recipes.com/recipes/181 HTML::macro()非常快速{{1}}。