使用 jQuery 和 Laravel 追加 json 数据的更有效方法

Question

我正在使用 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>');

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

那么有没有更有效的方法来做到这一点？

Answer 1

如果你想删除重复的代码，你将不得不从你的视图中去掉所有的逻辑，然后从你的控制器中为整个部分传递一个漂亮的长字符串。

我会先创建一个函数，该函数可以获取全名、用户名、时间戳和消息并创建推文。

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() 啧啧。

Answer 2

您可以使用 jQuery jPut Plugin 轻松附加 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);