Thêm loại bảng vào trình soạn thảo JSON

Question

Tôi muốn hiểu mã số this JSON editor và sửa đổi nó.

Trong directives.js, có một đoạn mã mà cố gắng để xây dựng mẫu:

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

Điều đầu tiên tôi không hiểu là mục đích của ui-keyup="{\'enter\':\'addItem(child)\'}", do chúng tôi đã ng-click="addItem(child)" cho nút Add. Nếu tôi xóa nó ui-keyup="{\'enter\':\'addItem(child)\'}", có vẻ như mã vẫn hoạt động. Điều thứ hai tôi không hiểu là ng-change="child[key] = val", trong đó key xuất phát từ đâu?

Trên thực tế những gì tôi muốn nhận được thêm một loại handsontable cùng với các loại hiện có, để mọi người có thể điền vào một bảng và thêm nó vào các đối tượng JSON:

Dưới đây là toàn bộ dự án tôi có tại thời điểm này: plnkr, tất cả các sửa đổi liên quan đến bảng nằm trong directives.js. Bằng cách thêm mã sau vào addItemTemplate, nó sẽ hiển thị bảng trên. Nhưng tôi không biết cách làm phần còn lại, tức là, thêm cá thể vào đối tượng JSON sau khi nhấn nút Add. Lưu ý rằng chúng tôi có thể lấy dữ liệu của một cá thể có thể hiển thị từ hot-id như 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>'` 

Có ai biết phải làm gì cho phần còn lại không? Mã ban đầu khó hiểu (đó là đệ quy), tôi đã vật lộn với điều này trong vài ngày (đó là lý do tại sao tôi đặt 100 tiền thưởng) ...

Answer 1

ui-keyup phát hiện cách nhấn phím Enter trên bàn phím, trong khi ng-click phát hiện sự kiện nhấp chuột.

Nhà phát triển đã sử dụng cả hai để ứng dụng có thể phát hiện sự kiện bằng cả chuột và bàn phím. Đây là phương pháp hay nhất để viết các ứng dụng có thể truy cập. Một số người khuyết tật không thể làm việc với một con chuột nhưng họ có thể làm việc với một bàn phím. Ngoài ra, một số người khác thích sử dụng bàn phím để thực hiện một số hành động nhanh hơn.

Một số người dùng điều hướng internet bằng bàn phím thay vì chuột. Chuyên gia “quyền lực” người dùng thích lệnh bàn phím cho hiệu quả, trong khi người dùng bị khuyết tật nhất định không có lựa chọn nào ngoài việc sử dụng bàn phím. Ví dụ, những người bị suy giảm vận động gặp khó khăn với chuyển động của động cơ tinh tế cần thiết để sử dụng chuột; người dùng khiếm thị dựa vào công nghệ hỗ trợ như trình đọc màn hình và không thể nhìn thấy nơi nhấp chuột.

Ngay cả những trang web ưa thích hay tuyệt vời nhất là hoàn toàn vô dụng đối với người không thể truy cập vào các điều khiển của nó và tương tác với nó. Các trang web thân thiện với bàn phím làm cho các tương tác này có thể có cho những người dùng không thể sử dụng chuột. Vì vậy, thực tiễn tốt là phát hiện cả sự kiện nhấp và khóa.