新手问题 老哥们,通过 npm 导入 backbone 不工作是我哪里错了吗?

yngzij · 2022年01月20日 · 最后由 yngzij 回复于 2022年01月21日 · 217 次阅读

这个 package.json 文件依赖

"dependencies": {
    "@rails/webpacker": "5.4.3",
    "backbone": "^1.4.0",
    "jquery": "^3.6.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {

已经在 application.js 中导入了 Backbone

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

import './index.css'

import jQuery from "jquery";

window.jQuery = jQuery;
window.$ = jQuery;

window.Backbone = require("backbone");
window._ = require("underscore");

var AppView = Backbone.View.extend({
    el: "body",
    events: {
        "click #box": "click"
    },
    initialize() {
        alert('init')
    },
    click(e) {
        alert('click')
    },
})
var appView = new AppView()

在 html 中点击没有作用

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_pack_tag "application", defer: false %>
</head>
<body>

<div id="box">
  box
</div>
<%= yield %>
</body>
</html>

javascript 执行的时候 body 还没解析。

简单的解决方法,可以把 js defer 设 ture,把 js 延后到文档解析完成后执行。

<%= javascript_pack_tag "application", defer: true %>

你这又有 importmap 又有 webpacker 的,需要更新参考书,webpacker 已经退役了。

Rei 回复

感谢, 原来是这个问题.

yngzij 关闭了讨论。 01月21日 00:23
yngzij 关闭了讨论。 01月21日 00:23
yngzij 关闭了讨论。 01月21日 00:23
yngzij 关闭了讨论。 01月21日 00:23
yngzij 关闭了讨论。 01月21日 00:23
需要 登录 后方可回复, 如果你还没有账号请 注册新账号