如何以编程方式从 KeystoneJS 中的页面添加项目

Question

我正在尝试使用 KeystoneJS 构建一个站点，人们可以在其中提交单词并询问其他用户的同义词。所以我建立了一个简单的Word 模型：

var keystone = require('keystone');
var Types = keystone.Field.Types;

var Word = new keystone.List('Word', { 
    map: { name: 'word' }
});

Word.add({
    word: { type: Types.Text, required: true, initial: "New word", index: true }
});

Word.defaultColumns = 'word';

Word.register();

这个想法是用户在主页上的输入框中输入一个单词，然后单击“提交”，然后该单词将作为一个项目添加到 Word 模型中。但我无法弄清楚页面上处理单击“提交”时触发的事件的 Javascript 与实际在数据库中创建新项目的代码之间的相互作用，如下所示：

var keystone = require('keystone'),
    Word = keystone.list('Word');

var newWord = new Word.model({
    word: newWord // read from the input box on the home page
});

newWord.save(function(err) {
    // post has been saved  
});

我最初天真地认为我可以将Word 设为locals 对象的一部分，并从页面上的JS 创建新项目，但这不起作用。所以我想我需要从输入框中读取单词，然后对将单词保存到数据库的路由进行 AJAX 调用。这是我对 KeystoneJS 的理解崩溃的地方。我应该把代码放在哪里来接受 AJAX 调用并创建新项目？

Answer 1

页面中的javascript和服务器端的keystone确实是两个独立的域。要与页面中的 keystone 交互，您必须进行 HTTP 调用。这些调用被路由到 keystone 视图。您可以在 de keystone demo site 中找到一个示例：

在 keystone.js 中设置了路由：

keystone.set('routes', require('./routes'));

在 routes/index.js 中定义了路由，即：

app.get('/blog/:category?', routes.views.blog);

在上面的例子中，url“/blog/news”由视图routes.views.blog处理，“news”是一个（可选的）参数。

在你的情况下，你最终会（如果你想使用 REST 风格）有类似的东西：

app.post('/word/:newword?', routes.views.word);

当且仅当请求是 POST 请求时，.post 方法将 url 路由到此视图。

您建议的解决方案，进行 AJAX 调用是可能的解决方案之一。您也可以使用表单并发布整个页面。

在视图中，您可以像这样为视图创建处理程序：

view.on('post', function(next){
  if (req.params.newword){
    //store and create answer
    next();
  }
});