Uwzględnij przyciski wewnątrz sugestii typu głowicy przy użyciu narzędzia Backbone

Question

Szukam sposobu wyzwalania różnych metod dla przycisków w podpowiedziach klawiszy.

Używam szkielet pod i ja stworzyliśmy powiązanych zdarzeń i metod, które mają być nazywane, jednak kiedy tylko kliknąć domyślny wpisywanie znaków z wyprzedzeniem: wybrane zdarzenie, ale nie metody Stworzyłem.

EDIT

Jest odpowiedni kod dla tego widoku:

var QueryInputView = Backbone.View.extend({ 
el: $('#query-input'), 
initialize: function (options) { 
    _.bindAll(this, 'clearInput', 'initWordSuggester', 'initConceptSuggester', 'initTypeAhead'); 
    this.initTypeAhead(); 
}, 
events: { 
    'keyup': function (e) { 
     if (e.keyCode === 13) { 
      var value = this.$el.typeahead('val').trim(); 
      if (value !== '') { 
       kbmed.events.trigger('query-term:add', value); 
       this.clearInput(); 
      } 
     } 
    }, 
    'click .add': "addConceptMust", 
    'click .add-mustnot': "addConceptMustNot", 
    'click .add-should': "addConceptShould" 
}, 
addConceptMust: function (event) { 
    // Add concept to filter list 
    console.log('adding'); 
    var id = $(event.currentTarget).attr('id'); 
    var term = $(event.currentTarget).parent().prev().text(); 
    app.queryPanel.addQueryConceptMust({'conceptId': id, 'term': term}); 
}, 
addConceptMustNot: function (event) { 
    // Add concept to filter list 
    var id = $(event.currentTarget).attr('id'); 
    var term = $(event.currentTarget).parent().prev().text(); 
    app.queryPanel.addQueryConceptMustNot({'conceptId': id, 'term': term}); 
}, 
addConceptShould: function (event) { 
    // Add concept to filter list 
    var id = $(event.currentTarget).attr('id'); 
    var term = $(event.currentTarget).parent().prev().text(); 
    app.queryPanel.addQueryConceptShould({'conceptId': id, 'term': term}); 
}, 
clearInput: function() { 
    this.$el.typeahead('val', ''); 
}, 
initWordSuggester: function() { 
    var suggestWordsQuery = { 
     "text": "%QUERY", 
     "phraseSuggestions": { 
      "phrase": { 
       "field": "article.fulltext", 
       "max_errors": 1, 
       "gram_size": 3, 
       "direct_generator": [ 
        { 
         "field": "article.fulltext", 
         "suggest_mode": "popular", 
         "prefix_length": 2, 
         "min_doc_freq": 3 
        } 
       ] 
      } 
     } 
    }; 

    var engineWords = new Bloodhound({ 
     name: 'words', 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: 'http://' + kbmed.properties.es.hostAndPort + '/' + kbmed.properties.es.docIndex + '/_suggest?source=' + JSON.stringify(suggestWordsQuery), 
      filter: function (response) { 
       var suggestions = response.phraseSuggestions[0].options; 
       if (suggestions && suggestions.length > 0) { 
        return $.map(suggestions, function (suggestion) { 
         return { 
          value: suggestion.text 
         }; 
        }); 
       } else { 
        kbmed.log('Not suggestions'); 
        return {} 
       } 
      } 
     } 
    }); 
    engineWords.initialize(); 
    return engineWords; 
}, 
initConceptSuggester: function() { 
    var suggestConceptsQuery = { 
     "query": { 
      "query_string": { 
       "default_field": "term", 
       "query": "%QUERY" 
      } 
     }, 
     "suggest": { 
      "text": "%QUERY", 
      "completitionSuggestions": { 
       "completion": { 
        "field": "term_suggest" 
       } 
      } 
     } 
    }; 

    var engineConcepts = new Bloodhound({ 
     name: 'concepts', 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: 'http://' + kbmed.properties.es.hostAndPort + '/' + kbmed.properties.es.sugIndex + '/_search?source=' + JSON.stringify(suggestConceptsQuery), 
      filter: function (response) { 
       var completitionSuggestions = response.suggest.completitionSuggestions[0].options; 
       if (completitionSuggestions && completitionSuggestions.length > 0) { 
        return $.map(completitionSuggestions, function (suggestion) { 
         var concept = JSON.parse(suggestion.text); 
         return { 
          concept: concept, 
          value: concept.term 
         }; 
        }); 
       } else { 
        var hits = response.hits.hits; 
        if (hits && hits.length > 0) { 
         return $.map(hits, function (hit) { 
          var concept = hit._source; 
          return { 
           concept: concept, 
           value: concept.term 
          }; 
         }); 
        } else { 
         kbmed.log('Not suggestions'); 
         return {}; 
        } 
       } 
      } 
     } 
    }); 
    engineConcepts.initialize(); 
    return engineConcepts; 
}, 
initTypeAhead: function() { 
    var that = this; 
    this.$el.typeahead({ 
     minLength: 3, 
     highlight: true 
    }, 
      { 
       source: this.initWordSuggester().ttAdapter() 
      }, 
      { 
       source: this.initConceptSuggester().ttAdapter(), 
       templates: { 
        header: '<h4 class="concept-name">Concepts</h4>', 
        suggestion: function (data) { 
         var concept = data.concept; 
         return '<div id="' 
           + concept.id 
           + '" class="concept-suggestion" >' 
           + concept.term.substring(0, 45) 
           + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-warning btn-xs add-should"><span class="glyphicon glyphicon-check"></span></a>' 
           + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-danger btn-xs add-mustnot"><span class="glyphicon glyphicon-minus"></span></a>' 
           + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></a>' 
           + '<strong style="float: right; font-size: 8pt; color: #837F7F;">' 
           + concept.category.toUpperCase() 
           + '</strong>' 
           + '</div>'; 
        } 
       } 
      } 
    ).on('typeahead:selected', function (e, datum) { 
     console.log(e); 
     console.log(datum); 
     e.preventDefault(); 
     if (datum.concept) { 
      kbmed.events.trigger('query-concept:add', datum.concept); 
     } else { 
      kbmed.events.trigger('query-term:add', datum.value); 
     } 
     that.clearInput(); 
    }); 
} 

});

