Backbone

Question

kullanarak typeahead ile ilgili önerileri içeren düğmeleri içerir Tipik öneri önerilerindeki düğmeler için farklı yöntemler tetiklemenin bir yolunu arıyorum. Ben oluşturduk yöntemleri seçilen olay olur ama:

ben altına omurgasını kullanıyorum ve ben yalnızca varsayılan typeahead tıklayın bununla ilgili etkinliklerle çağrılacak olan yöntemler oluşturduk.

DÜZENLEME

Bu, bu görünüm hakkında kodudur:

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

});

Çalışmak için ne yapabilirim?

Answer 1

Bu görünümde dinleyicileri istiyorsanız, bu görünümde html'yi bu düğmelerle oluşturmanız gerekir.

Şu anda html yazmak için javascript kullanıyorsunuz. Bunu asla tavsiye etmem. Durumunuzda bu, görüşün bu unsurları bilmediği anlamına gelir.

Bu sorunu çözmek için: bir şablon kullanın ve bunu render() yönteminde oluşturun.

Yukarıdaki örnekte 'Kavramlar' listesi için ek bir görünüm sunacağım. Bu yeni görünüm bu görünümle tetiklenebilir. Bir [minimal ve kapsamlı bir örnek] kodu (http://stackoverflow.com/ aşağı şerit,

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) { 

    }, 

});