Question

我一直在尝试创建一个Web应用程序，我试图与客户创建约会。我想象的方式是，当应用程序的用户想要与客户创建约会时，他们将首先选择像＆＃34;创建约会＆＃34;这样的链接，然后他们会看到一个屏幕，他们要么选择现有客户端，或输入新客户端的信息。

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

我花了很多时间调查像AngularJS这样的框架，看看他们是否解决了这个问题，我不认为他们会这样做。我非常确定我想在DOM中使用Javascript完成所有这些操作（因为它全部在内存中），然后发送一个包含所有内容的POST。

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

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

感谢您的一切！

Answer 1

Angular中的一个简单解决方案是将数据存储在$ rootScope JSON对象中。无论您走到哪一页，数据都会持续存在。所以，当你完成后，只需将数据发送到接受JSON POST的webservice。（例如 - JERSEY RestFul webservices实现）。然后您可以一次保存数据。

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

Answer 2

在JS MVC框架中 - 与任何JS应用程序一样 - 您可以定义对象/类/模型并使用它们。如果从Web服务（AJAX调用）检索客户端列表，angularJS会自动将其转换为JS对象，使用$ http或$ resource（两者都在框架的网站中有详细记录）。但您可以随时创建自己的，并通过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列表中显示新条目。当然，只有在收到已保存到数据库的确认信息时，它的状态才会从“新”更改为“已保存”（因为后端执行数据验证，它可能拒绝输入）。

Answer 3

为什么不使用AJAX？首先选择/创建一个客户端，该客户端将是一个ajax调用服务器，用户将保持相同的视图。在此之后，当服务器响应时，预约该客户端然后您可以提交该页面，如果您想要执行其他保持相同视图的其他内容，则可以进行另一个Ajax调用。不要等待所有数据堆积，然后您只需使用AJAX发布。：）

选择现有对象或在网页中创建新对象的正确方法是什么？

3 个答案:

控制器：

模板：