backbone marionette 元素呈现不正确

Question

我正致力于在使用 PC 网络摄像头的基于 Web 的应用程序中实现 QR reader。这目前工作正常。

我使用的框架 (barcode.js) 有一个函数 render(element)。

我有 2 个不同的文件，ScannerView.html 和 ScannerView.js。请参阅下面的代码：

ScannerView.html

<!-- Content Header (Page header) -->
<section class="content-header has-background-image">
<div class="background">
    <img src="/assets/temp/header.png" />
</div>
<h1><div class="icon"><i class="fa fa-wrench"></i></div> <%=name%></h1>
</section>

<section class="content">
    // Withing the following div, the canvas element should be placed
    <div id="scanner"></div>
</section>

ScannerView.js

var YookrApp = require("../../setup");
var scanner = null;

var ScannerView = Backbone.Marionette.CompositeView.extend({
  template: require("./ScannerView.html"),
  className: "scannerView",

  ui: {
    scannerDiv: "#scanner"
  },

  name: "Yookr Code Scanner",

  initialize: function(options) {
  },

  onRender: function() {
    w69b.qr.decoding.setWorkerUrl("assets/w69b.qrcode.decodeworker.js");
    scanner =  new w69b.qr.ui.ContinuousScanner();
    // Called when a qr code has been decoded.
    scanner.setDecodedCallback(function(result) {
        console.log("Decoded qr code:", result);
    });
    scanner.setStopped(false);
    // Render component in element with id "scanner".
    console.log("Start rendering");
    scanner.render(this.ui.scannerDiv);
    console.log("Rendering done");
  },

  close: function() {
    // We have to dispose the scanner object.
    // If we don"t do this, the webcam will
    // always be enabled
    scanner.dispose();
  }
});

module.exports = ScannerView;

当我运行我的应用程序时，scanner.render() 函数应该在 <div id="scanner"></div> in ScannerView.html[= 中添加一个 <canvas> 元素56=]

问题

我无法使用位于我的 html 文件中的 <div id="scanner"></div> 使用 scanner.render() 正确渲染 canvas。我尝试使用 document.getElementById 和 this.ui.scannerDiv 得到不同但不正确的结果。

因为我在 ScannerView.js 文件中定义了一个 UI 元素，所以我应该可以调用 scanner.render(this.ui.scannerDiv); 这应该使用 div 在我的 html 视图中使用 id scanner，但是 canvas 根本没有呈现。在我的控制台中，我可以看到以下警告：

[.Offscreen-For-WebGL-0000020AB57365B0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawArrays: framebuffer incomplete

和

[.Offscreen-For-WebGL-0000020AB57365B0]RENDER WARNING: texture bound to texture unit 2 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

当我使用 scanner.render(document.getElementById("scanner")); 时，我可以看到 canvas 已呈现，但位置不正确。结果请看我添加的截图：

此时我卡住了。我不知道如何实现 canvas 以正确的 div.
呈现

Answer 1

搜索Google一段时间后，我找到了解决方案。

根据onRender: function() { }"gets triggered when the View's DOM subtree is prepared for insertion into the DOM but before those elements are viewable"，根据this webiste.

在我的 javascript 文件中将 onRender 更改为 onShow 后，canvas 元素呈现在正确的位置。

backbone marionette 元素呈现不正确

backbone marionette incorrect rendering of element

html

javascript

jquery

backbone.js

marionette