Question

我写了一个简单的应用程序，它有两个视图，第一个视图加载谷歌搜索引擎ui。

我有两条路线，搜索路线和家乡路线，我第一次加载搜索路线，效果很好，但是当我改变路线到家并回到搜索路线时，搜索视图将无效

SearchView代码：

var SearchView = Marionette.View.extend({
  template: "#search-template",
  onRender: function() {
    var cx = '010767762450613121260:fzszywg7ozm';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;

    var s = this.$el.find("#googleResult")[0];
    s.prepend(gcse);
  },
  events: {
    'click button': 'doSearch'
  },
  doSearch: function(e) {

    var input = document.getElementById('search-box-id');
                    var element = google.search.cse.element.getElement('searchresults-only0');
                    if (input.value == '') {
                        element.clearAllResults();
                    } else {
                        element.execute(input.value);
                    }
    log("Search for ");
  }
});

这是代码： https://jsfiddle.net/kk266551/29/

感谢。

Answer 1

我控制台我得到了这样的错误：

Uncaught TypeError: Cannot read property 'execute' of null at n.doSearch ((index):127)

这一行：element.execute(input.value);

这意味着它在下次渲染时找不到元素searchresults-only0。

在下一个渲染元素的名称应为searchresults-only1，依此类推。

我厌倦了通过给予gname https://developers.google.com/custom-search/docs/element#gname并通过它搜索元素来修复它，但它也不起作用。

最后我发现问题是每个渲染时都会重新加载Google脚本并与自身发生冲突。

这就是我在你的脚本中所做的，使它按预期工作：

<gcse:searchresults-only gname="other"></gcse:searchresults-only>

  onRender: function() {
     // check if Google script was loaded at least once
    if(!window.google) {
      var cx = '010767762450613121260:fzszywg7ozm';
      // saving gcse to global object
      var gcse = window.gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    } 
    var s = this.$el.find(".googleResult").last();
    s.prepend(window.gcse);
  },

  doSearch: function(e) {
  
  	var input = document.getElementById('search-box-id');
    var element = google.search.cse.element.getElement('other');
    if (input.value == '') {
      element.clearAllResults();
    } else {
      element.execute(input.value);
    }
  	log("Search for ");
  }

你欠街上一些无家可归者的钱。

木偶渲染视图未按预期工作

1 个答案: