如何正确使用添加一个Backbone.js的jQuery用户界面自动完成构件 [英] How to correctly add a jQuery UI autocomplete widget using Backbone.js

问题描述

我在学习Backbone.js的过程。目前，我认为，如果一个使用Backbone.js的那么所有客户端的JavaScript / jQuery的应与骨干网进行整合。从各种在线教程，我可以看到骨干是如何工作的，并了解其基本原则。

I am in the process of learning Backbone.js. I currently assume that if one is using Backbone.js then all client-side javascript/jQuery should be integrated with Backbone. From the various online tutorials I can see how Backbone works and understand its underlying principles.

但是，这样的事情的jQuery UI部件？如果这些还可以与集成Backbone.js的？比如我想使用jQuery UI的自动完成构件上的表单字段（见下文code）。我怎么会去与Backbone.js的做这个（或总会有使用主干这样的事情不会打扰）？好像骨干'模式'和'收集'不会与jQuery的自动完成构件工作，因为这种东西是jQuery用户界面的Widget本身捆绑起来。

But what about things like jQuery UI widgets? Should these also be integrated with Backbone.js? For example, I want to use the jQuery UI Autocomplete widget on a form field (See code below). How would I go about doing this with Backbone.js (or would one not bother using Backbone for such things)? It seems like Backbone 'Model' and 'Collection' wouldn't work with the jQuery Autocomplete Widget, since that kind of stuff is tied up within the jQuery UI Widget itself.

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

什么是这样的事情的标准做法？我能想到的唯一的事情就是创建一个视图，然后添加窗口小部件的渲染功能。但是，这并没有真正看起来很骨干十岁上下给我。

What is the standard practice for such things? The only thing I could think of was to create a view and then add the widget in the render function. But this doesn't really seem very Backbone-ish to me.

推荐答案

在渲染视图武官所有的插件：

Attache all your plugins when you render the view:

你可以做这样的事情：

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

希望帮助

这篇关于如何正确使用添加一个Backbone.js的jQuery用户界面自动完成构件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！