marionette 渲染视图未按预期工作

Question

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

我有两条路线，搜索路线和回家路线，我第一次加载搜索路线，效果很好，但是当我改变路线和回家再回到搜索路线时，搜索视图会不工作。

搜索查看代码：

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

你欠街上某个无家可归的人几块钱。

marionette 渲染视图未按预期工作

marionette render view is not working as expected

javascript

backbone.js

marionette