0

我一直在尝试创建一个 Web 应用程序，我试图在其中创建与客户的约会。就像我想象的那样，当应用程序的用户想要与客户创建约会时，他们将首先选择“创建约会”之类的链接，然后他们将看到一个屏幕，他们可以在其中选择现有客户，或输入新的信息。

我一直在努力解决的主要问题是应用程序的一般流程：何时应该发生 POST，以及应该在内存中保留多少。显然，如果用户需要创建一个客户端，我可以将浏览器转发到另一个屏幕，保存用户，然后将它们发送回来，但我真的认为在流程中保存客户端（创建约会的流程）是不好的; 我想在最后保存一切。

我花了很多时间研究像 AngularJS 这样的框架，看看它们是否能解决这个问题，但我认为它们没有。我很确定我想用 Javascript 在 DOM 中完成所有这些工作（因为它都在内存中），然后发送一个包含所有内容的 POST。

假设将所有内容保存在内存中并为整个工作流程发送一个大型 POST，您会如何建议 JSON 外观？在 JSON 中破译现有客户端和新客户端的合理方法是什么？是否存在任何框架可以更轻松地解决这个特定问题。

伙计，我想做的只是制作一个屏幕来选择客户或创建一个新客户，而不必引导用户远离流程。为什么这么难？

感谢一切！

4

3 回答 3

2

Angular 中的一个简单解决方案是将数据继续存储在 $rootScope JSON 对象中。无论您进入哪个页面，数据都会持续存在。因此，完成后，只需将数据发送到采用 JSON POST 的 Web 服务。（例如 - JERSEY RestFul webservices 实现）。然后，您可以一次性保存数据。

如果提交未完成，只需根据需要使对象无效或清空 JSON 对象。

于 2012-11-17T10:58:44.317 回答
1

在 JS MVC 框架中 - 与任何 JS 应用程序一样 - 您定义对象/类/模型并使用它们。如果您从 Web 服务（AJAX 调用）检索客户端列表，则 angularJS 会使用 $http 或 $resource 自动将其转换为 JS 对象（两者都在框架的网站中有详细记录）。但是您始终可以创建自己的，并立即或稍后通过 POST 将其添加到您的数据库中，并且无需更改“视图”即可添加模型的新实例。

这是我的应用程序的控制器示例。为清楚起见，大部分逻辑已被删除，并替换为注释。它表示一个条目，因为条目列表存储在父控制器中，并且控制器是通过 ng-repeat 指令生成的（见下面的 html 代码）。

控制器：

/**
 * Entry Controller
 * @class entryCtrl
 */
ucpaTpaApp.controller(
    'entryCtrl', 
    ['$scope', 'httpService',
    function($scope, httpService) {


        /**
         * initiate the entry model, with all the required logic
         * Called upon the controller's construction 
         */
        $scope.initEntry = function initEntry(){
            if(!$scope.entry){
                $scope.newEntry();
            }
        }


        /**
         * Set the fields of the entry, stored on the indicator's metadata
         * for new entries.
         */
        $scope.newEntry = function newEntry(){

            $scope.entry = {
                status: {
                    state: 'new',
                    connection: 'idle'
                },
                field_values: {},
                saved_field_values: {},
                title: ""
            };

            for(var field in $scope.fields){
                $scope.entry.field_values[String($scope.fields[field].id)] = '';
            }
        };


        $scope.resetFields = function resetFields(){
         // Resets fields to original status (blank if it is new)
        };


        /**
         * Save a new entry, adding it to the list of entries, and attempting
         * to save to the server
         */
        $scope.addEntry = function addEntry(){
         // Add a copy to array, with status 'new',
             // and call saveEntry on it
             // After that, reset fields
        };

        $scope.deleteEntry = function deleteEntry(){
         // Delete on WS, remove from array on confirmation
        };

        $scope.saveEntry = function saveEntry(){
         // Save to WS, update status on confirmation
        };


        $scope.initEntry();

    }]
);

模板：

<div class="indicator">
    <h3>{{indicator.title}} - {{indicator.score}}</h3>
    <div 
    ng-repeat="entry in indicator.entries" 
    ng-form="{{entry.id}}" 
    ng-controller="entryCtrl">
        <tr-entry>
        </tr-entry>
    </div>
</div>
<div ng-controller="entryCtrl">
    <tr-entry>
    </tr-entry>     
</div>

如您所见，条目列表使用 ng-repeat 指令显示（实际的条目 DOM 是使用它自己的指令 tr-entry 创建的）。然后，在此列表的末尾创建一个额外的条目，即“新”条目。如果该条目被保存（添加），它的条目模型被复制到数组中，并且 angularJS 尝试保存它。结果是：“新条目”将其字段设置为空白，并且新条目出现在 ng-repeat 列表中。当然，只有在收到确认已将其保存到数据库时，它的状态才会从“新”更改为“已保存”（由于后端执行数据验证，它可能会拒绝条目）。

于 2012-11-17T04:30:07.367 回答
0

你为什么不使用 AJAX ？？？首先选择/创建一个客户端，它将成为对服务器的一次 ajax 调用，用户将保持在同一视图上。之后，当服务器响应时，为该客户端预约，然后您可以提交该页面，或者如果您想做其他事情保持相同的视图，您可以再次进行 Ajax 调用。不要等待所有数据堆积起来，然后您只需使用 AJAX 即可发布。:)

于 2012-11-17T03:42:43.793 回答