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

问题描述

想了解

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

`+ ':<div ng-controller="MainCtrl as ctrl"><hot-table hot-id="mytable" datarows="ctrl.db.items" height="50" width="100"></热表></div>'`

有谁知道剩下的怎么办吗? 原来的代码很难理解(是递归)，我为此苦苦挣扎了好几天(这就是为什么我把 100赏金)...

解决方案

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

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

某些用户使用键盘而不是鼠标浏览互联网.专家级高级"用户更喜欢键盘命令以提高效率，而某些残疾用户别无选择，只能使用键盘.例如，有运动障碍的人在使用鼠标所需的精细运动方面有困难；盲人用户依赖屏幕阅读器等辅助技术，看不到点击鼠标的位置.

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

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

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>';

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?

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:

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>'`

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 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.

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屋！