在atk4中，如何使用ajax更新视图

Question

我当前定义了一个页面，它按行显示一些数据。在每行的末尾，有一个视图显示从 mysql 中提取的总计。

$r->add('View_PointsLeft', 'pleft', 'pointsleft')
           ->setPoints($row['points_left'])
           ->setBacklog($row['backlog_ref'])
           ->setID($row['id'].'-points-left');

视图是用这样的模板定义的。

<!-- points left -->
<div  class='target points_left'>
  <div class='sticky green'>
    <div class='story'><?$backlog?></div>
    <div id='<?$name?>' class='big_points big_point_margin'><?$pointsleft?></div>
  </div>
</div>
<!-- end 0000-points-left -->

填充视图的数据是使用循环遍历的页面中的 sql 选择的，/lib/view/pointsleft.php 代码设置了从页面传递参数并更新的方法模板中的字段。

class View_PointsLeft extends View_Sticky {
  function init(){
    parent::init();
  }

  function setPoints($points){
    $this->template->set('pointsleft',$points);
    return $this;
  }

  function setBacklog($backlog){
    $this->template->set('backlog',$backlog);
    return $this;
  }

  function defaultTemplate(){
    return array('view/scrumwall/pointsleft');
  }
}

我想在页面上发生更改时更新数据库，并更新总视图（以减少计数器）。

首先，我想知道我是否以错误的方式处理这个问题（每个视图都应该是独立的）-我应该将 id 字段传递给视图，将相关模型附加到 lib/view/pointsleft.php 内的视图并使用模型值调用设置字段？

其次，如果我以这种方式更改它，那么当使用 ajax 更改数据库值时，是否可以更轻松地使用特定 id 更新视图，如果是这样，我该怎么做？

第三 - 如果我还想根据客户端 JavaScript 上的操作触发数据库更新，我应该将此代码放在哪里，例如在我的代码的非 atk4 版本中，我有一个名为 using $.post(" update.php") 这将更新 mysql。我应该把这样的脚本放在 ATK4 的哪里？

提前致谢。

---

罗马人回答后更新

伙计，ATK4 太棒了！ - 它的作用超出了我的预期，我正忙着在视图内创建函数来填充每个字段名称，所以现在使用 addModel 重做了它，

来自页面的调用看起来像这样，

 $r->add('View_PointsLeft', 'pleft', 'pointsleft')
               ->loadData($row['id']);

模板/视图看起来像这样

<div id='<?$name?>' class='target points_left'>
  <div class='sticky green'>
    <div class='story'><?$backlog_ref?></div>
    <div class='big_points big_point_margin'><?$points_left?></div>
  </div>
</div>

，lib/view 看起来像这样代码看起来像这样

<?php
class View_PointsLeft extends View_Sticky {

   function loadData($id){
  $this->setModel('Story')->loadData($id);
   }

   function init(){
      parent::init();
   }

   function defaultTemplate(){
      return array('view/scrumwall/pointsleft');
   }
}

---

更新 Romans 的代码示例

