2015-12-29 19 views
0

我收到instantsearch.js的錯誤,這對我沒有任何意義。錯誤是:Algolia instantsearch.js發生了極小的異常;不變

錯誤:發生了極小的異常;使用非縮小的開發環境提供完整的錯誤消息和其他有用的警告。

我創建了一個小提琴與有問題的代碼:

https://jsfiddle.net/qkqzgsv9/

這裏的HTML:

<div type="text" id="search-box" class="form-control"></div> 
<table class="table table-striped"> 
      <thead> 
       <tr> 
        <th>Number</th> 
        <th>Name</th> 
        <th>Starts</th> 
        <th>Duration</th> 
        <th>Room</th> 
        <th><span class="glyphicon glyphicon-info-sign"></span></th> 
       </tr> 
      </thead> 
      <tbody id="hits-container"> 
      </tbody> 
</table> 
<div id="pagination-container"></div> 

而這裏的Java腳本:

var search = instantsearch({ 
    appId: '5V0BUFDX8J', 
    apiKey: 'a25692c12853aea7a77c5a7125498512', 
    indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events', 
    urlSync: { useHash: true } 
    }); 

search.addWidget(
    instantsearch.widgets.searchBox({ 
    container: '#search-box', 
    autofocus: true, 
    placeholder: 'Search for events by keyword, description, or event number.' 
    }) 
); 

search.addWidget(
    instantsearch.widgets.hits({ 
     container: '#hits-container', 
     templates: { 
     empty: 'No events found', 
     item: '<tr><td><a href="{{view_uri}}">{{event_number}}</a></td><td><a href="{{view_uri}}" target="_new">{{name}}</a></td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>' 
     }, 
    }) 
); 

    search.addWidget(
    instantsearch.widgets.pagination({ 
     container: '#pagination-container' 
    }) 
); 

    search.start(); 

它發生在Safari和Chrome中。我甚至沒有使用instantsearch.js的縮小版本。任何想法是什麼導致它?

+0

到目前爲止,我發現它不喜歡點擊小部件中的HTML標籤。如果我刪除所有這些變量,然後只有變量,那麼我不會得到那個錯誤,這當然對我不起作用。 – user128638

+0

我試着用一個函數替換模板,但得到相同的錯誤:https://jsfiddle.net/cc57cLjn/4/ – user128638

+0

所以事實證明,這只是造成悲傷的表標籤。如果我用div封裝,那麼它不會廢話。顯然它可以用div標籤來模擬一個表格,但我寧願不要。這裏有一個標籤工作小提琴:https://jsfiddle.net/c6v7jvyd/4/ – user128638

回答

5

這是一個棘手的錯誤,它是由於這個小部件在內部使用React而生成的。

小部件嘗試呈現將包含您的模板的div。但是這是不正確的,因爲你的模板包含不能在div中呈現的td,所以瀏覽器試圖解決這個問題。這導致React拋出一個不變的違規錯誤,因爲DOM不是它所期望的。最後你可以看到這個特定的錯誤,因爲React在構建中被縮小了。

修復方法是不使用td或等待修復此問題https://github.com/algolia/instantsearch.js/issues/707

+0

謝謝你的迴應。我決定跳過使用instantsearch.js。看起來它可能有點早(buggy),所以我決定用AngularJS來創建自己的界面。我喜歡所有的小部件,但創建這些部件並不難。 – user128638