2

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

看我的小提琴，

或阅读此处的代码：

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);

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

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

有什么好主意吗？

更新

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

谢谢一百万，lukaszfiszer。

4

2 回答 2

3

ItemView解决方案是将您的内部渲染为Marionette.Region. 这样，onShow一旦将视图插入 DOM，就会在视图上调用方法。

例子：

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);

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

于 2013-10-09T01:12:55.570 回答
1

好吧，我设法通过扩展 Marionette.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() }
  },  
});
于 2013-10-09T01:12:14.390 回答