javascript - 如何在 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 View 。您可以在 de keystone demo site 中找到示例。 :

在 keystone.js 中设置路由:

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

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

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

在上面的示例中，url“/blog/news”由 View routes.views.blog处理，“news”是一个(可选)参数。

在你的情况下，你最终会得到这样的结果(如果你想使用 REST 风格):

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

当且仅当请求是 POST 请求时，.post 方法才会将 URL 路由到此 View 。

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

在 View 中，您为 View 创建一个处理程序，如下所示:

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