Backbone.js

Question

का उपयोग कर एक jQuery UI स्वत: पूर्ण विजेट को सही तरीके से कैसे जोड़ा जाए I Backbone.js सीखने की प्रक्रिया में हूं। मैं वर्तमान में मानता हूं कि अगर कोई बैकबोन.जेएस का उपयोग कर रहा है तो सभी क्लाइंट-साइड जावास्क्रिप्ट/jQuery को बैकबोन के साथ एकीकृत किया जाना चाहिए। विभिन्न ऑनलाइन ट्यूटोरियल से मैं देख सकता हूं कि बैकबोन कैसे काम करता है और इसके अंतर्निहित सिद्धांतों को समझता है।

लेकिन jQuery UI विजेट्स जैसी चीज़ों के बारे में क्या? क्या इन्हें बैकबोन.जेएस के साथ भी एकीकृत किया जाना चाहिए? उदाहरण के लिए, मैं एक फॉर्म फ़ील्ड पर jQuery UI स्वत: पूर्ण विजेट का उपयोग करना चाहता हूं (नीचे कोड देखें)। मैं 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 का उपयोग करके, @saniko मैंने दृश्य के 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

मैं जो अलग के साथ बातचीत में कई रूप विचारों में "इलाके" क्षेत्रों को बढ़ाने के लिए स्वत: पूर्ण उपयोग कर रहा हूँ एक उपयोगी लेख है मॉडल और विभिन्न खोज एपीआईएस।

इस मामले में मुझे लगता है कि "स्वत: पूर्ण इलाके" एक क्षेत्र के "" व्यवहार है, बल्कि एक दृश्य ही है और यह सूखा रखने के लिए मैं इसे इस तरह से लागू करने की तुलना में:

• मैं एक LocalityAutocompleteBehavior उदाहरण है
• मैं प्रपत्र क्षेत्र के लिए व्यवहार लगाने से वे चाहते हैं
• व्यवहार बांधता प्रपत्र क्षेत्र के लिए "jQuery ui को स्वत: पूर्ण" और उसके बाद दृश्य के मॉडल में विशेषताओं से उत्पन्न होने वाला स्वत: पूर्ण हुआ, दृश्य इस उदाहरण का उपयोग करते हुए देखा गया है तब इन क्षेत्रों के साथ जो भी चाहें कर सकते हैं।

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

  और का उपयोग कर एक दृश्य के एक उद्धरण:

यहाँ कुछ coffeescript अर्क

LocalityAutocompleteBehavior (मैं भी requirejs और https://github.com/jrburke/jqueryui-amd पर भयानक jQuery ui को एएमडी आवरण का उपयोग कर रहा है) यह व्यवहार:

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