用于表单值的Backbone Views和webshims

时间:2013-11-13 21:13:48

标签: backbone.js webshim

在骨干项目中使用webshims的最佳方法是什么?有没有办法避免全局使用它,只为特定视图加载它?

1 个答案:

答案 0 :(得分:1)

是的,这是可能的。但我总是在基础设置中包含modernizr和polyfiller.js。

如果你这样做,你应该至少配置waitReady和basePath:

webshims.setOptions({ waitReady: false, basePath: "/js/libs/shims/" });

您的观看代码可能如下所示:

Backbone.View.extend({

  initialize: function(){
    //Load webshims
    webshims.polyfill('forms forms-ext mediaelement');
  },

  render: function() {
    this.$el.html( this.template(this.model.attributes) );
    //update new created elements
    this.$el.updatePolyfill();
    return this;
  }

});

通常,webshims会延迟jQuery的'ready'事件,直到实现所有功能。如果您只想在特定视图中使用webshims,则无法延迟它。如果您想使用polyfilled JS / DOM API。你应该包装你的JS代码,它在webshims.ready回调中使用这些API:

render: function() {
    var thisObject = this;
    this.$el.html( this.template(this.model.attributes) );
    //update new created elements
    this.$el.updatePolyfill();

    //wait until video API is implemented and then use it
    webshims.ready('mediaelement', function(){
        $('video', thisObject.$el).play();
    });
    return this;
}

如果您想加快速度,可以在视图内和window.load之后加载:

   $(window).on('load', function(){
      //preload after onload
      webshims.polyfill('forms forms-ext mediaelement');
   });

这样,只要视图开始初始化或onload后,就会加载webshims。在这种情况下,webshims可能会给你一个警告,你已经两次调用它,但这不会受到伤害。