木偶.js - 我可以检测到追加吗?

Marionette.js - can I detect onAppend?

本文关键字：追加 检测 js 我可以 木偶      更新时间：2023-09-26

我有一个愚蠢的问题，我唯一的解决方案是一个草率的黑客，现在给我带来了其他问题。

看我的小提琴，

或在此处阅读代码：

.HTML：

<input id='1' value='input1' />
<template id='template1'>
    <input id='2' value='input2' />
</template>

JS - 项目视图声明：

// Declare an ItemView, a simple input template.
var Input2 = Marionette.ItemView.extend({
    template: '#template1',
    onRender: function () {
        console.log('hi');
    },
    ui: { input2: '#2' },
    onRender: function () {
        var self = this;
        // Despite not being in the DOM yet, you can reference
        // the input, through the 'this' command, as the
        // input is a logical child of the ItemView.
        this.ui.input2.val('this works');
        // However, you can not call focus(), as it 
        // must be part of the DOM.
        this.ui.input2.focus();
        // So, I have had to resort to this hack, which 
        // TOTALLY SUCKS.
        setTimeout(function(){
          self.ui.input2.focus();
          self.ui.input2.val('Now it focused. Dammit');  
        }, 1000)
    },
})

JS - 控制器

// To start, we focus input 1. This works.
$('#1').focus();
// Now, we make input 2.
var input2 = new Input2();
// Now we 1. render, (2. onRender is called), 3. append it to the DOM.
$(document.body).append(input2.render().el);

正如上面看到的，我的问题是我无法在渲染 （onRender） 后使 View 调用聚焦于自身，因为它尚未附加到 DOM 中。据我所知，没有其他事件调用，例如 onAppend ，可以让我检测到它何时实际附加到 DOM 中。

我不想从项目视图外部调用焦点。为了我的目的，它必须从内部完成。

有什么好主意吗？

更新

事实证明，onShow() 在 Marionette.js 中的所有 DOM 追加上都被调用，无论是 CollectionView、CompositeView 还是 Region，它都不在文档中！

谢谢一百万，卢卡兹菲泽。

解决方案是在Marionette.Region中呈现您的ItemView。这样，一旦视图插入到 DOM 中，就会在视图上调用 onShow 方法。

例：

.HTML

<input id='1' value='input1' />
<div id="inputRegion"></div>
<template id='template1'>
  <input id='2' value='input2' />
</template>

JS项目视图

(...)
onShow: function () {
    this.ui.input2.val('this works');
    this.ui.input2.focus();
},
(...)

JS控制器

$('#1').focus();
var inputRegion = new Backbone.Marionette.Region({
  el: "#inputRegion"
});
var input2 = new Input2();
inputRegion.show(input2);
木

偶文档中的更多信息：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#region-events-and-callbacks

好吧，我设法通过扩展木偶.js解决了它，但如果其他人有更好的主意，不涉及扩展库，我会欣然接受并给你买一个甜甜圈。

// After studying Marionette.js' annotated source code,
// I found these three functions are the only places
// where a view is appended after rendering. Extending
// these by adding an onAppend call to the end of
// each lets me focus and do other DOM manipulation in
// the ItemView or Region, once I am certain it is in
// the DOM.
_.extend(Marionette.CollectionView.prototype, {
  appendHtml: function(collectionView, itemView, index){
    collectionView.$el.append(itemView.el);
    if (itemView.onAppend) { itemView.onAppend() }
  },
});
_.extend(Marionette.CompositeView.prototype, {
  appendHtml: function(cv, iv, index){
    var $container = this.getItemViewContainer(cv);
    $container.append(iv.el);
    if (itemView.onAppend) { itemView.onAppend() }
  },  
});
_.extend(Marionette.Region.prototype, {
 open: function(view){
    this.$el.empty().append(view.el);
    if (view.onAppend) { view.onAppend() }
  },  
});
相关文章：