Javascript - Dojo - Объект ссылки на себя - PullRequest
Новая
       22

Javascript - Dojo - Объект ссылки на себя

1 голос
/ 13 декабря 2011

Я использую Dojo JS framework 1.6 для объявления и отслеживания пользовательских классов.Я хочу использовать эти классы для создания многократно используемых функций, таких как диалоговое окно редактирования пользователя и т. Д.

Проблема, однако, заключается в использовании метода внутри класса для создания, например, кнопки типа dojo html.Если затем этой кнопке нужно вызвать метод обратно в классе, она не знает, для какой экземплярной переменной вызывается ..

Как бы я мог получить stage2 для ссылки на этот экземпляр класса без жесткого кодирования имени объекта?

Пример класса: 

dojo.provide('edit.contacts');
dojo._hasResource["edit.contacts"] = true;

dojo.declare("edit.contacts", null,
{
   /*
   *     Init
   */
   init   : function(customer_id)
   {
      var out = ''
      +'<button dojoType="dijit.form.Button" onClick="stage2();" />Edit</button>'
      +'';

      // Create the dlg box
      var edit_contacts_dlg = new dijit.Dialog(
      {
         title    : 'New Diag',
         style    : 'width:550px; height:600px;background:#FFFFFF;',
         id       : 'edit_contacts_dlg',
         content  : out
      }).show();
   },

   /*
   *     Stage 2
   */
   stage2   :  function()
   {
      alert('halllo');
   }
}

Пример использования:

Ответы [ 2 ]

5 голосов
/ 13 декабря 2011

Это проблема масштаба.Вы всегда будете сталкиваться с такой проблемой при смешивании JS и HTML для создания узлов или виджетов.Вам нужна ссылка на экземпляр виджета кнопки в тот момент, когда вы вызываете метод init (), которого у вас нет, потому что вы использовали HTML и dojo.parser для создания кнопки.По сути, у вас есть три выхода:

  1. Создайте кнопку программно и назначьте ей onClick либо напрямую, либо через dojo.connect.Это очень гибко, так как вы можете буквально передать любую функцию, используя любые переменные в области видимости, в onclick. 

    var out = new dijit.form.Button({
    label: 'Edit',
    onClick: dojo.hitch(this, 'stage2')
});
var edit_contacts_dlg = new dijit.Dialog({
    title    : 'New Diag',
    style    : 'width:550px; height:600px;background:#FFFFFF;',
    id       : 'edit_contacts_dlg_' + uniqueId,
    content  : out
}).show();

  2. Создать уникальный идентификатор для каждого экземпляра класса edit.contants и вставитьэто в вашу строку HTML.Затем получите экземпляр кнопки с помощью dijit.byId () и выполните вышеупомянутое соединение: 

    var out = '<button dojoType="dijit.form.Button" id="' + uniqueId + '">Edit</button>';
var edit_contacts_dlg = new dijit.Dialog({
    title    : 'New Diag',
    style    : 'width:550px; height:600px;background:#FFFFFF;',
    id       : 'edit_contacts_dlg_' + uniqueId,
    content  : out
}).show();
var btn = dijit.byId(uniqueId);
dojo.connect(btn, "onClick", this, "stage2");

  3. Создайте класс на основе dijit._Widget и dijit._Templated, т.е. виджета,и используйте функцию data-dojo-attach-point для получения экземпляра кнопки ( смотрите его в действии на jsFiddle ): 

    dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");

dojo.ready(function() {

    dojo.declare("edit.ContactTemplate", [dijit._Widget, dijit._Templated], {
        templateString: '<div><button data-dojo-type="dijit.form.Button" data-dojo-attach-point="editBtn">Edit</button></div>',
        widgetsInTemplate: true    
    }) 

    dojo.declare("edit.contacts", null, {

        init: function(customerId) {
            this.customerId = customerId;

            var widget = new edit.ContactTemplate();
            dojo.connect(widget.editBtn, "onClick", this, "stage2");

            this.editContactDlg = new dijit.Dialog({
                title    : "Dialog: " + customerId,
                style    : "width:200px;height:80px;background:#FFFFFF;",
                id       : "edit_contacts_dlg_" + customerId,
                content  : widget
            });

            this.editContactDlg.show();
            return this;
        },

        stage2:  function() {
            alert(this.customerId);
        }
    });

    var c1 = new edit.contacts().init("customer #1");
    var c2 = new edit.contacts().init("customer #2");
});

Это полезно, когда вынужна ссылка на множество виджетов / узлов.

1 голос
/ 13 декабря 2011

Я действительно не пользуюсь додзё, но я попробовал несколько вещей.Похоже, вы можете использовать это так же, как обычно.Попробуйте это демо: http://jsfiddle.net/dSpsr/11/

...