3

我正在使用主干样板来呈现我的模板，它的 fetchTemplate 方法缓存了呈现的模板。

我想在渲染的内容上运行一些额外的代码，比如初始化手风琴等，但是使用异步编译的模板来做到这一点比我想象的要棘手。

这是一个例子：

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      $(view.el).html( tmpl({duels: view.collection.toJSON()}) );
      view.postrender();
    });
    return this;
  },
  postrender: function() {
    $('#duel-new').each(function() {
      console.log('Found something')
    });
  }
});

除上述内容外，我还使用http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/中概述的视图处理程序

这我做类似的事情

var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view)

这叫

$('#content').html(view.render().el)

但是发生的情况是，当模板还没有缓存时，先调用render，然后按时调用postrender。另一方面，当模板已经被缓存时，模板被立即渲染，postrender 被调用，但view.el还没有插入到 DOM 中，因此 $(this.el) 是一个空列表，并且 $('#duel -new').each() 是“无效的”。

当然，我可以在 viewHandler 的 render 调用之后添加 postrender 方法，但这会导致相同的问题，但在第一次调用 render 方法时。由于模板尚未编译，postrender 在其元素存在之前被调用，因此无法在这些不存在的元素上定义处理程序。

关于如何正确克服这个问题的任何想法？例如，使用 .on 的简单点击事件相对简单，但是更一般的结构$('#tabs').tabs()呢？例如？

我的 fetchTemplate 函数如下：

fetchTemplate: function(path, done) {
  window.JST = window.JST || {};

  // Should be an instant synchronous way of getting the template, if it
  // exists in the JST object.
  if (JST[path]) {
    return done(JST[path]);
  }

  // Fetch it asynchronously if not available from JST
  return $.get(path, function(contents) {
    var tmpl = jade.compile(contents,{other: "locals"});
    JST[path] = tmpl;

    return done(tmpl);
  });
},
4

4 回答 4

5

不需要所有这些并发症。

原始fetchTemplate返回一个 jQuery promise。如果您不了解 jQuery 的 Deferreds 和 Promises，那么您的版本也应该如此，现在是查看它们的好时机。回调已死；）

使用 Promise，一切都变得如此简单：在您的initialize获取模板并分配 Promise 中。然后仅在承诺已履行时才渲染，例如：

Duel.Views.Home = Backbone.View.extend({
    initialize: function () {
       this.templateFetched = statusapp.fetchTemplate(this.template);

    },
    ...

    render: function () {
        var view = this;
        this.templateFetched.done(function (tmpl) {
            view.$el.html( tmpl({duels: view.collection.toJSON()}) );
            ... // All your UI extras here...
        });
    }
});

请注意，一旦实现了承诺，done将始终简单地立即运行。如果您在视图$el之外修改视图，您当然可以遵循相同的模式，即将代码包装在view.templatedFetched.done(...).

于 2012-05-12T15:47:16.353 回答
2

我阅读了您提供链接的文章-僵尸之一。很好，据我所知，它已经包含了您问题的答案，所需要的只是对其进行搜索。在多次阅读和重新阅读您的问题后，我能想到的是您可能喜欢使用 .NET 方式（如 Zombies 文章中所建议的那样）。也就是说，类似：

// in showView method of viewHandler
if (this.currentView) {
    this.currentView.close();
}

this.currentView = view;
this.elem.html( this.currentView.render().el );
if ( this.currentView.onAddToDom )  // THIS IS THE IMPORTANT PART.
    this.currentView.onAddToDom();

在视图中，您添加一个“onAddToDom”方法，当您的视图添加到 dom 时，该方法将被调用。这可用于调用 postrender() 方法，或者您可以将 postrender() 重命名为“onAddToDom()”。这样，问题就解决了。如何？解释如下。

您可以将视图重新定义为：

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      $(view.el).html( tmpl({duels: view.collection.toJSON()}) );
    });
    return this;
  },
  onAddToDom: function() {
    $('#duel-new').each(function() {
      console.log('Found something')
    });
  }
});

现在当你做类似的事情时

var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view);

这被称为

$('#content').html(view.render().el)
if(view.onAddToDom)
    view.onAddToDom();

这将调用（以前称为）postrender() 方法。

问题解决了。

警告view.render()：但是请注意，如果直接调用而不是从内部调用 onAddToDom，这将失败（即 onAddToDom - 或者我们应该调用 postrender() 吗？ - 不会被调用） ，viewHandler('selector').showView因为我们从内部调用 onAddToDom。但无论如何，这不是必需的，因为如果我们想在渲染后调用某些东西，我们可以将它添加到render()方法本身。我只是想确保没有任何混淆，所以给出了这个警告。

于 2012-05-09T13:53:31.647 回答
0

  1. 您使用的是哪个版本的 Backbone？

  2. 您使用的是 jQuery、zepto 还是其他？什么版本？

  3. 仅当模板已缓存且未异步检索时才会出现问题？如果是这种情况，您可以在 jsfiddle 中创建一个示例吗？

  4. 出现问题的浏览器是什么？

  5. 因此 $(this.el) 是一个空列表，并且 $('#duel-new').each() 是“void”

    请准确定义“空列表”和“无效”的含义。除非严重搞砸了，否则 jQuery$( this.el )应该是长度为 1 的 jQuery 对象。 jQuery$( '#duel-new' ).each()应该是 jQuery 对象，长度可能为 0。

    正如@20100 提到的，如果您的 Backbone 版本支持它，您最好使用this.$el而不是$( this.el ).

  6. 这叫

     $('#content').html(view.render().el)

    jQuery.html()仅记录为接受字符串参数，因此如果使用 jQuery，我认为这不是一个好主意。

  7. 这我做类似的事情

     var view = Duel.Views.Home({model: mymodel})
 viewHandler('#content').showView(view)

    这不应该new Duel.Views.Home( { model : mymodel } )吗？否则，在构造函数内部，this将是Duel.Views.

于 2012-05-10T18:52:17.800 回答
0

您可以尝试更改标记的行吗：

view.$el与创建自己的相同$(view.el)，这是 Backbone 0.9.0+ 中的语法糖

$('#duel-new')遍历整个 dom-tree，而$('#duel-new', this.$el)仅在当前视图范围内检查，大大减少了 DOM 遍历所花费的时间。

虽然这可能不需要解决您的特殊问题，但我自己没有任何问题 

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      view.$el.html( tmpl({duels: view.collection.toJSON()}) ); // change this
      view.postrender();
    });
    return this;
  },
  postrender: function() {
    $('#duel-new', this.$el).each(function() { // change this
      console.log('Found something')
    });
  }
});
于 2012-05-10T11:04:55.923 回答