Co mogę zrobić, aby działało?

Answer 1

Jeśli chcesz słuchaczy w tym widoku, będziesz musiał renderować HTML za pomocą tych przycisków w tym widoku.

W tej chwili używasz javascript do pisania html. Nigdy bym tego nie polecił. W twoim przypadku oznacza to, że widok nie zna tych elementów.

Aby rozwiązać ten problem: użyj szablonu i wyrenderuj go w metodzie render().

W powyższym przykładzie renderowałbym dodatkowy widok dla listy "Pojęć". Ten nowy widok może być wyzwalany przez ten widok.

tutaj jest mały przykład tego, co mam na myśli:

var QueryView = Backbone.View.extend({ 
    el: $('#query-input'), 
    initialize: function (options) { 
     _.bindAll(this, 'clearInput', 'initWordSuggester', 'initConceptSuggester', 'initTypeAhead'); 
    }, 

    render: function() { 

    }, 

    events: { 
     'keyup': 'handleKeyup' 
    } 

    handleKeyup: function (e) { 
     //run new concepts list view 
     var conceptsView = new ConceptsListView('queryValue'); 
    } 

}); 

var ConceptsListView = Backbone.View.extend({ 
    el: '#conceptsList', 
    queryResults: {}, 
    initialize: function (options) { 
     //do your query here 
     this.queryResults = yourQuery(); 
     this.render(); 
    }, 
    render: function() { 
     //Load HTML from template with query results 
     //in this template the buttons are to be found 
     this.$el.html(template); 
    }, 
    events: { 
     'click .add': "addConceptMust", 
     'click .add-mustnot': "addConceptMustNot", 
     'click .add-should': "addConceptShould" 
    }, 

    addConceptMust: function (e) { 

    }, 
    addConceptMustNot: function (e) { 

    }, 
    addConceptShould: function (e) { 

    }, 

});