Backbone.jsを使用してjQuery UIオートコンプリートウィジェットを正しく追加する方法

Question

私はBackbone.jsの学習中です。私は現在、Backbone.jsを使用している場合、すべてのクライアントサイドのjavascript/jQueryをBackboneと統合する必要があると想定しています。さまざまなオンラインチュートリアルから、Backboneがどのように機能し、その基本原則を理解するかを見ることができます。

しかし、jQuery UIウィジェットのようなものはどうですか？これらもBackbone.jsと統合する必要がありますか？たとえば、フォームフィールドにjQuery UI Autocompleteウィジェットを使用したい（下記のコードを参照）。 Backbone.jsでこれをやってみるとどうなりますか？バックボーンの「モデル」や「コレクション」はjQueryオートコンプリートウィジェットでは機能しません。そのようなものはjQuery UIウィジェット自体の中に縛られているからです。

(function($){ 

    $(document).ready(function() { 
    $(this.el).autocomplete({ 
     source: function(req, res) { 
     $.ajax({ 
      url: '/orgs.json?terms=' + encodeURIComponent(req.term), 
      type: 'GET', 
      success: function(data) { 
      res(data); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
      alert('Something went wrong in the client side javascript.'); 
      }, 
      dataType: 'json', 
      cache: false 
     }); 
     } 
    }); 
    }); 

})(jQuery); 

このようなことの標準的な慣行は何ですか？私が考えることができる唯一のことは、ビューを作成してレンダリング機能にウィジェットを追加することでした。しかし、これは本当に私にとってバックボーンだとは思われません。

Answer 1

アタッシェすべてのプラグインビューをレンダリングする：あなたはこのような何か行うことができます

：

render: function() { 

    var view = this; 
    // Fetch the template, render it to the View element and call done. 

    application_namespace.fetchTemplate(this.template, function (tmpl) { 
    var viewModel = view.model.toJSON(); 
    view.$el.html(tmpl(viewModel)); 

    view.$("#categories").autocomplete({ 
     minLength: 1, 
     source: function (request, response) { 
     $.getJSON("url" + view.storeId, { 
      term: request.term, 
      }, function (data) { 
      response($.map(data, function (item) { 
       return { 
       value: item.title, 
       obj: item 
       }; 
      })); 
     }); 
     }, 

     select: function (event, ui) { 
     //your select code here 
     var x = ui.item.obj; 
     var categories = view.model.get("x"); 

     // bla bla 
     } 
     error: function (event, ui) { 
     //your error code here 
     } 
    } 
    }); 
} 

希望私の見解では

Answer 2

を助け、データのコレクションにアクセスします@サニコのようにthis.collectionを使用して、ビューのrender機能でオートコンプリートを設定しました：

render : function() { 
    ... 

    var me = this; //Small context issues 

    this.$el.find('input.autocompleteSearch').autocomplete({ 
     source : function(request, response){ 
      me.collection.on('reset', function(eventname){ 
       var data = me.collection.pluck('name'); 
       response(data); //Please do something more interesting here! 
      }); 

      me.collection.url = '/myresource/search/' + request.term; 
      me.collection.fetch(); 
     } 
    }); 

    ... 
}, 
... 

Answer 3

ここで私は違うと対話する多くのフォームビューで「地域」フィールドを強化するためにオートコンプリートを使用している有用な製品がBACKBONE.JS + jQueryのでオートコンプリートの例を与え、純粋なjQueryの http://rockyj.in/2012/05/25/intro_to_backbone_jQuery.html

Answer 4

と比較することですモデルと異なる検索APIがあります。この場合

私は、「オートコンプリートの局所性は、」フィールドの「行動」のではなく、ビュー自体であり、私はそれをこのように実装DRYそれを維持することを感じる：

• 私はLocalityAutocompleteBehaviorインスタンスを持っています
• フォームフィールドに振る舞いを適用してこのインスタンスを使用しているビューがあります
• 「jquery-uiオートコンプリート」をフォームフィールドにバインドし、オートコンプリートが発生したときにビューのモデルに属性を作成します。これらのフィールドで必要なものを何でも行うことができます。ここで

いくつかのCoffeeScriptを抽出し（私もhttps://github.com/jrburke/jqueryui-amdでrequirejsと素晴らしいjqueryの-UIのAMDラッパーを使用しています）

LocalityAutocompleteBehaviorです：

define [ 
    'jquery' 
    #indirect ref via $, wrapped by jqueryui-amd 
    'jqueryui/autocomplete' 
], ($) -> 
    class LocalityAutocompleteBehavior 

    #this applies the behavior to the jQueryObj and uses the model for 
    #communication by means of events and attributes for the data 
    apply: (model, jQueryObj) -> 
     jQueryObj.autocomplete 
     select: (event, ui) -> 
      #populate the model with namespaced autocomplete data 
      #(my models extend Backbone.NestedModel at 
      # https://github.com/afeld/backbone-nested) 
      model.set 'autocompleteLocality', 
      geonameId: ui.item.id 
      name: ui.item.value 
      latitude: ui.item.latitude 
      longitude: ui.item.longitude 
      #trigger a custom event if you want other artifacts to react 
      #upon autocompletion 
      model.trigger('behavior:autocomplete.locality.done') 

     source: (request, response) -> 
      #straightforward implementation (mine actually uses a local cache 
      #that I stripped off) 
      $.ajax 
      url: 'http://api.whatever.com/search/destination' 
      dataType:"json" 
      data:request 
      success: (data) -> 
       response(data) 

    #return an instanciated autocomplete to keep the cache alive 
    return new LocalityAutocompleteBehavior() 

そして使用してビューの抽出この動作は

define [ 
    'jquery' 

    #if you're using requirejs and handlebars you should check out 
    #https://github.com/SlexAxton/require-handlebars-plugin 
    'hbs!modules/search/templates/SearchActivityFormTemplate' 

    #model dependencies 
    'modules/search/models/SearchRequest' 

    #autocomplete behavior for the locality field 
    'modules/core/behaviors/LocalityAutocompleteBehavior' 


    ], ($, FormTemplate, SearchRequest, LocalityAutocompleteBehavior) -> 
    #SearchFormView handles common stuff like searching upon 'enter' keyup, 
    #click on '.search', etc... 
    class SearchActivityFormView extends SearchFormView 

    template: FormTemplate 

    #I like to keep refs to the jQuery object my views use often 
    $term: undefined 
    $locality: undefined 

    initialize: -> 
     @render() 

    render: => 
     #render the search form 
     @$el.html(@template()) 
     #initialize the refs to the inputs we'll use later on 
     @$term = @$('input.term') 
     @$locality = @$('input.locality') 

     #Apply the locality autocomplete behavior to the form field 'locality' 
     LocalityAutocompleteBehavior.apply(@model, @$locality) 

     #return this view as a common practice to allow for chaining 
     @ 

    search: => 
     #A search is just an update to the 'query' attribute of the SearchRequest 
     #model which will perform a 'fetch' on 'change:query', and I have a result 
     #view using using the same model that will render on 'change:results'... 
     #I love Backbone :-D 
     @model.setQuery {term: @$term.val(), locality: @$locality.val()}