在遵循 Romans 提供的代码示例之后，我现在使用 jquery 选择器在页面代码底部添加 URL 调用，并执行一些 jiggery pokery 来获取任务和 id 的状态字段（不确定是否使用 HTML5 only stufff 使用 data-id，因此只需设置普通 id 并从中提取）。以前，删除代码位于我自己的 univ.js 脚本中，但我无法从那里访问 php 变量，因此我将其移动到页面中，

 $p->js(true)->_selector('.movable')->draggable();
 $p->js(true)->_selector('.target')->droppable(array(
                   'drop'=>$this->js(null,'function(event,ui){'.
                           ' target=$(this).attr("id").split("-");'.
                   ' zone=target[2];'.
                               ' sticky=$(ui.draggable).attr("id").split("-");'.
                               ' task=sticky[1];'.
                               ' switch (zone) {'.
                   ' case "verify": newStatus="V";'.
                   '                break;'.
                   ' case "in":     newStatus="P";'.
                   '                break;'.
                   ' case "to":     newStatus="I";'.
                   '                break;'.
                   ' case "done":   newStatus="D";'.
                               '                break;'.
                               '}
                              $.univ().ajaxec({ 0:"'.$this->api->getDestinationURL().'",'. 
                                  'task: task, status: newStatus }); } ')
    ));

并且我有一个 if 块，在页面中看起来像这样。我添加 Model_Task 并根据 GET 参数加载值，这样我还可以获得更多信息，包括与之相关的故事，这样如果状态现已完成，我还可以更新点。

   if($_GET['task'] && $_GET['status'])
   {
        $new_status=$_GET['status'];
        $task_id=$_GET['task'];
        $t=$p->add('Model_Task')->loadData($task_id);
        $old_status=$t->get('status');
        $task_points=$t->get('points');

        if ($new_status<>$old_status & ($new_status=='D' | $old_status=='D'))
        {
           $s=$p->add('Model_Story')->loadData($t->get('story_id'));
           if ($old_status='D')
           {
             $s->set('points_left',$s->get('points_left')+$task_points);
           } else {
             $s->set('points_left',$s->get('points_left')-$task_points);
           }
           $s->update();

           $story=$t->get('story_id');
        }
    $t->set('status',$new_status);
    $t->update();
   }

然后我可以计算新的点数并用剩余的点数更新故事，并通过设置模型值和使用 update() 使用 new_status 更新任务。

如果我现在移动其中一个可拖动对象，它可以工作，但会打开一个新窗口，再次显示整个页面并报告

AJAXec 响应中的错误：语法错误：语法错误

我认为打开额外的窗口是因为该错误但该错误与具有整个页面的所有 html 的响应有关。我实际上不想从 ajax 调用中重新加载，除非状态是特定的。

另外，我需要做的最后一件事就是仅在页面上重新加载已更新的特定故事的一个视图。

我尝试通过创建一个数组并在页面首次加载时向其中添加短变量

 $this->pl_arr[$row['id']]=$r->add('View_PointsLeft', 'pleft', 'pointsleft')
                         ->loadData($row['id']);

，然后在处理 GET 时在 if 块中添加短变量来调用它，

       $pleft=$this->pl_arr[$story];
       $pleft->js()->reload()->execute();

但它失败并出现错误

Error in AJAXec response ：语法错误：缺少；声明之前 致命错误：在第 247 行对 C:\wamp\www\paperless\page\scrumwall.php 中的非对象调用成员函数 js()

---

最终更新

最后一个错误是因为我没有在我想要更新的整个视图的外部 div 中使用 id 造成的。一旦我改变了它，它就不再为空了。

因此，第一次加载页面时，我将所有视图名称存储在循环中的关联数组中，然后将它们放在页面上

    $st = $p->add('Model_Story');
    $result = $st->getRows();

    foreach ($result as $row) {
    if (is_array($row)) {
         $r=$p->add('View_Scrumwall_StoryRow')
               ->setWorkspace('ws-'.$row['id']);

        ... other code here ...

      $points_left[$row['id']]=$r->add('View_PointsLeft', null, 'pointsleft')
                      ->loadData($row['id']);
    }

，然后使用像这样的 if GET 块

   if($_GET['task'] && $_GET['status'])
   {
        $new_status=$_GET['status'];
        $task_id=$_GET['task'];
        $t=$p->add('Model_Task')->loadData($task_id);
        $old_status=$t->get('status');
        $task_points=$t->get('points');

        if ($new_status<>$old_status && ($new_status=='D' || $old_status=='D'))
        {
           $s=$p->add('Model_Story')->loadData($t->get('story_id'));
           if ($new_status=='D')
           {
             $s->set('points_left',$s->get('points_left')-$task_points);
           } else {
             $s->set('points_left',$s->get('points_left')+$task_points);
           }
           $s->update();
           $story=$t->get('story_id');
           //reload the points left sticky note for the story of the task
           $js[]=$points_left[$story]->js()->reload();
        }
        $t->set('status',$new_status);
        $t->update();
        $js[]=$this->js()->reload();
        $this->js(null,$js)->execute();
   }

请注意，如果我只想更新页面上的一个视图页面，我可以通过重新加载调用该对象并执行例如

$pl->js()->reload()->execute

但如果我想更新页面上的多个视图，我需要将它们放在在一个数组中（这里称为js[])，然后像这样调用执行 - 您还可以在 Roman 的键盘示例中看到这样的示例。

        $js[]=$points_left[$story]->js()->reload();

        $js[]=$this->js()->reload();
        $this->js(null,$js)->execute();

ATK4 解决了问题:)

Answer 1

好的，为了获得更清晰的答案，我整理了一个示例：

http://codepad.agiletoolkit.org/ Dragaction.html

也许这里的例子更好地回答了问题。

就您而言，由于您正在使用模型，因此设置应该更容易。对于性能，我决定使用 2 个列表器，但理论上您也可以将每个人和任务作为一个视图。

我将关联存储在会话中（通过记忆），在您的情况下，您会将它们存储在数据库中。

Answer 2

你的结构看起来没问题。如果您在其上使用 setModel() ，它将具有“pointsleft”和“backlog”字段，这些字段将自动填充。

我不知道 setID 是如何定义的，但您可以扩展 setModel，调用父级，然后执行它也。

我注意到的另一件事是，在你的模板中，最顶层的 div 应该有 id=''。这为您的视图提供了 js() 默认使用的唯一选择器。

您正在寻找的 .post 函数是 univ()->ajaxec()。它将数据发送到服务器，接收 JavaScript 并执行它，因此得名。它的行为与表单类似。

$mybutton->js('click')->ajaxec($this->getDestinationURL(null,array('a'=>'b'));

if($_GET['a']){
    // update database
    $r->getElement('plfat')->js()->reload()->execute();
}

通常为了使您的代码通用，您可以将上面的代码放入视图中，但您最好使用对象的名称而不是“a”，如下所示。这消除了单独的页面处理更新的需要：

$this->mybutton->js('click')->ajaxec($this->getDestinationURL(null,
     array($this->name=>'reload'));

if($_GET[$this->name]){
    // update database
    $this->js()->reload()->execute();
}

---

更新

澄清其执行顺序：

1. 页面呈现为发送到浏览器的 HTML。
2. Javascript 链与页面一起发送。所有这些都定义了 js 的第一个参数，例如 js(true)、js('click')。在我的代码中，我有 js('click')，因此它被发送到浏览器。
3. 用户执行诸如单击按钮之类的操作。这会触发 ajaxec() 函数
4. ajaxec 函数使用您在此处指定的参数对页面执行 AJAX 请求。
5. PHP 再次被执行，但这次它进入 if() 分支。创建一个不带参数的 js() 并 ->execute() 将 javascript 发送到浏览器。
6. 浏览器接收 js()...->execute() 的输出并对其进行评估。在我们的例子中，它包含一些其他元素的 reload() 。
7. atk4_loader 小部件用于执行页面其他部分的重新加载，它向服务器发送 AJAX 请求
8. PHP 使用 cut_object 参数执行。它重新初始化原始页面，但仅选择性地呈现一个对象。该对象的输出被发送回前端。
9. PHP 还像#2 中那样重新生成 JS 链，但仅与该对象相关
10. 前端的 atk4_loader 接收代码，替换元素的 HTML 并重新评估 javascript。
11. 回到#3

听起来有很多动作。实际上，每次点击会产生 2 个请求，如果您立即重新加载，则可以消除一个请求。请注意，您还可以将参数传递给 reload()，然后可以从“get”中获取该参数。我不完全理解是什么触发了原始脚本中的操作，也许我们可以在 https: //chat.stackoverflow.com/rooms/2966/agile-toolkit-atk4？