Question

后台：我正在为Electron基于桌面的项目创建编辑器。该项目使用JSON来存储其数据，因此基于JSON模式的编辑器将是一个真正的提升。我已经尝试了JSON Schema Based Editor虽然它非常好，但它的发展状态目前有点粗略。 Alpacajs似乎是一个更活跃的项目，但我仍然在努力解决是否可以让它做我需要的事情。

问题如何使用Alpaca创建内嵌按钮？虽然我已经看到了对button类型的引用，但是当我将其指定为类型时会引发错误。 docs未在内置字段中提及“按钮”类型字段。

下图显示了我要做的事情：在“项目路径”字段中插入一个按钮。我尝试了各种各样的事情没有成功（下面的代码失败）。

有人可以告诉我我错过了什么吗？是不是可以在任何地方放下按钮？我需要它来选择资产等。这是一个桌面应用程序，所以html5文件选择器不合适。

我尝试使用模板指定按钮（代码段）：

 <div data-alpaca-layout-binding="projectName"></div>
    <div data-alpaca-layout-binding="projectVersion"></div>
    <div data-alpaca-layout-binding="path">
        <button onClick="getJSON()">Set Path</button>
        <div data-alpaca-layout-binding="projectPath"></div>
    </div>

我的设置代码如下。我尝试了很多变化 - 尝试引用模板，尝试将“按钮”声明为类型。

 var schema = {
    "title": "Project Info",
    "type": "object",
    "properties": {
      "projectName": {
        "title": "Project Name",
        "description": "Name of project",
        "type": "string",
        "required": false
      },
      "projectVersion": {
        "type": "string",
        "title": "Project Version",
        "description": "Project version number",
      },
      "path": {
        "type": "object",
        "properties": {
          "projectPath": {
            "type": "string",
            "title": "Project Path"
          }
        }
      }
    }
  }

  var options = {
    "fields": {
      "projectName": {
        "size": 5,
      }
    }
  }

  $("#form").alpaca({
    "schema": schema,
    "options": options,
    "view": {
      "parent": "bootstrap-edit-horizontal",
      "layout": {
        "template": './timeline-template1.html',
      },
      "wizard": {
        "renderWizard": true,
        "statusBar": true,
        "validation": false,
        "showSteps": true,
        "showProgressBar": false
      }
    }
  });
});

Answer 1

您可以在表单的选项块中定义按钮。然后，按钮定义必须包含在选项块内的表单块中。

以下是我用来帮助调试羊驼应用程序的按钮示例。除了提交表单的按钮（＆＃34;保存数据＆＃34;）之外，此代码还会显示一个标签为＆＃34;显示JSON＆＃34;的按钮。单击该按钮时，该函数将显示包含表单的JSON数据的JavaScript警报弹出窗口。

,"options": { 
    "form": {  
        "buttons": {
            "submit": {
                "label": "Save Data",
                "click": function(e) {
                    /* function does ajax submit to save my form data */
                }
            },
            "show": {
                "title": "Show JSON",
                "click": function() {
                    alert(JSON.stringify(this.getValue()));
                } // close 'click' block
            } // close 'show' block
        } // close 'buttons' block
    } // close 'form' block
} // end 'options' block

您可以通过更改按钮容器的样式信息来影响按钮位置。我的用户想要屏幕右上角的提交按钮（我的＆＃34;保存数据＆＃34;按钮），我使用以下样式覆盖进行管理：

/* Alpaca form button container has no space between it and right edge.
   Override it to add 10px of padding to right side. */
   Also move it to a fixed position at the top right corner of the screen */
.alpaca-form-buttons-container {
    padding-right: 10px !important;
    /* move button location to top right, no scroll */
    position: fixed;
    top: 88px;
    right: 5px;
}

您还可以使用以下样式更改按钮默认属性，即颜色，背景等。

.btn-default {
    color: #000000;
    background-color: #eef6fd;
    border-color: #ccc;
}
.btn-default:hover {
    color: #000000;
    background-color: #afdefa;
    border-color: #ccc;
}

希望这有帮助。

亚历

Answer 2

我在Alpaca github site上提出了问题并得到了以下答案。它有效。

您可以在此处找到表单元素的模板： https://github.com/gitana/alpaca/blob/master/src/templates/web-edit/control.html 在您的情况下，属性路径是：/ path / projectPath复制上面的模板并将其粘贴到您的选项中，如下所示：

{
    ...
    "options": {
        "view": {
            "fields": {
                "/path/project/path": {
                    "templates": {
                        "control": `INSERT TEMPLATE HERE`
                    }
                }
            }
        }
    }
    ...
}

请注意引号。现在您可以插入按钮了模板，但在事件方面你是独立的处理...

Alpacajs是否有“按钮”类型（如何在任何地方创建按钮）？

2 个答案: