将表类型添加到JSON编辑器 [英] Add a table type to a JSON editor

问题描述

我想了解此JSON编辑器的代码并对其进行修改.

I want to understand the code of this JSON editor and modify it.

在 directives.js 中，一段试图构造模板的代码:

In directives.js, there is a piece of code that tries to construct templates:

var switchTemplate = 
    '<span ng-switch on="getType(val)" >'
        ... ...
        + '<span ng-switch-when="Boolean" type="boolean">'
            + '<input type="checkbox" ng-model="val" ng-model-onblur ng-change="child[key] = val">'
        + '</span>'
        ... ...
    + '</span>';

// display either "plus button" or "key-value inputs"
var addItemTemplate = 
'<div ng-switch on="showAddKey" class="block" >'
    + '<span ng-switch-when="true">';
        if (scope.type == "object"){
           // input key
            addItemTemplate += '<input placeholder="Name" type="text" ui-keyup="{\'enter\':\'addItem(child)\'}" '
                + 'class="form-control input-sm addItemKeyInput" ng-model="$parent.keyName" /> ';
        }
        addItemTemplate += 
        // value type dropdown
        '<select ng-model="$parent.valueType" ng-options="option for option in valueTypes" class="form-control input-sm"'
            + 'ng-init="$parent.valueType=\''+stringName+'\'" ui-keydown="{\'enter\':\'addItem(child)\'}"></select>'
        // input value
        + '<span ng-show="$parent.valueType == \''+stringName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        + '<span ng-show="$parent.valueType == \''+numberName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        // Add button
        + '<button type="button" class="btn btn-primary btn-sm" ng-click="addItem(child)">Add</button> '
        + '<button type="button" class="btn btn-default btn-sm" ng-click="$parent.showAddKey=false">Cancel</button>'
    + '</span>'
    + '<span ng-switch-default>'
        // plus button
        + '<button type="button" class="addObjectItemBtn" ng-click="$parent.showAddKey = true"><i class="glyphicon glyphicon-plus"></i></button>'
    + '</span>'
+ '</div>';

我不了解的第一件事是ui-keyup="{\'enter\':\'addItem(child)\'}"的用途，因为我们已经为Add按钮设置了ng-click="addItem(child)".如果我将其删除ui-keyup="{\'enter\':\'addItem(child)\'}"，似乎该代码仍然有效. 我不明白的第二件事是ng-change="child[key] = val"，key来自何处?

The first thing I don't understand is the purpose of ui-keyup="{\'enter\':\'addItem(child)\'}", given we have already ng-click="addItem(child)" for the Add button. If I delete it ui-keyup="{\'enter\':\'addItem(child)\'}", it seems that the code still works. The second thing I don't understand is ng-change="child[key] = val", where does key come from?

实际上我想实现的是在现有类型的基础上添加handsontable类型，以便人们可以填写表格并将其添加到JSON对象中:

Actually what I want to realise is adding a handsontable type along with the existing types, so that people could fill in a table and add it to the JSON object:

这是我目前拥有的整个项目: plnkr ，所有与表相关的修改在directives.js中. 通过在addItemTemplate中添加以下代码，它确实显示了上表.但是我不知道如何做其余的事情，即在按下Add按钮之后将实例添加到JSON对象中.请注意，我们可以从其hot-id中获取可操作实例的数据，例如此.

Here is the entire project I have at the moment: plnkr, all the table-related modifications are in directives.js. By adding the following code in addItemTemplate, it does show the above table. But I don't know how to do the rest, i.e., adding the instance to the JSON object after pressing the Add button. Note that we could get the data of a handsontable instance from its hot-id like this.

`+ '<span ng-show="$parent.valueType == \'' +tableName+'\'"> : 
 <div ng-controller="MainCtrl as ctrl"><hot-table hot-id="mytable" datarows="ctrl.db.items" height="50" width="100"></hot-table></div>'`

有人知道剩下的事吗?原始代码很难理解(这是递归的)，我已经为此苦苦挣扎了几天(这就是为什么我把100赏金)...

Does anyone know what to do for the rest? The original code is hard to understand (it is a recursion), I have been struggling with this for several days (that's why I put a 100 bounty)...

推荐答案

ui-keyup检测到按下键盘上的Enter键，而ng-click检测到鼠标单击事件.

ui-keyup detects pressing Enter key on keyboard, while ng-click detects mouse click event.

开发人员同时使用了两者，因此应用程序可以同时通过鼠标和键盘检测事件.这是编写可访问应用程序的最佳实践.有些残疾人无法使用鼠标，但可以使用键盘.另外，其他一些人更喜欢使用键盘来更快地执行某些操作.

The developer used both so the application can detect events by both mouse and keyboard. This is a best practice to write accessible applications. Some people with disabilities can't work with a mouse but they can work with a keyboard. Also, some other people prefer to use a keyboard to do some actions faster.

某些用户使用键盘而不是鼠标来浏览Internet.专家级的高级"用户更喜欢键盘命令以提高效率，而某些残疾用户别无选择，只能使用键盘.例如，有运动障碍的人很难使用鼠标来进行精细的运动.盲人用户依靠诸如屏幕阅读器之类的辅助技术，因此看不到单击鼠标的位置.

Certain users navigate the internet using the keyboard rather than the mouse. Expert "power" users prefer keyboard commands for efficiency, while users with certain disabilities have no choice but to use the keyboard. For example, people with a motor impairment have difficulty with the fine motor movements required for using a mouse; blind users rely on assistive technology such as screen readers and can’t see where to click the mouse.

即使对于那些无法访问其控件并与之交互的人来说，即使是最花哨或最精彩的网站也完全没有用.键盘友好型网站使无法使用鼠标的用户可以进行这些交互.因此，最好同时检测单击和键入事件.

Even the most fancy or wonderful site is completely useless to someone who cannot access its controls and interact with it. Keyboard-friendly websites make these interactions possible for users who cannot use the mouse. So it's a good practice to detect both click and key up events.

这篇关于将表类型添加到JSON编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！