Question

我有一个简单的原子包，我试图从用户那里读取一些输入：

$ = jQuery = require 'jquery'

module.exports =
  class InputView
    constructor: (serializedState) ->
      console.log('InputView: entered ctor')
      @element = document.createElement('div')
      @element.classList.add('input-view')

      form = $('<form/>').attr(
        action: @doIt
      ).appendTo(@element)

      $('<input/>').attr(
        type: 'text'
        name: 'msg'
      ).appendTo(form)

      $('<input/>').attr(
        type: 'submit'
        value: 'doit'
      ).appendTo(form)

    attach: ->
      console.log('InputView: entered attach')

    getElement: ->
      return @element

    doIt: ->
      console.log('now in doIt')

切换我的包时会生成以下内容：

但是当我点击 doit 时， doIt 功能不会被驱动。

在初始化期间（从控制台）驱动函数：

InputView: entered ctor
now in doIt
VtAtomPkgTest (cs3) was toggled!

主要包装如下：

'use babel';
$ = jQuery = require 'jquery'

VtAtomPkgTestView = require './vt-atom-pkg-test-view'
InputView = require './input-view'
{CompositeDisposable} = require 'atom'

module.exports = VtAtomPkgTest =
  vtAtomPkgTestView: null,
  modalPanel: null,
  subscriptions: null,
  inputView: null,
  inputViewPanel: null

  activate: (state) ->
    @vtAtomPkgTestView = new VtAtomPkgTestView(state.vtAtomPkgTestViewState);
    @modalPanel = atom.workspace.addModalPanel(
      item: @vtAtomPkgTestView.getElement(),
      visible: false
    );
    @inputView = new InputView(state.inputViewState)
    @inputViewPanel = atom.workspace.addModalPanel(
      item: @inputView.getElement(),
      visible: false
    );

    #Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    @subscriptions = new CompositeDisposable

    # Register command that toggles this view
    @subscriptions.add atom.commands.add 'atom-workspace',
      'vt-atom-pkg-test:toggle':  => @toggle()

  deactivate: () ->
    @modalPanel.destroy()
    @subscriptions.dispose()
    @vtAtomPkgTestView.destroy()
    @inputView.destroy()
    @inputViewPanel.destroy()

  serialize: () ->
      vtAtomPkgTestViewState: @vtAtomPkgTestView.serialize()

  toggle: () ->
    console.log('VtAtomPkgTest (cs3) was toggled!');
    console.log('VtAtomPkgTest.toggle: core.themes=' + atom.config.get('core.themes'))
    #console.log('VtAtomPkgTest.toggle: jquery version=' + $.fn.jquery)
    if @modalPanel.isVisible()
      @modalPanel.hide()
      @inputViewPanel.hide()
    else
      @modalPanel.show()
      @inputViewPanel.show()

A）我做错了什么？ B）使用表单推荐的方式在Atom包中获取简单的输入数据吗？

Answer 1

A）这与atom无关，而且与jQuery有关。我应该把这个问题发布到jQuery论坛而不是Atom论坛。无论如何，我只需要在我的表单对象上重写语法以使 .submit（）。最终的表单和输入表达式现在看起来像：

  form = $('<form/>').attr( id: 'input-form').submit(@doIt)

  form.appendTo(@element)

  $('<input/>').attr(
    type: 'text'
    name: 'msg'
  ).appendTo(form)

  $('<input/>').attr(
    type: 'submit'
    value: 'doit'
  ).appendTo(form)

我确信有更好的方法可以用jQuery来表达它，但现在这已经足够了。

B）我认为我的第二个问题的意图是错误的。您不应该问在 atom editor 中请求输入的适当方式。相反，您应该询问在网页中请求输入的适当方式是什么，即只需将Atom面板视为网页即可。

所以使用表单的答案是“它取决于”：有时它是一个很好的解决方案，有时候下拉的东西会更好等等。

原子包提交按钮不驱动提交功能

1 个答案: